Search Results for 'browser inspector'

Hello,

1) For the text widget size there is an option in the theme panel: http://screencast.com/t/BtQTEbcz0I
For colors you have to use CSS:
.td-main-sidebar .widget_text{
color:red
}

2) It can only be targeted with CSS
#commentform input[type=text],
#commentform input[type=url],
#commentform input[type=tel],
#commentform input[type=email],
#commentform textarea{
font-size:20px
}

3) You have to identify the module used by the block. For example a module 6 title can be changed from here: http://screencast.com/t/eQ5thbs9e. You can inspect the block with your browser inspector and you can see the class used by it or you can use the Excerpts setting to see what modules are used for each block.
As for the color, you have to use css again. there is no option for it in the theme panel
.td_module_6 .td-module-title a{
color:red;
}
(the module in your image might not be a module 6 so you have to change the settings to the module used by your block. i just set module 6 as an example)

4) Unfortunately there is no option in the theme panel for it. You have to use CSS:
.td_module_related_posts .td-module-title a{
font-size:20px;
color:red;
}

5)The module on your homepage is an mx 2 and can be adjusted in the theme panel: http://screencast.com/t/f38U5Q3Cl6m

6)The default page template has no sidebar. You have to use on of the 2 other page templates for it to display: http://screencast.com/t/z244vqFWMo

Thank you!

Hello Ben,

CSS is a very specific code, so this will remove only the padding on this exact page. It is based on the page ID. If you want to apply this code to another page you will have to modify the page id number to match your page’s.
You can see the page id on the body tag with your browser inspector: http://screencast.com/t/Rghq4y8tN2
You have to be this specific otherwise it will apply to all pages of your site and create other problems.
Use this code in the theme panel -> custom CSS box

.page-id-1178 .td-main-page-wrap{
padding-top:0!important;
}
.page-id-1178 .td-main-content-wrap{
padding-bottom:0!important;
}

result: http://screencast.com/t/QCCjP1T4h

Thanks.

Hello,
There is no option in the theme panel for that. The letter spacing maybe comes from the font you use for these titles. You can reset the letter spacing with CSS for each title or for all titles at once. It seamns all your h4 titles have this option.

Try this custom CSS for all the titles:

.td_block_wrap h4 {
letter-spacing:0px!important;
}


Or if you want to target a specific block, you have to get the class of the block with your browser inspector:
http://screencast.com/t/6rr8yJTYDSCd

Thank you!

Hi,

You can use the browser inspector to find these: http://screencast.com/t/nwHehLuw3
The menu id’s are named: menu-item-x where x is the specific number for each menu item. These are the ones you have to target.

Thank you!

Hello Ronnie,

We usually use the browser inspector and a free chrome extension called live CSS editor to create our css code and then just add it in the theme panel->custom css box http://screencast.com/t/bE6DzkfZM
You can also modify the ‘style.css’ file if you want: http://screencast.com/t/oN74OaoKfu.

Thank you!

Hello Ruud,

Actually, that is the box’s purpose. You can create your code and add it to the custom CSS box. We usually use the browser inspector and an extension: ‘Live CSS editor’ to modify the code. After that you just copy the code from the extension to the panel.
Hope this helps.

Thank you.

Hello Manoj,

You will have to target every block and change the padding on it and also be careful about responsiveness. That’s why i said it was a difficult job to do. You can inspect every block in your browser inspector and modify it: http://screencast.com/t/Ng47nDC79 – http://screencast.com/t/Ffl6TvXdRvJ. Mind the containers the blocks are placed in. They will also need to be adjusted to your changes. You will practically change the whole site’s CSS because all elements are in relation to one another.
Unfortunately there is no easy way to do this task because the site was not meant to be customized like that.

Thank you.

Hell,

I’m sorry i did not understand your request at first.
I got back on your request and i hope this will bring an insight as to how you can customize the theme menu to look like your previous theme’s. Your previous theme uses li.tax-item, our theme uses li.menu-item.
These are the classes used by the theme. I have changed them in my own menu as your site does not have our theme active.

