WordPress.org

Forums

Changing the Color in the Content of each Page.... (3 posts)

  1. ch3ss
    Member
    Posted 1 year ago #

    site is
    http://www.lighthouserestaurantanddockbar.com/wordpress/

    I am trying to change to a light sandy color on some pages

    When you click Menu the background content is white... i dont want it that color.... I want different colors for each so Menu, Happy Hour etc....

    any help is appreciated

  2. salsaturation
    Member
    Posted 1 year ago #

    If you don't already have a Child_Themes or a custom.css you should install a plugin like custom CSS plugin then add the following to the custom css area. For example the menu page would be

    body.page-id-81 .wrapper {
    background-color: #fff;
    }

    If you switch to pretty permalinks it would be

    body.menu .wrapper {
    background-color: #fff;
    }
  3. CrouchingBruin
    Member
    Posted 1 year ago #

    @ch3ss, each page or post is given a unique, numeric ID called a post ID. It's also called a page ID, because pages are also considered posts. For your site, since you don't have pretty permalinks enabled, you can see what the post ID is by looking at the address of each page. For example, the address of your Menu page is this:
    http://www.lighthouserestaurantanddockbar.com/?page_id=81
    So the post ID (i.e., page ID) of the Menu page is 81. If you go to your Happy Hour page, you'll see that the post ID is 126.

    A properly created WordPress theme will assign a class name to the body element that is based on that post ID. For pages, the class name will be in the form page-id-#</strong, while for posts, the class name will be postid-#, where # would be the numeric post ID.

    So to create CSS that targets just a specific page, you would use that class name at the beginning of your CSS selectors. That is what @salsaturation was alluding to in the first rule that he posted.

    The current rule that sets the color of the main area (which has a class of wrapper looks like this:

    .wrapper {
       background-color: #EED6AF;
    }

    To set the background color of the Menu page, then, you would add an overriding rule (using a CSS plugin, as @salsaturation mentioned; I like Custom CSS Manager also) that looks like this:

    .page-id-81 .wrapper {
       background-color: #EED6AF;
    }

    Technically, you don't need to include the body element in the selector, you want to use as little "weight" as necessary. The #EED6AF is the current color value in RGB (Red, Green, Blue) hex notation. There's a good color picker here that will give you the hex code for whatever color you want.

    Then to set the background of just the Happy Hour page, you add another rule that looks like this:

    .page-id-126 .wrapper {
       background-color: #CCFFFF;
    }

    That value is a light cyan color.

    So this information should allow you to set the background color of any of your pages by adding another CSS rule using the page's post/page ID.

Topic Closed

This topic has been closed to new replies.

About this Topic