Hi,
Well since you cannot move your localhost to a live server so we cannot inspect it, and since we have no such reports of visual composer causing such issues, you will have to trouble-shoot the issue yourself. Try to use the browser inspector and figure out where the extra space is coming from. We have no idea of why this is happening and we cannot recreate the issue. And since you cannot provide access to your site so we can see inspect it ourselves, I am unable to help any further based on the current circumstances.
Thank you!
Hi,
That is the size the images that the browser inspector shows: http://screencast.com/t/IcrgtpruGb This is the size rendered on screen at the moment and that is why they do not fit.
Please try to edit the post and re-size the images from wordpress and align the images side by side using the MCE editor.
Thank you!
Hi,
This will take care of most elements in your site.
.td-module-title a{
color: #005b88;
}
.td_module_wrap:hover a{
color:#980000!important;
}
.widget li a{
color:#005b88;
}
.widget li a:hover{
color:#980000;
}
The links you add on posts can be colored from the mce editor. If you add extra widgets in the sidebar and need to be edited as well, you can follow this tutorial on how to use the browser inspector and create a css code: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
I hope this helps.
Thanks.
Hi,
In order to target only the mobile version you can use the media queries. For example, the code above would look like this:
@media (max-width:767px){
.td-icon-menu-down:before {
content: '\e80f'!important;
}
}
If you want to have individual icons, you can target each menu item using the unique menu item ID:
http://screencast.com/t/64WrVlhrM. You can use your browser inspector to get the individual menu item ID and use it like so:
@media (max-width:767px){
#menu-item-226 .td-icon-menu-down:before {
content: '\e80f'!important;
}
}
Thanks.
Hi,
You can use the browser inspector to see the dimensions exactly like so: http://screencast.com/t/9cG3y3SfC
Without the padding: http://screencast.com/t/PJXIxQ3z
Thank you!
Hi,
For those particular widgets please use this code:
.widget_text{
margin-bottom:0!important
}
.widget{
margin-bottom: 5px!important;
}
You can use your browser inspector to get the specific classes and see the margins and padding on every element if you require this in any future customization:
Right click the element and select ‘inspect’: http://screencast.com/t/xESxPXQ6fg
Then you simply copy the classes for the element and modify the css property.
Hope this helps.
Thanks.
Hi,
As you can see, the topic is form almost 2 years back. The code will not work anymore as the theme has been updated many times since then. You can target your blocks using the browser inspector and use the specific css classes like so: http://screencast.com/t/IklwH06h21Xq
In this case, if you want to remove the padding, you would use the code like so:
.td_block_7.td_block_wrap{
padding-bottom: 0!important;
}
I also added the block 7 class so the code will be more specific as multiple blocks use the .td_block_wrap class and if I were to only leave this class in the code, ALL the blocks will have the padding removed.
Hope this helps.
Thank you!
Hello,
You can use the same technique for hiding any element.
You would use the code like so:
.page-id-147 .td-header-rec-wrap{
display:none!important;
}
You need to use the browser inspector and target the css classes.
Thank you!
Hello,
For the font, if you change it with css you need to inspect every place you want to change it (use the browser inspector) as not all places are ‘p’ elements.
As for the h1 link, you will probably need to contact the plugin author and let him know of the issue. Try to switch to a wp default theme to see if the link still goes to the wrong address.
Thank you!
Hello,
The speces you mention are margins and padding that can be removed with css. As this modification is a substantial one and specific for every case, we cannot do it for you as you have tyo decide what goes where so I will show you hw to do it with an example and then you can apply the method for all the other blocks.
Important note: the vertical spacing cannot be removed. That is the theme width. Our theme was created using a fixed with and if this is altered, the elements will not position propoerly anymore.
All the horizontal ones can be remove though.
You will have to know a bit of css for this. You can use the browser inspector to see the margins and padding:
http://screencast.com/t/oJWhHavwl9R
Then you can create your css code to overwrite the one form the theme.
This code will remove the topo margin and bottom padding for all blocks:
.block-title{
margin-bottom:5px!important;
}
.td_block_wrap{
padding-bottom: 5px!important;
}
But the space between block posts are added on every specific module so you need to inspect them with the browser inspector and remove them for every module type.
The same goes for the header. Different header styles have different margins and padding..
I hope this helps.
Thank you!
Hi,
The arrow can be removed with css like so:
.category-102 .menu-item-930 .td-icon-menu-down{
display:none!important;
}
For this you will need the category id (to target a specific category page) and the menu-item class (to target a particular menu-item) you can get with your browser inspector:
http://screencast.com/t/rFfkSBdLN and http://screencast.com/t/rhvnQihnK4R
Thanks.
Hi,
Unfortunately the content background cannot be changed from the theme panel. The main content area has different containers for pages and for posts. you can use a custom css to do it but it will not work properly on some post templates.
You can try it out like so:
.td-main-content-wrap, .post{
background-color:red!important
}
Some post templates however will not get the background as they use different classes. You cna use your browser inspector to see them and add the classes to the code.
I hope this helps.
Thanks.
Hi,
ALL premium themes have custom classes as they bring extra content apart for the WordPress capabilities. As Chris suggests you will have to use the browser inspector to see the classes like so: http://screencast.com/t/8vN0ajjmMr3
There are many classes as there is no single one used in our theme for a specific element. You can try these but i’m not sure it will work:
content container: .td-main-content-wrap (or .td-post-content)
post title selector: .entry-title (or .td-post-title h1)
navigation: .td-post-next-prev-content
comments: .comments
I hope this helps.
Thank you!
Hello,
Unfortunately we will need to inspect this if we’re to help in this matter, so please let us know when we can access your website and inspect it as we need to use the browser inspector to see the css and try to position it. Please send us an email at contact@tagdiv.com and provide the website there even if it’s under construction. You can provide access for us to see the player and inspect it. Again, no promises as we have no idea if it can be fixed or not. I will take a look, but it could be a different issue than a css positioning (which I suspect). (If you send us the email, please also include a link to this topic.)
Thank you!
Hello,
If you can correct the issue fro your browser inspector then 80% of the problem is solved, You simply have to add the code in the theme panel – custom css box. You can use a chrome extension called live css editor and you can create your css code directly inside it and see it applied live. Then you simply copy over the code in the theme panel.
I hope this helps.
Thank you!
Hi,
I’m not sure how you managed the dimensions, but you cannot fit a 728 ad in a 696 container. Please use your browser inspector and check for the image size: http://screencast.com/t/9v2e6qkLYlt – http://screencast.com/t/vCZXCZ0ezjJ
Unfortunately adsense will provide the smaller version of the ad inside a smartlist as there is no space for the 728 ad.
Thank you!
Hi,
It depends on what you want to target. For example: http://screencast.com/t/xq06gBpZRx
If you want to target the li item, then you can use the class directly like so:
.customclass5{
yourcodehere
}
If you want to target the a link from the menu item you have to use it like so:
.customclass5 a{
yourcodehere
}
You can use your browser inspector to get all the menu classes: http://screencast.com/t/J5OL8GhtcP2y
In our theme every menu item has a specific class like for example the menu item i added a custom class to, also has a unique class that can be targeted so there is no need for the custom class: http://screencast.com/t/D5uDNrrUC1s: menu-item-398
I hope this helps.
Thank you
Hi,
You can try to inspect the images with your browser inspector and see if the thumbnail is being created. If not, then try to disable plugins and regenerate thumbs. Alternatively, if maybe the image is not big enough for the container (theme does not enlarge images. It just crops them) you could use the ‘thumbnail upscale’ plugin.
Thank you!
Hi.
Let’s try this another way. Our theme uses modules. They are the base element. Modules are used on their default behavior on category pages or the related articles section, where you can actualy select what module you want to display from the menu: http://screencast.com/t/Pu9yASEBRzZu As you can see in the theme files. there are more modules in the theme than the ones you can chose in the panel: http://screencast.com/t/tADdgqaPXp like the MX modules. They are used by the theme in set/specific places and cannot be used directly.
A block is simply a container, a box if you wish, in which we place one or more modules. These blocks are predefined and have these modules set to them. For example a block 1 is made up of 1 module 4 and 4 x module 6
http://screencast.com/t/q0k3tgZ8m9J
if you cannot refference what modules are used on blocks from the category tag list i exemplified above, you can use your browser inspector to see the classes for each module: http://screencast.com/t/aYjD5V5xs
I hope this helps.
Hello,
This will not be an easy task as it will have to be added with css. The mega-menu sub-categories will have to be targeted using a child selector. For example:
http://screencast.com/t/PsP9L9UqNw
If you want to add particular icons for every menu item, you will need to use a code for every single menu item like so:
.menu-item-53 .block-mega-child-cats a:nth-child(4)::before {
content: "\f040";
font: normal normal normal 14px/1 FontAwesome;
margin-right: 5px;
position: relative;
}
The nth child is the number corresponding for every child of the main menu item.
Result: http://screencast.com/t/z4KXnbfhQW
You will also need the menu-item for the main menu to target them. you can get this class with your browser inspector.
I hope this helps.
Thanks.
Hello,
The search icon does not work anymore (as well as your mobile menu) due to a js error. This is most of the time a plugin conflict. Please disable all your plugins except visual composer and clear cache and it should work fine again. Then you need to identify the plugin that causes the issue.
As for the menu item, you can create a custom link: http://screencast.com/t/GNxckduyl
It depends on the header style you use for the modification as the search icon is not positioned in the same way.
For example I used this code on my end:
.menu-item-57{
position: absolute!important;
right: 30px!important;
top: 50%!important;
margin-top: -24px!important;
}for this result: http://screencast.com/t/PiL7y2m4d
This is on the default header style. Every menu item has a unique class. Mine was 57. Youcan use your browser inspector to get your menu item number and replace it in the code.
Thank you!
Hello,
I’m not sure how the moz tool works, but the google structure data reveals no errors: http://screencast.com/t/wKjDSb9E5
If you inspect your website with the browser inspector and search for schema information you will find it is present as our theme provides it: http://screencast.com/t/HlpolsET
Here are the occurrences found for schema information in our theme files: http://screencast.com/t/X6knjpiogKId
I hope this helps.
Thank you!
Hello,
This can be done either with css or by removing the date from particular block types in the code.
For example if I want to remove the date in a particular block, for example a big grid 1, I would use this code
.td_block_big_grid_1 .td-post-date{
display:none!important
}
If you wish to remove the date on another block, you can simply use the browser inspector and change the first class (.td_block_big_grid_1 with the class from the block you want to remove the date from)
I hope this helps.
Thank you!
Hello,
You can use this code for the links :
.home .entry-title a{
color:yellow!important;
}
However, this will work for our theme elements. Other elements will most likely not receive the color as hey will not have the entry title class our theme has. In that case you need to use the browser inspector and get the plugin specific class.
Thank you!
Hello Paul,
1) You can change the read more button from the translation section of the theme panel: http://screencast.com/t/HwtAGm8P3T8t
2) You can remove the search from the menu either with css or by removing it from the theme files:
css: .header-search-wrap{
display:none!important
}
from the files: http://screencast.com/t/X6DjcpVf
3) You can inspect the links you created using the browser inspector and use css to target them(it’s best to assign them a custom class so you can target it)
4)You need to create a custom link (link to ‘#’) for them and then add the sub-menus or mega-menu:
http://screencast.com/t/76EKnjya
5) The content is controled by the plugin (most likely contact form 7 as this is the recommended one)
I hope this helps.
Thank you!
