ThemeShaper Forums » Thematic

[closed]

child page template css

(3 posts)
  • Started 4 years ago by wolf99
  • Latest reply from wolf99
  • This topic is resolved
  1. wolf99
    Member

    Hi folks

    Post at http://wptheming.com/2010/03/custom-page-templates-thematic/ shows a way of applying css from the custom.css file to custom page templates only, by using an ID equal to the name of template file + classes/id for styling

    His example uses thematic, I assume that this is a thematic function as it does not work on my non-thematic child theme....

    So is there a way to export this functionality to another template? or is it more complex than that?

    It seems a lot handier than making separate css files per custom page and adding custom PHP to the header file to deal with them (I think I could use wp_enque function either, but didnt really understand that)

    Thanks

    Posted 4 years ago #
  2. Jamie Mitchell
    Member

    hey wolf

    here is what you do (for any theme at all)

    copy your page.php, and lets say for example we are doing a custom page called portfolio (could be anything at all)

    and add this to the top

    <?php
    /*
    Template Name: Portfolio Page
    */
    ?>

    and then save it to your theme directory as portfolio-page.php (goes in the same place as all your other template files)

    that's it, you have a custom page, now to use the page you simply select it from the page template dropdown when you are creating/editing a page in wordpress, you will see the name in the "Portfolio Page".

    now if you want to have a custom css for this page only, you simple look at you html in a browser (get firebug for this to make it easy)

    for the body tag you will see some sort of name like

    .page-template-template-portfolio-page-php

    and use that as the start of all your custom css for that page, you add the css in the same stylesheet as the rest of your css, for example

    say you want a to make a div wider for your custom portfolio page

    the css you already have is

    #container{
      width:500px
    }

    to override it for your custom page only copy it and add the body class to it , so it will now look like this

    #container{ /*for all your pages*/
      width:500px
    }
    .page-template-template-portfolio-page-php #container{ /*for your custom page only*/
      width:900px
    }

    of cause the body class .page-template-template-portfolio-page-php will be different for every theme, that's why you need to go to that page and check it by viewing the source code

    if it says just <body> and nothing else, then you need to add a little php to generate the classes.

    open you header and replace the

    <body>

    with

    <body <?php body_class(); ?>>

    hope i explained things ok, i suck at writing skills, perhaps i should look at doing screencasts :)

    J

    Posted 4 years ago #
  3. wolf99
    Member

    Hi Jamie,
    thanks for taking the time to right all that!

    for the body tag you will see some sort of name like

    was the step I was missing so was using slightly wrong class thank you so much for your help!

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.