Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End Sharing Stylesheets & Current Navigational Highlighting

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #42455
    mintertweed
    Participant

    On my WordPress website, I currently have nine pages (not including my home page). Every page uses a different stylesheet. To do this, I have created this code:

    here to get a better grasp of what I am talking about. Thank you in advance!

    Edit: I am basically trying to clean up my code as much as possible. It is long overdue.

    #123256
    chrisburton
    Participant

    What about using `&&`?

    $showreel = is_page(‘Showreel’);
    $games = is_page(‘Games’);
    $illustration = is_page(‘Illustration’);
    $literature = is_page(‘Literature’);
    $photography = is_page(‘Photography’);
    $sculpture = is_page(‘Sculpture’);
    ?>

    #123259
    TheDoc
    Member

    First of all, instead of having nine different stylesheets you should just have a single stylesheet and separate things with classes on the body.

    Make sure you have this:

    >

    This will put multiple classes on the body that you can use. You can also add page slugs by adding this to your functions.php file:

    // Add page slug to the body as a class
    function add_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
    $classes[] = $post->post_type . ‘-‘ . $post->post_name;
    }
    return $classes;
    }
    add_filter( ‘body_class’, ‘add_slug_body_class’ );

    #123298
    TheDoc
    Member

    Exactly. You should find the `` tag in your header.php file. Just make sure it has the `body_class();` function on it (it should already).

    The reason why I suggested added the other function to add the slugs to it is simply for classes that make a bit more sense.

    For example, *without* the added function you’ll be tying into classes with names like `.page-id-5`. On the other hand, *with* the added function you’ll get names like `.page-home`.

    Then in your CSS, anything that is specific to that page can be wrapped like this:

    .page-home .my-style {
    /* styles */
    }

    Or, if you’re using SASS/SCSS:

    .page-home {

    .my styles {
    /* styles */
    }

    .more-styles {
    /* styles */
    }

    }

    #123300
    chrisburton
    Participant

    @TheDoc has your solution but if you changed `&&` to `||` it might work. I have a similar situation on my site where `&&` doesn’t work but `||` does.

    #123305
    chrisburton
    Participant

    @mintertweed

    .page-showreel body {
    color: #FCDB04;
    }

    Simple mistake. Change it to `.page-showreel` or `body.page-showreel`.

    #123311
    TheDoc
    Member

    Chris nailed it.

    #123342
    chrisburton
    Participant

    Awesome. Thanks @BenWalker

    #127251
    TheDoc
    Member

    You can use body_class() to accomplish the same thing.

    #127258
    TheDoc
    Member

    Now you’d use `.home`.

    #127261
    TheDoc
    Member

    HTML:

    CSS:

    #hash-tag { }
    .period { }

    Hash tag == ID
    Period == class

    This is *really* basic stuff, though. Might be worth going back and doing some CSS-basics tutorials.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Back End’ is closed to new topics and replies.