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?
you can do this by targeting the body class for that template: .your-template-php.
Nick
Member
Sorry, you lost me there. Long hand please... :)
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.
Nick
Member
Ok thanks...That helps a lot
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?
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
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...
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
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?
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
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
@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
Nick
Member
Ok, so it is overriding the CSS, but not loading my custom style-sheet.
Any thoughts?
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?
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
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');Tested with no alternate.css before.. got a none CSS display and said 'Ok .. It'll work if alternate.css is there' .. *SMACK*
Nick
Member
Careful there Chris! ;)
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
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!
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?
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');
}
}
}
akmiecik
Member
Would it be possible to get a bit more instruction on the code?
Thanks
that's a bit vague. what do you want to know?
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
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.
This topic has been closed to new replies.