How do I define a custom CSS file for each of my four pages?

ThemeShaper Forums » Thematic

How do I define a custom CSS file for each of my four pages?

(13 posts)

Started 3 years ago by susan.ashton
Latest reply from Chris
This topic is not resolved

Tags:

susan.ashton
Member

In a post 4 days ago Chris helped Nick load one custom css file for one page, and one custom css file to be used for an array of pages. (See below)

I can't figure out how to get a custom css file for each of my four different pages. I got 1 alternate css file to work with my 2nd page, but when I paste the code into functions.php for the 3rd page that page just comes up blank on the blog.

(I'm really new at this so it's probably something I'm doing wrong with the php tags in functions.php, or something).

Thanks in advance for your help!

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

Posted 3 years ago #

Chris
Moderator

Hey Susan,

blank page is a weird php error .. so you have four pages and each page has its own stylesheet.

function my_stylesheet($content) {
  global $wp_query;
  if (is_page()) {
    $pageID = $wp_query->post->ID;
    $pagelist = array('332','400','382','313');
    if (in_array($pageID, $pagelist)) {
        $content = "\t";
        $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
        $content .= get_bloginfo('stylesheet_directory');
        if ($pageID == '332') { $content .= "/alternate1.css";}
        if ($pageID == '400') { $content .= "/alternate2.css";}
        if ($pageID == '382') { $content .= "/alternate3.css";}
        if ($pageID == '313') { $content .= "/alternate4.css";}
	$content .= "\" />";
        $content .= "\n\n";
        }
    }
    return $content;
}
add_filter ('thematic_create_stylesheet', 'my_stylesheet');

Copy the code to your functions.php and change the page-ids.

Tested with Thematic 0.9 plus a couple of different child theme's CSS.

Cheers,

Chris

Posted 3 years ago #

Mark
Member

Chris-

When I use this I get the effect of the header changing that I want.
I essentially copied the default.css I have in the child theme and just renamed it to alternate1.css, alternate2.css, etc.... However, the content gets dorked up when I do that. Is there a fix for this?

Posted 3 years ago #
Chris
Moderator

Hey Mark,

could you please explain a bit more what you need to change. The described method is something used for major changes on certain pages.

If you only want to change the header this could / would be an overkill, because you would need to provide a complete alternate style.css for each page (you're only loading a changed default.css which results in missing a lot of definitions and a weird display for the content). And each alternate style.css needs to be updated to reflect additional future changes.

You could use a 'diff' style.css for each page which needs to be loaded in addition to your regular style.css. In this case the above mentioned code needs to be changed.

If it is just a simple change like loading a page related header image this could be done in your regular style.css either using the page-id or the slug-xxxx selector .. this would look like:

body.page-xx #header {
background: url(images/page-xx.jpg) no-repeat;
}

.. and so on.

Cheers,

Chris

Posted 3 years ago #
Mark
Member

Thanks Chris. Yes, I am just looking for a simple header change for each of the sections of the website. I'll try it out and post my results.

Posted 3 years ago #
Mark
Member

Chris-
No joy. Maybe I am not placing this in the correct file. I have a Child theme style.css and a default.css.

I've tried both locations.

Posted 3 years ago #
Chris
Moderator

Ok .. could you please give me some more details 'bout what you want to modify?

Posted 3 years ago #
Chris
Moderator
As far as I got it from your blog, you're modifying the banner.

Remove the my_stylesheet function from your functions.php. Edit your style.css and add the following code (just an example for two of your pages):
```
body.slug-residents #header {
    background:#128510 url(images/residents.jpg) no-repeat;
}
body.slug-businesses #header {
    background:#128510 url(images/businesses.jpg) no-repeat;
}
```
.. and so on

Cheers,

Chris
Posted 3 years ago #
Mark
Member

You rock Chris!!! That's what I was looking for. However how do I make that header appear on all of the child pages too? e.g. Residents>>Capitol Improvements

I am presuming I just add:
body.slug-capitol improvements#header {
background:#128510 url(images/residents.jpg) no-repeat;
}

to my styles.css.

Posted 3 years ago #
Mark
Member

BTW, I just noticed the option to apply other templates. I suppose I should read up on how to do that so I can apply individualized templates to multiple pages.

Thanks again.

Posted 3 years ago #
Chris
Moderator

Will publish a 'diff.css' code tomorrow. This should solve your problem providing one header for a parent and its child pages.

Cheers,
Chris

Posted 3 years ago #
Mark
Member

Fantastic. Thanks again. I'll work on my header graphics in the interim.

Posted 3 years ago #

Chris
Moderator

Hey Mark,

finally solved it .. my first version was nice but worked only on the first sub-level .. so it took me some additional time to find a solution ..

Let's start .. this will style the body background for only two parent pages and all child pages running through all sub-levels but it shouldn't be a problem to extend this code to your needs ..

Create diff1.css and diff2.css in your child theme's directory:

diff1.css:

body {
	background: #FFF000;
}

Be careful .. this color hurts :-)

diff2.css:

body {
	background: #FFF0FF;
}

This one is for the girls :-)

.. and now the code for your child theme's functions.php:

function my_stylesheet($content) {
	global $wp_query;
	// is it a page?
	if (is_page()) {
		// get the page-id
		$pageID = $wp_query->post->ID;
		// my list of parent pages
		$pagelist = array('336','82');
		// get a list of ancestors
		$ancestors = get_post_ancestors($post);
		// parent or child ?
		if (in_array($pageID, $pagelist) || in_array('336',$ancestors) || in_array('82',$ancestors)) {
        		$content .= "\t";
        		$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
			$content .= get_bloginfo('stylesheet_directory');
			// check for parent or child and load diffx.css
			if (($pageID == '336') || in_array('336',$ancestors)) { $content .= "/diff1.css";}
			if (($pageID == '82') || in_array('82',$ancestors)) { $content .= "/diff2.css";}
			$content .= "\" />";
			$content .= "\n\n";
		}
	}
	return $content;
}
add_filter ('thematic_create_stylesheet', 'my_stylesheet');

Change the page-ids and extend it to your needs. Don't forget to change diffx.css!

Tested with WordPress 2.71, Thematic 0.9 and the basic child theme coming from the directory thematic\thematic-sample-child-theme.

ThemeShaper Forums

ThemeShaper Forums » Thematic

How do I define a custom CSS file for each of my four pages?

Reply