New Page template and new CSS in existing theme

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.

Hi KG

Sorry for the delay in responding.

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

Regards

Hardhat

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

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

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

Just to add:

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

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

: )

H

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

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

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=“https://yoursite.com/wp-content/themes/yourcurrenttheme/77.css&#8221; 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.

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.