Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How do you specify an independent stylesheet to a page in wordpress?

    How do I assign a stylesheet to affect just one page in wordpress. The other pages will use the master stylesheet but the contact page will have its own "altered" stylesheet assigned to it. I have customized the contact page a bit like my wife wanted it but I don't know how to link it in wordpress. The stylesheet is named "tracy".



    Dan
    Last edited by dantra; 02-25-2011 at 05:14 PM.

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    In the script called "header.php", you add an "if" command after
    the reference to the normal CSS file ....

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
    <?php if(is_page_template('contact.php')) :?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/tracy.css" media="screen" />
    <?php endif;?>

    I'm not sure if you reference your page as "contact.php" or not.
    But that's the idea of it. If you define the same IDs and classes in
    both CSS files, the last one loaded over-rides the first one. So "tracy.css"
    will over-ride anything in the original CSS file (that the other pages use).

    Does that make sense?



    .

  • Users who have thanked mlseim for this post:

    dantra (02-25-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mlseim View Post
    In the script called "header.php", you add an "if" command after
    the reference to the normal CSS file ....

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
    <?php if(is_page_template('contact.php')) :?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/tracy.css" media="screen" />
    <?php endif;?>

    I'm not sure if you reference your page as "contact.php" or not.
    But that's the idea of it. If you define the same IDs and classes in
    both CSS files, the last one loaded over-rides the first one. So "tracy.css"
    will over-ride anything in the original CSS file (that the other pages use).

    Does that make sense?.
    So instead of using @import I would use your example like this:

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('http://www.dannysgallery.com/tracy/wp-content/themes/infocus/styles/deep_blue.css'); ?>" media="screen" />
    <?php if(is_page_template('?page_id=125')) :?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('http://www.dannysgallery.com/tracy/?page_id=125'); ?>/tracy.css" media="screen" />
    <?php endif;?>

    Is that correct?

    Thanks
    Dan

  • #4
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    That is correct ...

    The part I'm not sure about is this: is_page_template('?page_id=125')

    WP references pages in different ways, depending on the permalink settings, etc.
    You seem to re referencing by ID and category number. Others use the references
    by category name, some by date ... if your style sheet isn't loading properly,
    the part above (in blue) is where the problem most likely is.

  • Users who have thanked mlseim for this post:

    dantra (02-25-2011)

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I tried to add the modified stylesheet but I couldn't get it to work.This is what I put into the header:

    Code:
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('http://www.dannysgallery.com/tracy/wp-content/themes/infocus/styles.css'); ?>" media="screen" />
    <?php if(is_page_template('http://www.dannysgallery.com/tracy/?page_id=125')) :?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('http://www.dannysgallery.com/tracy/?page_id=125'); ?>/contactstyle.css" media="screen" />
    <?php endif;?>
    Eventually, I would like to assign three independent stylesheets to the pages. One for the Blog page, gallery page and contact page. I'm currently working on the contact page at the moment. What am I doing wrong?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    
    <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/lib/scripts/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    
    <?php require(WEBTREATS_INCLUDES . "/var.php"); ?>
    
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/styles/<?php echo $color_scheme; ?>" />
    
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?>	
    
    <meta name="disable_cufon" content="<?php echo $cufon_disable; ?>" />
    <meta name="slider_speed" content="<?php echo $slider_speed; ?>" />
    <meta name="slider_disable" content="<?php echo $slider_disable; ?>" />
    
    <?php
    $css_style_path = str_replace('.css', '', $color_scheme);
    if($css_style_path == 'black') {
    	$css_style_path = '/images';
    }else{
    	$css_style_path = '/styles/' .$css_style_path;
    }
    $template_dir = get_template_directory_uri();
    if(is_home()) { ?>
    	
    <script type="text/javascript">
    /* <![CDATA[ */
    jQuery.preloadImages("<?php echo $template_dir.$css_style_path; ?>/home_feature.jpg","<?php echo $template_dir.$css_style_path; ?>/stage.jpg","<?php echo $template_dir.$css_style_path; ?>/header.jpg","<?php echo $template_dir; ?>/images/slider_inactive.png","<?php echo $template_dir; ?>/images/buttons.gif","<?php echo $template_dir.$css_style_path; ?>/buttons.gif","<?php echo $template_dir; ?>/images/slider_active.png","<?php echo $template_dir.$css_style_path; ?>/drop.png","<?php echo $template_dir.$css_style_path; ?>/dropR.png","<?php echo $template_dir.$css_style_path; ?>/drop_sub.png");
    /* ]]> */
    </script>
    <?php } ?>
    
    <!--[if IE 6]>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles/ie6/ie6.css" type="text/css" media="screen" />
    <script src="<?php echo WEBTREATS_JS; ?>/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>
        DD_belatedPNG.fix('#default_logo, .slider_frame');
    </script>
    <![endif]-->
    
    </head>
    Last edited by dantra; 02-28-2011 at 12:59 AM.

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This is the part the confused me:
    Code:
    <?php
    $css_style_path = str_replace('.css', '', $color_scheme);
    if($css_style_path == 'black') {
    	$css_style_path = '/images';
    }else{
    	$css_style_path = '/styles/' .$css_style_path;
    }
    $template_dir = get_template_directory_uri();
    if(is_home()) { ?>
    The theme has a few styles to choose from. What I gathered from the code above is that the black stylesheet will be use but if one isn't chosen then it reverts back to the original stylesheet 'styles'?

  • #7
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    You've reached a point now where someone will have to actually experiment.
    I don't have time to alter my own WP blog, so you'll have to find someone who
    you trust to access your files and mess around. It's going to take some experimenting
    to make it work ... your situation is unique (custom).

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks mlseim.
    Has anyone done this before that can give me some pointers on how to go about it?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •