Adding Styles to separate pages

  • Resolved jeremyjmccourt

    (@jeremyjmccourt)


    9 years, 10 months ago

    I know this question has been asked before but I’ve tried a lot of the different ways and nothing has worked.

    I need to add some styling to only certain pages (like the home page and the register page). One of these changes include changing the background image for just those 2 pages. I have tried using the code from this forum: https://www.ads-software.com/support/topic/different-style-css-on-different-pages?replies=5 and it doesn’t work. With mine I have:

    <body <?php body_class(); ?> <?php omega_attr( ‘body’ ); ? <?php if ( is_page(array(‘register-page’, ‘home’))) {
    echo ‘ class=”myclass” ‘; } ?>>

    Can someone please tell me where I am going wrong?

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

  • You need to look at the generated HTML for the page – in the browser using a browser tool like Firebug or Chrome developer tools – it will look like this – for example the home page of the site in your profile:

    <body class="home page page-id-5619 page-template page-template-template-full-width page-template-template-full-width-php layout-1c  fluid-width-page wpb-js-composer js-comp-ver-4.3.2 vc_responsive">

    The unique class for that page is:

    .page-id-5619 {
   styles here;
}

    You may need to add other CSS selectors to the above depending on what, exactly, you are styling.

    Thread Starter jeremyjmccourt

    (@jeremyjmccourt)

    My body tag doesn’t have anything with a page id inside the class names.
    It has: wordpress ltr child-theme y2015 m04 d22 h15 wednesday logged-in admin-bar custom-background custom-header home singular singular-page singular-page-2 page-template-default custom-colors customize-support

    I tried:

    .singular-page-2 body{ style here }

    and still nothing.

    Am I missing something in the php if statement or am I going about it the wrong way?

    What is the page in question?

    Thread Starter jeremyjmccourt

    (@jeremyjmccourt)

    https://members.nevillepeter.com/

    https://members.nevillepeter.com/register-page/

    These are the two pages for which we need different styling for.

    Okay, for the first one, using View Source in a browser shows this:

    <body class="wordpress ltr child-theme y2015 m04 d22 h00 wednesday logged-out custom-background home singular singular-page singular-page-2 page-template-default custom-colors" dir="ltr" itemscope="itemscope" itemtype="https://schema.org/WebPage">

    So the unique class for that page would be home or singular-page-2 so you can use either one in the CSS to target just that page.

    Thread Starter jeremyjmccourt

    (@jeremyjmccourt)

    Thank you so much!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding Styles to separate pages’ is closed to new replies.

Tags