CSS not working

  • My new CSS changes seem to not work.

    (See screen grab for areas 1, 2 & 3. I’m using Firefox.)
    I want to change the color of text 1, so I select it, right click, and select Inspect Element.
    I then change the color in area 2, which works.
    If I then copy the CSS I’ve changed in area 1 to area 2 (and remove attributes I don’t want, eg size) it doesn’t work.
    If I add !important, it still doesn’t work.
    I’ve tried saving the CSS changes (using Publish at the top od the Custom CSS panel) and then opening the page in a private window in Chrome (so, as I understand it, cache shouldn’t be an issue) and still the changes don’t take effect.

    Page: https://www.sa-fc.org.uk/shop/
    Change the background color of the main text area:

    .page-wrap .content-wrapper {
    background-color: rgba(0,0,255,0.4) !important;
}

    On the following page, out of desperation, I’ve tried a three different changes, just in case they make any difference, and none of them do.
    Page https://www.sa-fc.org.uk/product/test-product/
    Inherited from span

    .woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #0F0 !important;
}

    Inherited from p

    .woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #0F0 !important;
}

    Inherited from div

    .single .page-wrap .content-wrapper {
    color: #0F0 !important;
}

    I’ve had a similar problem elsewhere on the site, where a change I made worked initially, but then stopped working.
    Any suggestions on what the problem might be?

Viewing 5 replies - 1 through 5 (of 5 total)

  • I’m sorry: I don’t understand several things. However your first sentence is clear: “I want to change the color of text 1”. At the moment for me text 1 is black, so invisible.

    It’s possible to change several colors by:
    .summary.entry-summary{
    background-color:blue;
    }
    .product_title.entry-title {
    color:yellow;
    }
    p.price span.woocommerce-Price-amount.amount {
    color:red;
    }
    .woocommerce div.product p.price {
    color:pink;
    }

    You could change the colors in these examples. Is this what you want?

    Thread Starter eyeghoti

    (@eyeghoti)

    I can post any of those codes into the Additional CSS pane and none of them make any difference. The text stays black.
    It’s like something is preventing whatever is going in the Additional CSS pane.

    There is other CSS, and some of it works, whilst some of it did initially but then stopped working.

    Remarkable.
    To check if your Additional CSS has a problem, you could add (some of) the codes at the end of your style.css
    Appearance > Theme Editor.

    Or think about installing a Child Theme, and make changes to this Theme (to avoid messing up the Parent Theme)

    Thread Starter eyeghoti

    (@eyeghoti)

    Just to clarify …
    Appearance > Theme editor and then under Theme Files on the right, select Stylesheet (style.css).
    In the main pane there are then 4135 lines of css code.
    Are you suggesting at line 4136 I should post something like …

    .woocommerce div.product p.price {
color:pink;
}

    … and then click on Update File?

    Thread Starter eyeghoti

    (@eyeghoti)

    Problem solved!
    I tried posting one of you bits of code at the top of the Additional CSS pane and it worked.
    So working down the previous CSS, I found a missing curly bracket. ARGHHHHHHHH!!!!! Replaced it, and everything worked.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS not working’ is closed to new replies.