ThemeShaper Forums » Thematic

[closed]

How do I define a custom CSS file per page template?

(27 posts)
  • Started 5 years ago by Nick
  • Latest reply from helgatheviking
  • This topic is resolved
  1. Nick
    Member

    I am setting up a site that requires a custom page template including a completely custom CSS styling for that one page. How do I define that custom CSS within that one template?

    I need to override my main CSS styling and load a totally different styling. I think there is a way to do this...but how?

    Posted 5 years ago #
  2. you can do this by targeting the body class for that template: .your-template-php.

    Posted 5 years ago #
  3. Nick
    Member

    Sorry, you lost me there. Long hand please... :)

    Posted 5 years ago #
  4. Check out the body tag for my theme store page on ThemeShaper:

    <body class="wordpress y2009 m03 d12 h12 slug-theme-store page pageid-1268 page-author-ian-stewart page-template page-template-shop-php loggedin mac firefox ff3">

    If I want to target CSS edits for that page template (shop.php) I can modify CSS like this:

    a { color:blue; }

    by using something like this:

    .page-template-shop-php a { color:red; }

    So instead of having blue anchors, like all my other pages, pages using the shop.php template will have red anchors.

    Posted 5 years ago #
  5. Nick
    Member

    Ok thanks...That helps a lot

    Posted 5 years ago #
  6. Nick
    Member

    Hmm...I am having issues with the imported CSS layout overriding the #container I am trying to style.

    Can I drop the imports for one page template, and have the imports for the rest of the pages?

    Posted 5 years ago #
  7. Hey Nick,

    would it be an option to have your standard style.css and load and alternative.css just for this one page? Means instead of loading the style.css you would load alternative.css for the one page that is different from the others.

    Cheers,

    Chris

    Posted 5 years ago #
  8. Nick
    Member

    Yes, that is exactly what I am trying to do. I should know how to do it...but have never needed to, so I don't know how. :)

    I am anticipating a forehead smack moment here...

    Posted 5 years ago #
  9. Don't know if this will be such a moment :-)

    Ok try this one:

    function my_stylesheet($content) {
      global $wp_query;
      if (is_page()) {
        $pageID = $wp_query->post->ID;
        if ($pageID == '332') {
            $content = "\t";
            $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
            $content .= STYLESHEETPATH . '/alternate.css';
            $content .= "\" />";
            $content .= "\n\n";
            }
        }
        return $content;
    }
    add_filter ('thematic_create_stylesheet', 'my_stylesheet')

    Copy & paste this snippet into your child theme's functions.php. Change the page-id to the one of your special page and change the name of the CSS file. If a standard page is loaded the style.css will be loaded. if your special page is loaded only the alternate.css will be loaded.

    Cheers,

    Chris

    Posted 5 years ago #
  10. Nick
    Member

    Great! Thanks for that.

    Can I define a list of pages that will load the alternate CSS?

    Suppose:

    if ($pageID == '332,333,334') {

    Would that work?

    Posted 5 years ago #
  11. Will this process work even for those of us using child themes?

    Have just tried as a solution to my Skittles.com problem. It ain't happening for me!

    Thanks a lot!
    Tom

    Posted 5 years ago #
  12. Ok changed it a bit ;)

    function my_stylesheet($content) {
      global $wp_query;
      if (is_page()) {
        $pageID = $wp_query->post->ID;
        $pagelist = array('332','333','334');
        if (in_array($pageID, $pagelist)) {
            $content = "\t";
            $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
            $content .= STYLESHEETPATH . '/alternate.css';
            $content .= "\" />";
            $content .= "\n\n";
            }
        }
        return $content;
    }
    add_filter ('thematic_create_stylesheet', 'my_stylesheet');

    Tested and approved.

    Cheers,

    Chris

    Posted 5 years ago #
  13. @Tom .. if you have only a couple of changes for a certain page or post or whatever the solution we described in the Skittles.com thread is perfect.

    If you want to implement a more complex style change or want to run a certain page with a completely different style it might be better to use the filter as described above.

    Cheers,

    Chris

    Posted 5 years ago #
  14. Nick
    Member

    Ok, so it is overriding the CSS, but not loading my custom style-sheet.

    Any thoughts?

    Posted 5 years ago #
  15. Nick
    Member

    So, the function works only half way...

    The custom style sheet will not load.

    Here is my code:

    function my_stylesheet($content) {
      global $wp_query;
      if (is_page()) {
        $pageID = $wp_query->post->ID;
        $pagelist = array('3','19','20');
        if (in_array($pageID, $pagelist)) {
            $content = "\t";
            $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
            $content .= STYLESHEETPATH . '/launchpage.css';
            $content .= "\" />";
            $content .= "\n\n";
            }
        }
        return $content;
    }
    add_filter ('thematic_create_stylesheet', 'my_stylesheet');

    Don't I need to define the stylesheet location?

    Posted 5 years ago #
  16. Now I had such a moment ..

    please change the line

    $content .= STYLESHEETPATH . '/alternate.css';

    into

    $content .= get_bloginfo('stylesheet_directory') . "/alternate.css";

    Then it should work .. just tested it with the standard Thematic CSS and the Second to None CSS for just one page .. looks great.

    Sorry!

    Cheers,

    Chris

    Posted 5 years ago #
  17. Nick
    Member

    Yes! Hoorah! You did it.

    Here is the fixed code for posterity:

    To load a custom CSS stylesheet on a single page:

    function my_stylesheet($content) {
      global $wp_query;
      if (is_page()) {
        $pageID = $wp_query->post->ID;
        if ($pageID == '332') {
            $content = "\t";
            $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
            $content .= get_bloginfo('stylesheet_directory') . "/alternate.css";
            $content .= "\" />";
            $content .= "\n\n";
            }
        }
        return $content;
    }
    add_filter ('thematic_create_stylesheet', 'my_stylesheet')

    To load a custom CSS stylesheet on multiple pages:

    function my_stylesheet($content) {
      global $wp_query;
      if (is_page()) {
        $pageID = $wp_query->post->ID;
        $pagelist = array('332','333','334');
        if (in_array($pageID, $pagelist)) {
            $content = "\t";
            $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
            $content .= get_bloginfo('stylesheet_directory') . "/alternate.css";
            $content .= "\" />";
            $content .= "\n\n";
            }
        }
        return $content;
    }
    add_filter ('thematic_create_stylesheet', 'my_stylesheet');
    Posted 5 years ago #
  18. Tested with no alternate.css before.. got a none CSS display and said 'Ok .. It'll work if alternate.css is there' .. *SMACK*

    Posted 5 years ago #
  19. Nick
    Member

    Careful there Chris! ;)

    Posted 5 years ago #
  20. this is great! any idea how to turn this into a CSS selector?

    i'd love to have two links, one loading default.css and the other loading alternative.css.

    PS. i went live with my thematic theme! walkingpaper . org

    Posted 5 years ago #
  21. vivalet
    Member

    My solution to this was the following:

    I created a template that called
    <?php get_header('alt') ?>

    and made a file called header-alt.php

    this is a copy of the thematic header.php but I made the following change. I commented out the call to thematic_create_stylesheet(); and hard coded the alternate style sheet.

    //thematic_create_stylesheet();
    ?>
    <link rel="stylesheet" type="text/css" href="http://www.website.com/bk/wp-content/themes/thematicpowerblog/style-alt.css" />
    <?php

    In the future would it be possible for thematic_create_stylesheet to accept an argument so that it could call style-alt.css

    for instance a special header-alt.php could call thematic_create_stylesheet('alt') and then the file style-alt.css would be called instead of style.css

    thanks!

    Posted 5 years ago #
  22. blitz
    Member

    Really interesting and useful post. However…

    Not a problem to do with the code at all, but a quirk I've found. I need to have a different background jpeg on each page.

    The graphic is attached to #main - which is in the header.php. I used the <?php get_header('alt') ?> (thanks vivalet) code to pull up a new header and tried two things, #mainalt, (and a style for this) which did not work - well it did, but the background image only repeats horizontally! and also #main with an alt class. This did not work either.

    Anyone come across this - or a way to use a custom background tile in the #main (alternative template) tag?

    Posted 4 years ago #
  23. for loading different stylesheet per page

    add_action('wp_head','your_function',1);
    
    function your_function(){
        if(!is_admin()){   /* to prevent  the loading of your stylesheet in the admin*/
            if(is_front_page()){   /* to load a stylesheet for your front page */
                wp_enqueue_style('front_style', 'path to your stylesheet');
            }else{
                wp_enqueue_style('normal_style', 'path to your other stylesheet');
            }
        }
    }
    Posted 3 years ago #
  24. akmiecik
    Member

    Would it be possible to get a bit more instruction on the code?

    Thanks

    Posted 2 years ago #
  25. that's a bit vague. what do you want to know?

    Posted 2 years ago #
  26. akmiecik
    Member

    your_function = function.php in child template folder?
    could you give examples of the following:
    front_style
    path to your stylesheet
    normal_style
    path to your other stylesheet

    Thanks

    oh, is there a benefit to doing the function vs. a unique template with the CSS hardcoded as vivalet did?

    I created a template that called
    <?php get_header('alt') ?>

    and made a file called header-alt.php

    this is a copy of the thematic header.php but I made the following change. I commented out the call to thematic_create_stylesheet(); and hard coded the alternate style sheet.

    //thematic_create_stylesheet();
    ?>
    <link rel="stylesheet" type="text/css" href="http://www.website.com/bk/wp-content/themes/thematicpowerblog/style-alt.css" />
    <?php

    Posted 2 years ago #
  27. the code should probably not say path as in this instance it actually means URL and not absolute path.

    your_function like ALL functions you find on these boards go in your CHILD'S functions.php

    define('CHILDTHEME', get_bloginfo('stylesheet_directory'));
    
    add_action('wp_head','your_function',1);
    
    function your_function(){
        if(!is_admin()){   /* to prevent  the loading of your stylesheet in the admin*/
            if(is_front_page()){   /* to load a stylesheet for your front page */
                wp_enqueue_style('front_style', CHILDTHEME . '/front-style.css');
            }else{
                wp_enqueue_style('normal_style', CHILDTHEME . '/style.css');
            }
        }
    }

    the caps CHILDTHEME is a php constant. i always use constants for the different folders in my theme so that if i ever change the file structure i only need to change the reference in one place. but you aren't obliged to use it.

    if you are still confused on the subject please read:
    programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/

    idk if there is a benefit, per se, but doing everything via functions is just sort of the child-theme approach. it keeps everything centralized.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.