Search Results for 'browser inspector'

Hello,

You will have to use the browser inspector and change the css for the menu. Here is a tip oin how to use it: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thank you!

Hi,

You could change the excerpt font color in general like this – https://www.screencast.com/t/soiFHE2fNWUg or by module or block for example like this – https://www.screencast.com/t/iIc5waAyPpeB
Here is a tutorial about using the browser inspector to identify the elements used on a page and their classes and create custom code, that you can use in the Custom css section in theme panel
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

I have inspected the website and using the Live CSS editor (Chrome extension) I was able to make modifications to it, without any problems whatsoever – https://www.screencast.com/t/nu8HVnVVnB
If you would like to make changes to to elements on the website, here is a guide about using the browser inspector to identify these elements and their classes, and create custom code that you can enter in Theme panel custom code section – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

You could do that for a specific menu item in the header top menu, by identifying the menu item in question and then use some CSS to modify it – https://www.screencast.com/t/tiUNxRf031oB or set a custom class for that menu item – https://www.screencast.com/t/ZRMrR1lnW and use that in the code – https://www.screencast.com/t/iXitiiWZElN
If you would like to make the social icons in the top menu bigger, you could do that like this
– https://www.screencast.com/t/84xYZw6LQSf9
This is the code used in the example, but you can modify it to how you like

.td-header-sp-top-widget i:before {
font-size: 20px;
}

Here is a tutorial about using the browser inspector to identify the elemets used on the pages and their classes
in order to create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

We have not had any negative reports from our users related to this. I have inspected your website and I see that there are many js errors present – https://www.screencast.com/t/mqA19x5pd This is usually cause by a plugin or a plugin conflict that are interfering with the theme functionality. I suggest you try to disable all your plugins except the Visual composer, clear any caching installed and check to see if the errors are still present, using the browser inspector for example. The theme is tested and works properly but some problematic plugins can cause a lot of unexpected issues. If there are no more problems, try enabling the plugins one at a time, while checking for errors to hopefully spot the one causing this.
Also it is recommended to use the cache and speed optimization from the tutorials mentioned in the previous reply for best results.

Thanks

Hello,

You can add a custom link with a link to none. this is done by linking it to # like so: https://www.screencast.com/t/Q1TfUkLh
The you can use a css to remove the mouse events for that menu item (you will need the menu item id):
.menu-item-4067{
pointer-events:none;
}
Ad the code in the theme panel-> custom css box
4067 is my menu item number. Yours will be different. You can inspect the menu with the browser inspector to see the menu item corresponding to it or https://www.screencast.com/t/YrYgwPody

Thank you!

Hello,

You can get the size of any container with 2 clicks using the browser inspector. Here is an example:
https://www.screencast.com/t/np8xt4OGPQC
I just right clicked on the header and hit the inspect button.
This guide can be very useful: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thank you!

Hi,

The currently available color options for the main menu, sub menu and mega menu are in the Theme panel->Theme colors header section – https://www.screencast.com/t/bw3EzE3sVC and there is no setting to set different colors for each menu item in the header main menu. However you could try to identify each of the menu items you want to modify, using the browser inspector – https://www.screencast.com/t/a1HFWCF9wI and change their color with some custom css – https://www.screencast.com/t/pv86r1FWjmpN
Here is a tutorial about using the browser inspector to create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ and also the code used in the example (must be edited with you menu item id’s)

.menu-item-6537 > a {
color: yellow!important;
}

For different logo’s on specific pages you could follow this topic – https://forum.tagdiv.com/topic/different-header-images-for-different-pages-and-videos/ and try the suggestion mentioned there. There is no option to have different logo’s by specific pages by default.

Thanks

Hi,

You could implement something like this – https://www.screencast.com/t/m4QJSRf4fBh by setting a border left on the sidebar using css, or setting a border in Visual composer for the sidebar section – https://www.screencast.com/t/OD2YQN4K
Please follow this tutorial about using the browser inspector tool to identify the elements on the page and their classes, in order to create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ If you can not achieve this, it would be helpful if you can provide a link to your website so I can inspect it and provide a more accurate solution.

Thanks

Hi,

If you mean the post subtitle – https://www.screencast.com/t/U6yUyJvVpc the font properties can be changed in the Theme panel->Theme fonts->Post elements – https://www.screencast.com/t/dS679WmxxouR For the color of the subtitle however, there is no option to change it at the moment, but you could use custom css like in this example – https://www.screencast.com/t/hP0Ti93dfI
You can follow this guide to create custom code using the browser inspector tool – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Please correct me if I misunderstood what you meant, and also provide more details specifying exactly what you want to achieve, so I can give you a more accurate response.

Thanks

Hi,

Unfortunately these are the only available block pagination options at the moment – https://www.screencast.com/t/grU2iTzp4 If you want to implement a different pagination for the blocks, it will have to be custom made, with modifications to the theme files – https://www.screencast.com/t/dtwQzrJEm6 and would require coding skills.
You could change the pagination font color using css like this – https://www.screencast.com/t/DZAOr5ylxPx
This is the code I used, but you could add more properties to it. Here is a tutorial about using the browser inspector tool to create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ by identifying the elements on the page and their classes.

.td-load-more-wrap a {
color: yellow;
}

Thanks

Hi,

Unfortunately there is no theme option available to have different colors on the modules/blocks. You can however create your own custom code to make these modifications, using this tutorial here – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ and identify the elements used on the page and their classes.

Hi,

