Home Forums WoodMart – Premium Template Two header with different style

Tagged: 

This topic contains 35 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 6 days, 1 hour ago.

Viewing 30 posts - 1 through 30 (of 36 total)
  • Author
    Posts
  • #314025

    Simone2701
    Customer

    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

    Private Content Hidden
    #314322

    Simone2701
    Customer

    Hello, can you please support?

    #314406

    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

    #314488

    Simone2701
    Customer

    Hello,

    no worries, I attach here the link.

    Private Content Hidden
    #314579

    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

    #314602

    Simone2701
    Customer

    Thanks, how can I change the search icon background?

    #314604

    Simone2701
    Customer

    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

    #314666

    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

    #314903

    Simone2701
    Customer

    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.
    #315000

    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

    #315040

    Simone2701
    Customer

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

    Private Content Hidden
    #315180

    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

    #316098

    Simone2701
    Customer

    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

    #316153

    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

    #316207

    Simone2701
    Customer

    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

    #316245

    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

    #316256

    Simone2701
    Customer

    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

    Private Content Hidden
    #316472

    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

    #316592

    Simone2701
    Customer

    Hello,

    I need to show this style on all blog posts.

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

    Thanks

    #316708

    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

    #317296

    Simone2701
    Customer

    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

    #317318

    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

    #317319

    Simone2701
    Customer

    Hello, I leave you private.

    Thanks

    Private Content Hidden
    #317427

    Simone2701
    Customer

    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

    #317468

    Hello,

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

    Best Regards

    #317488

    Simone2701
    Customer

    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

    #317578

    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

    #317627

    Simone2701
    Customer

    Hello,

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

    Can you show me how to do?

    #317670

    Simone2701
    Customer

    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?

    #317771

    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

Viewing 30 posts - 1 through 30 (of 36 total)

You must be logged in to reply to this topic.