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

dantra · 02-25-2011, 03:59 AM

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

mlseim · 02-25-2011, 04:25 AM

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?

.

dantra · 02-25-2011, 06:47 AM

Quote:

Originally Posted by mlseim

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

mlseim · 02-25-2011, 12:24 PM

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.

dantra · 02-26-2011, 04:48 PM

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>

dantra · 02-26-2011, 05:06 PM

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'?

mlseim · 02-26-2011, 06:24 PM

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).

dantra · 02-26-2011, 07:20 PM

Thanks mlseim.
Has anyone done this before that can give me some pointers on how to go about it?