li.menu-item-1218 {
background-color: #81d742
}
li.menu-item-1219 {
background-color: #0075d7
}
li.menu-item-1220 {
background-color: #C3F
li.menu-item-1221 {
background-color: #FE1543
}
li.menu-item-1222 {
background-color: #f1c40f
}
li.menu-item-1223 {
background-color: #ff830f
}


result: http://screencast.com/t/dsa0kqriQgr
Your menu item numbers will be different when you customize your menu but you can identify them
by inspecting your menu with the browser inspector and then you can target that specific menu: http://screencast.com/t/14rboIK5UX

You can place your code in the theme panel: http://screencast.com/t/M7pDw2or

I hope this helps.
Thank you.

Hello kestasve,

1.) it’s not as easy as it seems to be. You can do it with CSS by targeting the sub-menu classes but other containers need to be adjusted for the menu to fit properly and not overlap other elements. You can use your browser inspector to get an idea of what you need to change in the code. If you can’t manage, you can always hire a freelancer to do it for you. (we cannot offer custom work. sorry!)

2).When you set your main menu color from the theme panel, you can select transparency from this slider here:
http://screencast.com/t/IE11d1yzrRj3

Thank you

Hi,
Every browser has an inspector. Right click on your website and select: Inspect element. There you will see a ‘console’ button. Here is an example for firefox: https://developer.mozilla.org/en/docs/Tools/Web_Console
This console shows you any errors you might have on your site.
Thanks

Hello,

Sometimes plugins can create all kinds of problems. Please try to disable all of your plugins except visual composer(it is required by the theme) and try to create a new post or page.
You can also check the site console for errors using your browser inspector.
Let us know if the problem is still there

Thank You!

Gadget Friendly

The search icon can be removed completely by commenting this line here:
http://screencast.com/t/E31WRg3VeXMr
As for the menu, i see you figured it out already :). It’s CSS related. Just inspect the elements with your browser’s inspector.

Thanks.

Hello manoj.yadav,
I made a custom CSS for your top menu for a start

.td-header-top-menu-full .sub-menu {
max-height:200px;
overflow: auto;
}

But for the main menu you need to target the specific sub-menu, because CSS needs precise targeting on the specific sub-menu you create, otherwise the whole thing collapses.
You can use the browser inspector tool to target that specific sub-menu classes used in the sub-menus you create and then add the max-height and overflow proprieties.
Thank you.

Hi,

Every block has a bottom space so you can try to inspect this using the browser inspector tool to target those and remove the margin or padding bottom – http://screencast.com/t/YjorLPjnWm – http://screencast.com/t/7UUGAF3tz2u
I suggest to hire a freelancer to do this for you if you don’t have basic css/html experience as the time doesn’t allow us to provide custom work at this time, sorry!

Thanks!

Hi,

You have to use 100% width why you use 99% ?
Also if you want to set the same height for the first thumb, you have to use the browser inspector tool to target it – http://screencast.com/t/lMBDOdeWa

.td_block_big_grid_1 .td-big-thumb .td-module-thumb {
height: 170px;
}

Thanks!

Hi,

The simplest way is to modify the post limit on megamenu and display more than 5 articles on 2 rows – http://screencast.com/t/UKNMJSx1JX – http://screencast.com/t/TrFPzTb2Lv
You will need custom work to display the articles 2×3 or 6 side by side. For example if you change the limit value to 6 it will be applied on all megamenu categories(those without subcategories). If this is not a problem for you, you can add a fixed width to the megamenu, using menu item unique class(so you it will not affect the other megamenu categories). You need to use browser inspector tool to take the item class – http://screencast.com/t/kis7We6Wxg1 and use this custom css(use media queries for specific screen size) – http://screencast.com/t/37TjlBsbw

@media (min-width: 1019px ) {
.menu-item-2091 .td-mega-row {
width: 654px;
}
}

This is not an easy task, so if you don’t have basic html/css experience I suggest to hire someone to do this for you as we cannot provide custom work, sorry! I provided above an example how this can be done, but you will need additional customization.

Thanks!

Hi,

The theme doesn’t have an option to change the gradient color and you will have to use custom css to change the color for each big grid spot. Please use browser inspector tool – http://screencast.com/t/qtwIwDjws9 You have to target something like this if you want to change this only for grid 8 – http://screencast.com/t/HKB4gtLBpq

