Setting a page specific content area background

  • Resolved hml

    (@thirtythreecircular)


    5 years, 10 months ago

    Hi everyone,

    I’m new to wordpress and am trying to get my head round the very basics of coding.

    I’m currently trying to set my site up so that an opaque background (#ddd9cdcc) appears on the product page(s) (see link) only. The code I have used applies this change to every page on the site.

    Just so you know what kind of incompetence you’re dealing with, this is how the code currently looks (apologies for my lack of adherence to coding conventions!):

    body.product-template-default.single.single-product.postid-15 content-area  {
background-color: #ddd9cdcc;
}

.content-area {
	background-color: #ddd9cdcc;}

.content-area {padding-left: 1.4em; padding-right: 1.4em; padding-bottom: .5em; padding-top: .5em}

    I have no idea how this code has achieved what it has, as very slight changes seem to have unexpected consequences! So if anyone could help me with the correct code for the task, that would be great.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • corrinarusso

    (@corrinarusso)

    5 years, 10 months ago

    Are you sure there is not more custom CSS going on here ? Or page templating or something ? I know WooC is a beast, but it looks like a mess even for them. Perhaps you have a bunch of testing css, etc leftover ?

    This is not a valid hex code for your colour :
    ddd9cdcc

    See here – if you change the color to what you want, it will have zero opacity :

    View post on imgur.com

    I would dump out what you have first of all.
    And try this :
    https://wordpress.org/plugins/wp-custom-body-class/

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 10 months ago

    Every page has body classes applied in the <body> tag. In the page in question, it’s 

    <body class="product-template-default single single-product postid-15 custom-background wp-custom-logo wp-embed-responsive theme-storefront woocommerce woocommerce-page woocommerce-no-js storefront-full-width-content storefront-secondary-navigation storefront-align-wide right-sidebar woocommerce-active">

    So for all product pages, you could use .single-product .content-area as the selector.

    Thread Starter hml

    (@thirtythreecircular)

    5 years, 10 months ago

    That’s great – thank you both. I’ve deleted some of my code (including replacing all references to the hex code) and used the selector provided by Steven. This seems to have achieved what I was after.

    Many thanks both for your quick and very helpful responses.

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

The topic ‘Setting a page specific content area background’ is closed to new replies.