WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] New Page template and new CSS in existing theme (11 posts)

  1. Hardhat
    Member
    Posted 7 years ago #

    Hi all

    Forgive what may be a specatularly dumb question, but...

    I'm working on a test WordPress installation on my Mac using MAMP.

    In my final site I want to use about a dozen different page templates and mildly adjusted CSS for each.

    I've worked out how to create a new Page template (called page77.php)

    I've managed to link that template to a new header (called header77.php)

    Now I've taken the default Theme Css file (style.css) and duplicated it and renamed it to create a new CSS file (77.css).

    What I want to do is link that CSS to the new header.

    Can I work out how to do it? Can I heck!

    Not knowing anything about PHP, I've tried replacing the original code:

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url');

    With a full local HREF:

    <link rel="stylesheet" type="text/css" href="/Applications/MAMP/htdocs/wordpress/wp-content/themes/nuts1/77.css" />

    I've also tried a short local HREF:

    <link rel="stylesheet" type="text/css" href="77.css" />

    I've also tried various other insanities that I won't bore you with here!

    Any takers?

    All help appreciated : )

    Hardhat

  2. KatGirl
    Member
    Posted 7 years ago #

    You don't have to touch your header to pull in other css.css files. Depending on the theme you're using, you can use the style.css to do it for you.

    I run four different stylesheets for my own theme, and I use styles.css to import them all into play.

    In styles.css I use this

    /*
    Theme Name: Romance
    Theme URI: theme url
    Description: 3 column fluid layout
    Version: 1
    Author:your name
    Author URI: your website
    */

    @import "layout.css"; [was previously styles.css]
    @import "navigation.css";
    @import "inventory.css";
    @import "comment.css";

    hope that helps.

  3. Hardhat
    Member
    Posted 7 years ago #

    Hi KG

    Sorry for the delay in responding.

    I'll try it within the next 24hrs : ).

    Regards

    Hardhat

  4. Hardhat
    Member
    Posted 7 years ago #

    OK: in advance, please forgive my massive dumbness:

    I'm sorted on the whole @import for linking other stylesheets via style.css...

    If I understood correctly: I duplicated my existing stylesheet which I renamed basic.css...

    In the original styles.css I then deleted all the style information and replaced it with the following:

    @import "basic.css"

    That's great because I've managed to move all the CSS rules for the majority of my site pages which are controlled by one template to an imported stylesheet.

    So far, so cool...

    Returning to my dilema...and with more clarity...

    I'm working on a music related site.

    The majority of the pages will be controlled by the default theme template page (ie: the page.php ).

    Certain areas of the site will have the exactly the same layout as page.php but require different CSS (eg: font usage and background colours etc).

    To give an example: one page is about the year 1977. To create a template for the main page and all sub-pages that relate to this page I've created a dulicated page.php and renamed it page77.php. I've also duped the default header.php to create header77.php (this is so that I can link the banner image to a different one for that era). Thus far I know the template side of things is working because it appears in my template list and I can create pages from it that look the same as the rest of the site but include the different image.

    My problem now remains to call a new stylesheet (...shockingly called 77.css...) to pages created from the page77.php template.

    I'm still not sure how to do this.

    How do I employ KG's @import to do this, based on the concept of WordPress themes using one controlling style.css?

    I know this was a longwinded descrpition...and - believe it or not - I'm quite happy with XHTML and CSS...but know bugger all about php.

    All help very much appreciated.

    H

  5. KatGirl
    Member
    Posted 7 years ago #

    hi HardHat

    I glad you got the import rules working:)

    In reference to your page.php problems, it doesn't matter what page template you make, if you've copied the existing - original - header information verbatim, then your style sheet 77.css, which you should have included in styles.css as an import rule WILL be shown.

    Can you check for me to see if your new Page Template page77.php has this as an opening statement?

    <?php
    /*Template Name: Page77
    */
    ?>
    <?php include ('header77.php'); ?>

    Edit: sorry, also note that you should state inside the styles.css that you want to import 77.css, as you did basic.css

    Ta

  6. Hardhat
    Member
    Posted 7 years ago #

    Hi Kat

    Ok: here's what I've got in each:

    Styles.css has:

    /*
    Theme Name: Foxx1
    Theme URI:
    Description:
    Version: 1
    Author: Hardhat
    Author URI:
    */
    @import "basic.css";
    @import "77.css";

    page77.php has:


    <?php
    /*Template Name: page77
    */
    ?>
    <?php include ('header77.php'); ?>

    I've made changes in 77.css to change the body copy to Times instead of Verdana and background colour is set to black instead of grey...but no change occurs.

    Just curious, how does page77.php know to call 77.css over basic.css ?

    Cheers

    H

  7. Hardhat
    Member
    Posted 7 years ago #

    Just to add:

    header77.php include this for it's stylesheet link:

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

    : )

    H

  8. KatGirl
    Member
    Posted 7 years ago #

    Just curious, how does page77.php know to call 77.css over basic.css ?

    When you import both stylesheets via style.css both sheets are applied to ALL your templates one after the other because style sheets are called through a hieratical order.

    Its like using basic.css and print.css and you've stripped all goodies out of print.css but retained the EXACT same markup in your templates. When it comes to print the page, the print.css stylesheet takes precendence over all other stylesheets and renders your page without any styling at all.

    Which was, of course, what you were asking :)

    Can you provide me with a link to your site so I can see what is going on?

    Thanks

  9. Hardhat
    Member
    Posted 7 years ago #

    Hi Kat

    I think we might be talking at cross purposes.

    Firtsly: it's a local installation for testing. It's not online yet.

    Secondly: I understand the hieratical call structure.

    However my point is, if you have two page templates which contain exactly the same markup (eg: # body, # content etc) but which you want to look different under different style sheets, how can you chose to apply only one style sheet to a given page?

    I can guarantee this is my week for being superthick but I still don't get it.

    What I'm asking..and forgive for me for repeating..is how do I get to link stylesheet A to template A and on template B (which is an exact duplicate of A) get stylesheet B to load?

    Remember I'm trying to do this without changing the page's internal markup so that there is only #body in both templates, not #bodyB in template B.

    Or, is the simple answer that I have to change the markup - eg #body to #bodyB in template B - in order to trigger the correct style?

    I may wake tomorrow and it'll all make sense...

    Your forebearence is greatly appreciated.

    H : )

  10. KatGirl
    Member
    Posted 7 years ago #

    Okay - here's my theory on it. I understand what you're trying to achieve, so no worries there.

    Save another copy of your present header77.php to your desktop - clear all others away in a blank folder somewhere for safe keeping.

    Open your newly saved header77.php and delete all reference to any styles.css - there should be only one:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />

    Now re-type this:

    <link rel="stylesheet" href="http://yoursite.com/wp-content/themes/yourcurrenttheme/77.css" type="text/css" media="screen, projection" />`

    You need to change the path yoursite.com to reflect your actual site path, and yourcurrenttheme should resemble the name of your current theme folder.

    Save. Upload. See if that works.

  11. Terry
    Member
    Posted 7 years ago #

    Quick note to say I've been feverishly working on this myself (different page backgrounds for certain pages) and KatGirl is right on the money, this works fantastic.

    However, for some oddball reason I had a problem getting the different css file to load on older versions of IE. The solution for me:

    <link rel="stylesheet" href="/wp-content/themes/yourthemefolder/yourdifferent.css" type="text/css" media="screen" />

    Try changing the css call in the page template header to that if you're experiencing probs too.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags