Two header with different style

This topic has 35 replies, 2 voices, and was last updated 3 years, 3 months ago by Elise Noromit.

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

1 2 →

Author

Posts
August 23, 2021 at 8:38 am #314025

Simone2701
Participant

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

August 24, 2021 at 12:33 pm #314322

Simone2701
Participant

Hello, can you please support?

August 24, 2021 at 10:09 pm #314406

Elise Noromit
Member

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

August 25, 2021 at 7:35 am #314488

Simone2701
Participant

Hello,

no worries, I attach here the link.

August 25, 2021 at 12:44 pm #314579
Elise Noromit
Member
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
August 25, 2021 at 2:28 pm #314602

Simone2701
Participant

Thanks, how can I change the search icon background?

August 25, 2021 at 2:37 pm #314604

Simone2701
Participant

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

August 25, 2021 at 11:37 pm #314666
Elise Noromit
Member
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
August 27, 2021 at 10:51 am #314903

Simone2701
Participant

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.

August 28, 2021 at 12:35 am #315000

Elise Noromit
Member

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

August 28, 2021 at 7:22 am #315040

Simone2701
Participant

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

August 29, 2021 at 12:55 pm #315180
Elise Noromit
Member
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
September 2, 2021 at 1:56 pm #316098

Simone2701
Participant

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

September 3, 2021 at 12:07 am #316153

Elise Noromit
Member

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

September 3, 2021 at 7:24 am #316207

Simone2701
Participant

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

September 3, 2021 at 9:49 am #316245

Elise Noromit
Member

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

September 3, 2021 at 10:26 am #316256

Simone2701
Participant

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

September 4, 2021 at 8:00 pm #316472
Elise Noromit
Member
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
September 5, 2021 at 6:40 pm #316592

Simone2701
Participant

Hello,

I need to show this style on all blog posts.

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

Thanks

September 6, 2021 at 10:03 am #316708

Elise Noromit
Member

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

September 8, 2021 at 4:13 pm #317296

Simone2701
Participant

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

September 8, 2021 at 6:05 pm #317318

Elise Noromit
Member

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

September 8, 2021 at 6:12 pm #317319

Simone2701
Participant

Hello, I leave you private.

Thanks

September 9, 2021 at 8:15 am #317427

Simone2701
Participant

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

September 9, 2021 at 11:16 am #317468

Elise Noromit
Member

Hello,

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

Best Regards

September 9, 2021 at 12:42 pm #317488

Simone2701
Participant

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

September 9, 2021 at 11:26 pm #317578

Elise Noromit
Member

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

September 10, 2021 at 7:35 am #317627

Simone2701
Participant

Hello,

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

Can you show me how to do?

September 10, 2021 at 10:26 am #317670

Simone2701
Participant

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?

September 10, 2021 at 4:55 pm #317771

Elise Noromit
Member

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