Unfortunately that feature is not available in the version of Visual composer that comes bundled with the theme. You can always preview your website using the browser inspector tool responsive options – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ like this – https://www.screencast.com/t/SIjUYeiaNKt or you could search for a plugin if you want to have this option.

Thanks

Hi,

Unfortunately I can not make any plugin recommendations regarding this, because no such plugins were tested with the theme so I can not guarantee they will work properly. You could identify the selectors needed using the browser inspector tool – https://www.screencast.com/t/Utcyej8iC but I do not know if it will work or not. Try to search for other plugins with this functionality, maybe you can find one that works for you. The only navigation available for the posts by default is like this – https://forum.tagdiv.com/posts-with-pagination/

Thanks

Hi,

1. You can remove More from author from the related articles like suggested in this topic here – https://forum.tagdiv.com/topic/more-from-author-4/#post-154878

2. Unfortunately that is the only way that the prev/next feature displays on posts. You could modify some properties by creating custom code using the browser inspector tool – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ and the font here – https://www.screencast.com/t/E34l5LZGYf

Thanks

Hello,

If you want to make these changes, you should use a bit of CSS code. Try the code below and place it in Theme panel->Custom CSS Area.

The code is ->

.sf-menu > .current-menu-item > a{
background-color: black!important;
color: white!important;
}
.sf-menu > li > a:hover, .sf-menu ul{
background-color:black!important;
color:white!important;
}

The result is here -> https://www.screencast.com/t/wdN4Fxt7W

Please keep in mind that we do not have customization’s department and in the future, you should do it yourself all of your customizations because we cannot provide something like this, at the moment, sorry! It is good to know that we have a useful guide that if you will consult it you will know how you can create your own custom CSS code. Please check here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Hi,

Unfortunately it is not so easy to make the changes you want. The theme has the available options for header styles, each with a different layout. These were specially created and tested to work properly in all cases. If you want to modify the properties of a header style you can use the browser inspector tool to identify the elements used and their classes and create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ and also take in acoount the responsive design when you make these modifications. I see that you have made the header menu full width, the sub menu is related to the menu item you are on, so the best you could do is use a code like this – https://www.screencast.com/t/47uUZPmzA but in the case where a background is set, like post template 8 it will not be easy to make the menu full width. This is the code you must enter in Theme panel->Custom Css

.td-header-style-5 .td-mega-menu ul {
left:auto!important;
}

Thanks

Hi,

This code is for all the links on the pages, if you want to make it more specific you must identify the element where you want it to apply using the browser inspector tool – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ and modify the code accordingly.

.td-main-content-wrap a {
color: blue;
}

Thanks

Hi,

Remove the code provided previously regarding the read more, from the Theme panel->Custom Css. Then enter this one with the font color corresponding to the date like you asked – https://www.screencast.com/t/0Uf2Xbwu

.td-read-more a {
background-color: white;
color: #aaa;
}

Here is a tutorial about the browser inspector tool to help you identify the elements on the page and their classes and create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

The title for the slider element is already on top – https://www.screencast.com/t/ccQTgO3u As for the gradient this is the default style used as it can be seen using the browser inspector tool – https://www.screencast.com/t/KRhZdhF2 you could use this code if you would like to change the way it displays

.td-image-gradient:before {
height: 100%!important;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

With this result – https://www.screencast.com/t/NJJATncL
Thanks

Hello danhysa,

You should use a bit of CSS code to do that. Try to check our Inspector Browser tutorial here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ to see how you can create your own custom CSS code.

Thanks for the message!

Hello SavvyZen,

Furthermore, investigation, notice that does not exist any easy solution to change the font only for mobile mode, sorry! The theme uses only the default font for the entire website or the font which have been setup from theme panel. You can use the CSS to target the each section where you want to change the font but please notice that is not a simple task and this requires time-consuming and we cannot provide custom modifications at the moment, sorry! If you want to do this, you should do it yourself according to our documentation regarding on how you can create your custom CSS code, like this -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ Also, for more information about media queries, please consult here -> https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Hope this helps!

Thanks for your understanding!

Hi,

1. The category tag background color on post page can be set for each category like this – https://www.screencast.com/t/tQIkymBuU – https://www.screencast.com/t/9wcvSZAVHg9j You can find more information about the category settings in the documentation – https://forum.tagdiv.com/how-category-settings-work/

2. You can identify the color using your browser inspector tool – https://www.screencast.com/t/uxEcUOKqDbE – https://www.screencast.com/t/Kr4H3plIid1E and change it accordingly in the code provided.

Thanks

Hi,

You could increase the height of the top menu by increasing the line height – https://www.screencast.com/t/KDAwpk7KUk with a code like this, just enter it in Theme panel->Custom Css

.td-header-sp-top-menu,
.td-header-sp-top-widget {
line-height: 56px;
}

Result – https://www.screencast.com/t/EqvGKqxi
If this does not work for you, it would be helpful if you could provide a link to your site for a better solution. Also here is a tutorial about the browser inspector tool to help you create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ by identifying the elements on the page and their classes.

Thanks

Hi,

1. That should not happen since the custom color change made through the theme panel – https://www.screencast.com/t/3VaaynWKsGF overrides the default one – https://www.screencast.com/t/Ehs23Ot7OeDG Try clearing your cache after you make then change to the menu. I can not view the attached link – https://www.screencast.com/t/A4p04T3dr

2. The color set for the category tags is for the post pages – https://www.screencast.com/t/JpYmujN0 If you want to change it on modules you can use some css – https://www.screencast.com/t/IuWRbfIuHBDG
Here is a link to the browser inspector tool to help you identify the elements on the page and their classes and create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks