Search Results for 'browser inspector'

Hi,

This can be done with some css code, first you must identify the menu item which you want to modify using your browser inspector – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ so the code will apply only to that menu item – https://www.screencast.com/t/UsMLup3LTY Then you could set a custom width to that sub-menu using this code (replace the menu example with your menu item and change the width to the value you want) enter it in Theme panel->Custom Css

.menu-item-3580 .sub-menu {
width: 300px!important;
}

Result should be like this – https://www.screencast.com/t/9SxNkeVB2KX6
Thanks

Hi,

That happens when you set a background color or image, the site will automatically change to the boxed version like specified in the background tutorial – https://www.screencast.com/t/PkGW4kHd4VfZ and it would take some considerable customizing in order to keep the header and footer at full width. The Newspaper black demo uses a background property on the elements on the page, so you could make a custom code using your browser inspector – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ to identify these elements and their classes and change their background color – https://www.screencast.com/t/KX8tgxUP

Thanks

Hi,

Unfortunately I can not tell from a screenshot what properties the menu items have, so a link to your website to your website would be helpful, so we can inspect it for a more accurate response. You could also use your browser inspector and identify the elements used, their classes and their properties – https://forum.tagdiv.com/search/browser+inspector/ and modify them however you like with custom css.

Thanks

Hi,

If i understand correctly you are trying to align the menu items in the header menu in a different way. Each of the menu items have a float property set on them – https://www.screencast.com/t/FsVhME7M so the menu items will align one after the other starting from the right in the space available in the container. You could try to set a margin on the first menu item so the menu will look more centered if that is what you want – https://www.screencast.com/t/B1KbtNqP4u or set a margin on all the menu items – https://www.screencast.com/t/xCDxl30fBin Here is a link to the browser inspector tutorial that you can use to identify the elements on the page and their classes – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ If this not what you are asking please correct me and I will try to provide a solution.

Thanks

Hi,

1. There is a margin bottom set on category tag displayed above the title in the big grids – https://www.screencast.com/t/KDHDppLkL You could remove it if you want with custom css on a specific big grid or just one of the modules contained in that grid – https://www.screencast.com/t/1WwnFwMPn6vB using a code like this, then enter it in Theme panel->Custom Css

.td-big-grid-post .td-post-category {
margin: 0;
}

2. The background color could be changed with css also, using a code like this (depending on the big grid you use) – https://www.screencast.com/t/uMp0LjYxl

.td_block_big_grid_4 .td-post-category {
background-color: blue;
}

3. That depends on the big grid used, for example Big grid 9 has a margin-right property of 3px – https://www.screencast.com/t/4tn8HKXO for each of the module thumbs except the last one.

4. That shadow can be removed on the Grid style 1 (default) – https://www.screencast.com/t/7EvvFcBa using this code

.td-grid-style-1.td-hover-1
.td-module-thumb a:last-child:before {
display: none;
}

Result – https://www.screencast.com/t/zcU4uusiWh0
Also here is a tutorial about how you can use your browser inspector to find elements on the page and how to customize them – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hello LCale,

If you want a more accurate code, you should provide your website URL so I can take a closer look at it. Also, if your website is private and you cannot provide here, you should try to create your custom CSS code using the following guide here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ You should looking after margin-right or left for that container.

Thanks for your understanding!

Hi,

You could do that using this code, it will aplly on all the mega menus you have, if you want to make it more specific use browser inspector – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ to target a unique class where you want it to apply – https://www.screencast.com/t/1qp8tGmJfaP

.td_block_mega_menu {
background-color: red;
}

Or for a single menu item

.menu-item-3305 .td_block_mega_menu {
background-color: red;
}

Thanks

Hi,

You are welcome, glad you could find a solution to your problem. You could take a look at this tutorial – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ because it will help you to better understand which elements and classes are used and their properties and how to modify them.

Thanks

Hello,

Unfortunately only you can do it as it is pretty time consuming from the front end to inspect each element using the browser inspector to see exactly which block is used and which modules are used across the whole site. The best way to do this is get a pen and paper and write down all the blocks you use on your site and all the modules you see in the theme panel under template settings and category settings. Go through the whole theme paenl and write down each module and go through all pages abd write down the blocks used.
Create a list of the used elements and then check this list to see exactly which module is used on which block:
https://www.screencast.com/t/MHSm6wyns0 The module is the base element in our theme so once you reduce the block into modules then yopu can create the final list of exactly what modules are used for the entire site.
Note that there are modules on posts as well on galleries if you have any set up.
Then you can check this list and remove the ones that are not used: https://www.screencast.com/t/J2x9aAP2vp
It is recommended not to use very different modules in different places as youy will increase the number of thumbs used and the load on your server.

I know it;s not an easy thing to do , but a necessary step if you want to reduce the images created by the theme.

Thank you!

Hello,

Please increase your system status parameters like so: https://forum.tagdiv.com/system-status-parameters-guide/
The issue could be a memory limitation but it could also be a plugin conflict. You should check your browser console when you do not see the error and check it again when you see the error so you can see if there is an error provided that can provide a clue of why this happens.
Right now there is no error on your slider but I can see a console full of errors: https://www.screencast.com/t/Abgfkoq1z1a
please disable all plugins except visual composer and revolution slider, clear cache and reset cdn files if you use it. Please also check any custom code you might have added to the theme panel or the theme files. If you use a child theme, please switch to the main theme to make sure it does not affect the proper functionality of the theme. Then check the browser console again (from the browser inspector)

