CSS for certain pages in my template

  • thebigkick

    (@thebigkick)


    14 years, 2 months ago

    I’m looking to apply styles only to a few pages on my site. If I wanted to target this page:

    /blog/?page_id=4

    Do I create a stylesheet and name it 4.css and put it in the CSS folder?

    Thanks

Viewing 1 replies (of 1 total)
  • Michael

    (@alchymyth)

    14 years, 2 months ago

    if your theme uses body_class() then you could add a section to style.css of your theme, with styles all beginning with .page-id-4 to target page specific styles;

    if not, and you want to load the specific styles after the general style.css, you could create a style-4.css (the name does not really matter, but has to be referenced in the conditional code) and add a conditional section to header.php, after the linking of the other stylesheet;

    example:

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

    if the style-4.css is saved in the /css sub-folder in your theme, then the link should be:

    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/style-4.css" type="text/css" media="screen" />

    if you want/need to load the specifi stylesheet instead of style.css, then change the existing stylesheet link ( usually some line like: <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> or similar in header.php of your theme) into some code like this:

    <?php if( is_page(4) ) { ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style-4.css" type="text/css" media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>
Viewing 1 replies (of 1 total)

The topic ‘CSS for certain pages in my template’ is closed to new replies.