Two header with different style

Hello,

I’ve created two header and need to have different style for them (one is for shop another is for blog). I need to change the icon colors, the search form color and the hoover effect in the header menu.

For the header in the shop they have to be green while for the blog one they have to be yellow.

How can we do that? We cannot choose those colors from the header creator.

Thanks

Hello, can you please support?

Hello,

I am terribly sorry for the delay.

Please provide me Shop page and Blog page URLs. I will provide the custom CSS.

Best Regards

Hello,

no worries, I attach here the link.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

Blog:

body.page-id-107 .whb-header .wd-tools-icon:before {
color:red;
}
body.page-id-107 .wd-tools-element .wd-tools-count {
    background-color: yellow;
    color: #FFF;
}
body.page-id-107 .wd-header-cart.wd-design-2 .wd-cart-number, 
body.page-id-107 .wd-header-cart.wd-design-5 .wd-cart-number {
    background-color: yellow;
    color: #FFF;
}
body.page-id-107  .wd-nav.wd-style-underline a:hover .nav-link-text {
    color: red;
}
body.page-id-107 .wd-nav.wd-style-underline a:hover .nav-link-text:after{
	background-color:red;
} 

Shop:

body.woocommerce-shop .whb-header .wd-tools-icon:before {
color:red;
}
body.woocommerce-shop .wd-tools-element .wd-tools-count {
    background-color: yellow;
    color: #FFF;
}
body.woocommerce-shop .wd-header-cart.wd-design-2 .wd-cart-number, 
body.woocommerce-shop.wd-header-cart.wd-design-5 .wd-cart-number {
    background-color: yellow;
    color: #FFF;
}
body.woocommerce-shop  .wd-nav.wd-style-underline a:hover .nav-link-text {
    color: red;
}
body.woocommerce-shop .wd-nav.wd-style-underline a:hover .nav-link-text:after{
	background-color:red;
} 

Please set the colors as per your needs.

Best Regards

Thanks, how can I change the search icon background?

Also I need the code for changing the active selection in the menu. Now it is green in blog page, I need to be yellow.

Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.page-id-107 .searchform.wd-style-with-bg .searchsubmit {
    color: yellow;
    background-color: red;
}
body.page-id-107 .wd-nav.wd-style-underline a:hover .nav-link-text {
    color: red;
}
body.page-id-107 .wd-nav.wd-style-underline .nav-link-text:after {
    background-color: red;
}

body.woocommerce-shop .searchform.wd-style-with-bg .searchsubmit {
    color: yellow;
    background-color: red;
}
body.woocommerce-shop .wd-nav.wd-style-underline a:hover .nav-link-text {
    color: red;
}
body.woocommerce-shop .wd-nav.wd-style-underline .nav-link-text:after {
    background-color: red;
}

Best Regards

Thanks you! It works very well!

Is there a way to change also the background color of the box with the blog categories?

See attachment for detail!

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

You can change all the colors in the Theme Settings > Styles and colors, if you want to change the blog only, give me the URL I cannot find this page.

Best Regards

Hello, I need to change only for blog. The blog is at the page in the provate content.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.page-id-107 .wd-post-cat.wd-style-with-bg {
    background-color: red;
    color: #FFF;
}

Best Regards

Hello!

Thanks it is working very well!

I’ve another question, how can I have the same header for the single post page?

Can you provide the code to customize also the post page header?

Thanks

Hello,

You can set the header in the Theme Settings > Blog > Single-post, there is an option to set one and the same header for all the posts.

If you have any questions please feel free to contact us.

Best Regards

Hello,

yes I know to change the heder for single post page. I need to customize the colors in order to make them different from the primary and alternative colors. Please read all the tickets above.

Thanks

Hello,

As soon as you enter the row settings, you will see the color tab where you can set the background color or image and change the text color scheme.

Find our documentation tutorial about this here: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

Best Regards

Hello,

I need to change the color of search icon, the color of counters in cart, whislist and compare, and the uderline in the menu.

I think you should provide the code to do that as you’ve done for the blog page.

I need to have the same colors of blog header in the single post page. See in private for details.

Thanks

Hello,

You can use all the code provided above changing only the page ID in the class. For example,

body.page-id-107 .wd-post-cat.wd-style-with-bg {
    background-color: red;
    color: #FFF;
}

Check the page ID where you want to change the styles and replace 107 for the proper page ID.

Best Regards

Hello,

I need to show this style on all blog posts.

How can you set this style as default for each post?

Thanks

Hello,

You need to take this part of the code: body.page-id-107 and replace for body.single-post all the rest styles are the same, just change the colors.

If you have any questions please feel free to contact us.

Best Regards

Hello!

Thank you, it works! Can you please also provide the part of code to have the same result in blog search and blog categories page??

Thanks

Hello,

You will need to use the same code and change body.page-id-107 to body.archive

Please provide the page URL of the search blog pages.

Best Regards

Hello, I leave you private.

Thanks

Hello,

I’ve tried to add the code for blog category but it has also changed the color of shop header.

Is there a way to change only the blog category header color? Also how can I set a different header for blog category?

Thanks

Hello,

I am afraid it is not possible as it does not have its unique class.

Best Regards

ok for search. But how can I change only the blog category header color? Also how can I set a different header for blog category?

Thanks

Hello,

You can set different headers for different categories by means of the Theme Presets. Find our documentation tutorial about this here: https://xtemos.com/docs/woodmart/theme-settings-presets/

Best Regards

Hello,

I’ve checked but I CANNOT ADD THE CUSTOM HEADER FOR BLOG CATEGORIES FROM THERE.

Can you show me how to do?

Hello,

I’ve find how to set the custom header for categories, but I need to change the colors as described above.

How can I do that? I don’t want to have the default colors for icons, top header colors, underline colors, search bar colors. How to do that?

Hello,

You will need to use the same code and change body.page-id-107 to body.term-accessories

accessories is the category slug, it would be different for different categories.

Best Regards

[Author]

Posts