.td_block_big_grid_8.td-grid-style-3 .td-big-grid-post-0 .td-module-thumb a:last-child:before {
background: -moz-linear-gradient(45deg, #222 0%, #4a8f5e 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, #222), color-stop(100%, #4a8f5e));
background: -webkit-linear-gradient(45deg, #222 0%, #4a8f5e 100%);
background: -o-linear-gradient(45deg, #222 0%, #4a8f5e 100%);
background: -ms-linear-gradient(45deg, #222 0%, #4a8f5e 100%);
background: linear-gradient(45deg, #222 0%, #4a8f5e 100%);
}

This custom css is for first spot(just change to the color that you need), for the other grid spots please change td-big-grid-post-0 to td-big-grid-post-1 and so on… http://screencast.com/t/Y4tCTEbYO

Hope this helps!

Hi,

There is not a specific css to reduce, you will have to use the browser inspector tool for each container from the megamenu and reduce margins, padding.., also please note that it may affect also the megamenu without subcategories so before add the custom css in the panel please also this. If you want to customize the megamenu and you don’t have basic html/css experience I suggest to get someone to help you as we cannot provide custom work at this time, sorry!

Thanks!

Hi,

Unfortunately if we cannot inspect this, we don’t know exactly what the ad change. You can try to use browser inspector to find out if the width is changed in one of the theme containers. You can also try to use this custom css in Theme Panel > Custom Css and see if it works:

@media (min-width: 1141px) {
.td-boxed-layout #td-outer-wrap {
width: 1164px !important;
}
}

Thanks!

Hi,

1. Using Ad Box(block or/and widget) and set sidebar ad, it will display the same ad. If you want to display a different ad you can paste the code in a custom spot from Theme Panel > Ads and set it in Ad Box block.
2. Unfortunately the theme doesn’t have an option to remove ads on specific page/post. This can be done using custom css or alter the code, but the issue on your site is the classes from body are missing and I need it to use a specific class for your single product page(or all products page).
I think that it is a conflict and a plugin remove those classes from the body, please check – http://screencast.com/t/TvG4K9JVSy it should look something like this – http://screencast.com/t/nSWbEOYJP8 Please deactivate all plugins except of Visual Composer, clear cache and use browser inspector tool(F12 on Chrome) on any of your articles not only product page have this issue and see if they appear, then activate your plugins one by one and see which one cause this issue.
3. Please check also our demo and see if you see the same problem – http://demo.tagdiv.com/newspaper/td-post-2015-awards-all-of-the-best-and-worst-moments-from-the-show/

Thanks!

Hi,

That’s a complicated section, try this css for a start: – http://screencast.com/t/MSOhwTCNKmL

.td-header-menu-wrap-full{
height: 100px !important;
}
.td-affix{
height: 100px !important;
}
.td-header-style-5 .black-menu {
position: relative;
top: 19px;
}

If you want to modify the height on the menu elements, logo and search use the browser inspector to find what’s the custom css used for each element and create a custom css to make them look the way you want. If you don’t have experience with this i suggest that you look for a professional developer to help you with this task.

Thank you!

Hi,

Try the following css: – http://screencast.com/t/UmZmpEDr

.category-87 .td-image-gradient-style8 {
background: white url('http://www.projecthappyhearts.com/wp-content/uploads/2015/04/green-nature-dual-monitor-other.jpg') no-repeat;
background-size: 1164px 400px;
}

category-87 is the unique category class, use the browser inspector to check the unique class for each category.

Thank you!

• This reply was modified 11 years by Emil G.

Hi,

1. I’ve checked the css on my side and it works fine – http://screencast.com/t/VVbjmbNSFVV
Try to add !important at the end and see if it works on your side:

.td-post-text-content p{
text-align: justify !important;
}

2. The smart lists have a fixed image width which is set from css, this css overrides the settings made in the backend. Use custom css to modify the default one – http://screencast.com/t/OAWoAyQMDqy2

.td_smart_list_3 .td-slide-smart-list-figure {
width: auto;
}

3. Do you refer to the smart lists navigation arrows? use custom css to change their color: – http://screencast.com/t/gFkzVrYg

.td-icon-right, .td-icon-left {
color: red;
}

If you refer to something else use the browser inspector to find the classes used on those items and create a similar css to change their color.

Thank you!

• This reply was modified 11 years by Emil G.