Alternative CSS file for Custom page template?

  • We’ve implemented a custom newsletter pages template on our site. I need to be able to tweak the style sheet without interfering with the rest of the site styles. Ideally it would be great to pull in an alternative style sheet rather than the one defined by our chosen theme. It looks like the theme CSS is determined by the wp_head() function. Is there any wisdom in creating a wp_headALT() function for the alternative css template to appear? Or is there a better approach to do this?

    thanks,

    Chuck

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi

    I’d suggest unless you are making a large number of CSS changes that instead of an alternate stylesheet, you simply override the existing styles by assigning a class to either the body or content tag when the custom template page is being displayed. If all the styling you want to do is in areas of the site within the content area, then you just add the class like this within the template
    <div id="content: class="newsletter">

    If you need to change stylings outside of that area then use PHP tp add a class, conditionally when the newsletter page is being displayed, on the body tag in header.php.

    If your regular CSS looks like this
    #content { width: 550px; color: blue; }

    then you have an area in the stylesheet where you override certain styles like this
    .newsletter #content { width: 850px; color: green; }

    If there are many style changes you can do it as a supplementary stylesheet without needing to use the class name approach by including the stylesheet conditionally in header.php

    — main stylesheet declaration here —–
    <?php if (is_page(‘newsletter’)) { ?>
    — supplementary stylesheet declaration here —–
    <?php } ?>

    As long as the second sheet is listed after the first, styling assignments contained in the 2nd stylesheet will overwrite stylings assigned to the same elements in the 1st sheet, as that is how CSS works. The last styling rule applied to identical elements “wins”.

    Personally, if the CSS was purely for a new page template, I’d be inclined to incorporate an unique id or class and then add to CSS to the main stylesheet(s) using the id/class.

    However, if you want to use a standalone additional CSS sheet, you could use a conditional to call it in header.php? Let’s suppose your newsletter template is called newsletter.php:

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

    Not quite the alternative you were after but far easier, I think. ??

    Thread Starter cewyattjr

    (@cewyattjr)

    Yeah, I was thinking that I would make a copy of the original styles.css and somehow figure out to get the template to exclude that and include my alternate css. The issue of the moment relates to padding. I’ll try both approaches and see what works as I work through this.

    Thanks very much!

    Chuck

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Alternative CSS file for Custom page template?’ is closed to new replies.

Tags