Thank you!

Hi,

Try using !important after the color like this – https://www.screencast.com/t/lyPgKbNTxj so it forcibly applies
Another way to do this would be to use an existing class of the menu item, right click the menu item and use your browser inspector – https://www.screencast.com/t/JeMc1rwAC7 and use a code like this

.menu-item-2747 a {
color: white!important;
}

Thanks

Hello Lewis,

You should use our guide here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ because there you will find all the steps which you are needed to take to create your own custom CSS code.

Thanks for your understanding!

Hello,

The difference is because block 4 does not use module 4. A block is a container for 1 or more modules but the numbers do not match. Please use this section to figure out which block uses which module: https://www.screencast.com/t/ja4MN2l6Kb8i
You cna also use the browser inspector to see the module sin a block as they have classes with the module name

Thank you!

Hi,

Each block uses different modules, they do not have to correspond to the block numbers (block 9 uses module 8 and block 10 uses module 9) you can get some impression about this in Theme panel->Block settings – https://www.screencast.com/t/DVULMaAiLI or you can check with your browser inspector – https://www.screencast.com/t/AYpQSGRwfto
You could align the title content using this code, enter it in Theme panel->Custom Css

.td_block_9 .td-module-title {
text-align: center;
}

Thanks

Unfortunately plugins prevent me from inspecting the site. You could have a conflicting plugin that causes some issues. I can’t tell as I cannot use the browser inspector on your site.
please disable all plugins except visual composer, clear cache and reset cdn files if you use it. Please also check any custom code you might have added to the theme panel or the theme files. If you use a child theme, please switch to the main theme to make sure it does not affect the proper functionality of the theme.

Thank you!

In order to see any image dimension in our theme you can take a look in the thumbnail section of the theme panel:
https://www.screencast.com/t/BeOUsMiye
You can also use the browser inspector to see the sizes: https://www.screencast.com/t/jp5mTVb4JiE

Thank you!

Hello irlandacenter,

Please notice that our sidebar for Author Page is simply created using settings of the theme from the panel. You should use our Inspector Browser guide inspecting our demo page because in this way you can see what blocks were used. Check the tutorial here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ For example, you can see the following screenshot like this -> https://www.screencast.com/t/FzYUMIQo6W0z

Thanks for your understanding!

Hi,

Please use the browser inspector and you will see every class you are looking for: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks.

Hello rahuldungawat,

As you can see from above screenshots, the code which I have provided you will center aligned your titles on the box.

Please keep in mind that we cannot provide additional customizations and usually, we recommend the developers from studio.envato.com

Please notice that all the custom CSS code should have to be put in Custom CSS area box. Most likely, the code not working because this is not correct, sorry! You should have some coding skills in this regard to create a good code. So, please notice that we have made a guide about what you can use your inspector browser to create your own CSS code, like this -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Hello Tom,

Sorry but there is no setting for it. You cna maybe use a bit of css to do it. Here is an example:
.footer-social-wrap .td-social-icon-wrap a{
color:red;
}

http://screencast.com/t/4Gj4IdvznidW

If you want separate colors you will have to use the browser inspector to idenbtify each class and add the css for each element. For example:
.footer-social-wrap .td-social-icon-wrap .td-icon-facebook{
color:dodgerblue
}
.footer-social-wrap .td-social-icon-wrap .td-icon-twitter{
color:cyan;
}

I hope this helps.
Thanks.

Hello rehanahmadjamal,

Unfortunately, our theme does not have any such an option that allows you to change the size of header logo and header ad, sorry! Please notice that both elements are precisely calibrated and if you will increase or decrease them you can damage the header layout and we cannot offer support for this, sorry! You should try to do this task yourself, using your own inspector browser and then you should create your custom CSS code according to our documentation here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Hope this helps!

Thanks for your understanding!

Hi,

The browser console errors can be seen by accessing the browser inspector and accessing the console tab like so:
http://screencast.com/t/1G0hUPp5P
As for the default theme. you can download it anythime from your envato account.

Thank you!
Bogdan B

Hi,

These are custom css rules added for the specific demos. As you can imagine you can only get that result wither by installing the demo or altering the theme css. Each demo has it;s own custom css to provide the unique style.
You can use the browser inspector to compare the code from the beauty blog and the code from your element to figure out which rules have been changed.
Here is an example of how the separator is changed: http://screencast.com/t/ZTIzKOUDnbE
Every css rule that is added custom for a demo is present in the demo_style.css file

Thank you!

Hello Nichips,

Please notice that you can create your own code using the Inspector Browser, target the specific classes for your element and then you can reduce the paddings or margins you want. Notice that we have a useful guide in this regard, like this -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
If you fail, please send us an email at contact@tagdiv.com with your log-in information (wp-admin) so we can inspect it closer your website and also, so I will be able to provide a more accurate response.

Thanks for the message!