Home New Guten › Forums › WoodMart support forum › Css for different header

Css for different header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 19, 2025 at 12:40 pm #661592

    jordi
    Participant

    Hi my website has two headers, and I want a gradient in one of them, how can I edit this?
    I tried wih this code but nothing changes:

    .wd-page-wrapper .whb-header_834472 {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;}

    May 19, 2025 at 2:57 pm #661639

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Can you please share the page URL where you want to change the background color to a gradient, so I can check and give you a possible custom css code.

    Best Regards,

    May 19, 2025 at 3:35 pm #661658

    jordi
    Participant

    Yes, is a test domain:

    https://miquelp27.sg-host.com/professionals-medics/dr-jose-luis-molinero-polo/

    I want the blue bar with gradient like footer.

    May 20, 2025 at 7:56 am #661755

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

    .postid-29341 .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

    Best Regards,

    May 20, 2025 at 10:00 am #661780

    jordi
    Participant

    The problem is that I need this header in all single products and another pages…

    May 20, 2025 at 1:38 pm #661841

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    To customize the header background on specific pages using CSS, use the following examples:

    For the single product page:

    .single-product .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

    For the blog page:

    .blog .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

    If you want to target a specific page, use the unique page ID in the body class. For example, for a page with ID 123, use:

    .page-id-123 .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

    Best Regards,

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)