Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 21, 2015 at 1:13 am #431689
    tremblayly

    Hi
    My client has asked if I can color code 12 specific products. My initial thought would be to do it in the following container (orange is the theme color):

    #top .title_container .container {background-color: #CC6600!important;}

    I tried assigning the CSS element using the page id/post id and it does not work for the products.

    Can this be done and if it can, how can I get this to work?

    Here’s a link to one of the products (therapeutic herbal teas category)
    http://www.herbalhealinginc.ca/product/healthy-foundations-tea

    Here’s a sample color: #b2a359

    Any help would be greatly appreciated.

    April 21, 2015 at 8:36 pm #432355
    Elliott

    Hey tremblayly!

    I’m not sure what element your trying to change but you can target individual products by their ID.

    .postid-3403 .someClass {  }

    You could also drag a codeblock element to the product content and add some CSS in that way.

    <style type = "text/css">

</style>

    Regards,
    Elliott

    April 21, 2015 at 8:57 pm #432376
    tremblayly

    HI Elliott
    The element I’m trying to change color is the page – because this is a product it’s rather post. So I tried the following but nothing changes.
    .postid-3403 .title_container .container {
    background-color: #2ba359!important;
    }

    I’m not using the Advanced Layout Builder, so the second suggestion is not an option. Although I tried to generate shortcode elements but this funtion does not work on the product.

    Lyse

    April 22, 2015 at 11:08 am #432694
    Günter

    Hey!

    Thank you for coming back.

    Try the following:

    
.postid-3403 .template-shop .container {
    background-color:#2ba359 !important;
}

    Cheers!
    Günter

    April 22, 2015 at 2:16 pm #432790
    tremblayly

    Hi Gunter
    This is the wrong container where I want the color. I want the color in the page/post title container where the breadcrumbs are.
    Thanks
    Lyse

    April 23, 2015 at 8:29 am #433289
    Rikard

    Hey!

    Please try this instead:

    .postid-3403 .title_container .container {
  background-color: red!important;
}

    Regards,
    Rikard

    April 23, 2015 at 1:13 pm #433437
    tremblayly

    Hi Rikard,
    That was originally what I tried and it did not work. However, because I had defined the same element for my theme with the basic orange color, once I removed the “!important” with that basic element, I was able to make each post-id# work using “!important”.
    Thanks for all of your help guys!
    Lyse

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Product page title container’ is closed to new replies.