Support » Themes and Templates » A different CSS for front page

  • Hi,
    I want to use a different css for the front page of my site.

    If not possible is there a way I can add a css file only for the front page which will over ride the old css file.

    Cheers,
    Vishal

Viewing 6 replies - 1 through 6 (of 6 total)
  • if your theme uses body_class() http://codex.wordpress.org/Function_Reference/body_class in the body tag, you will have a specific css class for the front page (.home), which you could use in the stylesheet;

    example (might be different for your theme):
    .home #content .entry { color: #123edf; }

    to overwerite the genral stylesheet style.css, you could use a conditional statement in header.php to link a specific stylesheet for the front page:

    example:

    <?php if( is_home() ) { ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
    <?php } ?>

    the code needs to be after the link to the general stylesheet.

    (instead of is_home() you might need to use is_front_page() )
    http://codex.wordpress.org/Conditional_Tags
    http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri


    alternative, to load a different stylesheet instead of the general stylesheet, use the conditional statement with an ‘else’:
    (this code would replace the link of the general stylesheet)
    example:

    <?php if( is_home() ) { ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
    <?php } else { ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <?php } ?>

    Thanks, It will take me some time to read through all this but I think I am set here.

    vishal

    alchymyth,

    Thanks for the detailed post. I used the pure css .home solution you provided to get rid of the padding on my homepage, but keep it on the others by adding this:

    .hentry {padding: 0 25px; }
    .home .hentry {padding: 0; }

    I’ve tried your change, however, when the home page displays with the secondary style.css it does not conform to all the secondary css settings: i.e., the height of the header, padding, etc., all follow the settings of the primary style.css

    Any suggestions??

    Moderator Andrew Nevins

    (@anevins)

    Volunteer support

    As you’re not contributing to the original poster, you should create your own thread on the issue.

    It’s obvious. Just find the css using the main page with internal Chrome Web Inspetor or Firebug plugin and edit it…

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘A different CSS for front page’ is closed to new replies.