Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 20, 2015 at 4:44 pm #399735
    DigitalEssence

    Hi,

    I’m trying to target the nth-child background colour of .products li in a Woocommerce category loop.

    If I use the following code:

    #product-catalogue .products li:nth-child(odd){border: 2px solid blue; background-color: #000!important;}

    The odd li elements have a blue background but the background-color doesn’t make any difference.

    If I just put:

    li:nth-child(odd){border: 2px solid blue; background-color: #000!important;}

    Then the menu li are coloured as expected but still the product list isn’t.

    I’ve tried removing all of the css and all the tricks I normally use but still no luck and I’m beginning to question both my sanity and whether I’m in the wrong job.

    The url is:

    http://ridelines.digitalessence.net/courses/

    And the login details are provided below. Thanks as always for your help

    February 22, 2015 at 4:29 pm #400220
    Andy

    Hey DigitalEssence!

    which part of your page do you want to change color? please show us on screenshots what you mean (imgur.com).
    However I hope I am right when you want to change background color of this one:

    div .products .product a, div .products .product a img {
background: #000 !important;
}

    Regards,
    Andy

    February 22, 2015 at 7:14 pm #400249
    DigitalEssence

    Hi Andy,

    It’s the ul li elements as per this screenshot: http://screencast.com/t/eUB6ZI52

    I can target the font-size, border and it seems any other selector but not the background.

    This code:

    #product-catalogue .products li:nth-child(odd){border: 2px solid blue; background-color: #000!important;}

    puts a blue border round the odd elements but doesn’t change the background.

    Thanks.

    February 23, 2015 at 8:42 pm #400981
    Andy

    Hey!

    the code I gave you here https://kriesi.at/support/topic/cant-target-the-background-colour-of-woocommerce-products-li/#post-400220 will change the background color.

    Regards,
    Andy

    March 3, 2015 at 4:59 pm #405242
    DigitalEssence

    Hi Andy,

    thanks for your css but it’s not what I’m after.

    I’ve uploaded a screenshot of what we are looking for:

    http://screencast.com/t/VOAmnKZ8eD

    Thanks.

    March 4, 2015 at 7:33 pm #406005
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .page-id-72 li.post-52 {
background-color: #e2e2e2!important;
}

    Best regards,
    Yigit

    March 6, 2015 at 11:54 am #406929
    DigitalEssence

    Hi Yigit,

    this hasn’t made any difference.

    My problem is:

    If I use the following code:

    #product-catalogue .products li:nth-child(odd){border: 2px solid blue!important; background-color: #000!important;}

    The odd li elements have a blue border but the background-color doesn’t make any difference.

    So I can target the nth odd child’s font, colour and border but not the background.

    March 7, 2015 at 1:13 pm #407458
    Ismael

    Hi!

    You can try this:

    #top #main .products .product:nth-child(odd) .inner_product {
background-color: red !important;
}

    Cheers!
    Ismael

    March 12, 2015 at 12:45 pm #410409
    DigitalEssence

    Boom!

    you guys are stars.

    Thank you.

    I now need to compare my code which didn’t work with yours and see why I’m so rubbish at this game.

    March 13, 2015 at 5:22 am #410839
    Rikard

    Hey!

    Hehe great, glad you got it sorted :)

    Regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Can't target the background colour of Woocommerce .products li’ is closed to new replies.