So I found one question that I read that asked how to have a custom CSS file per page. Here's an easy way to add custom CSS files based on simple conditional logic in Genesis.
[php]
remove_action('genesis_meta', 'genesis_load_stylesheet'); //removes current stylesheet
add_action('genesis_meta','genesis_custom_css');
//get_bloginfo('stylesheet_url') is our normal style.css
function genesis_custom_css() {
if (is_category())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/cat_style.css" type="text/css" media="screen" />'."n";
if (is_home() || is_front_page())
echo '<link rel="stylesheet" href="'.get_bloginfo('stylesheet_url').'" type="text/css" media="screen" />'."n";
if (is_archive())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/arch_style.css" type="text/css" media="screen" />'."n";
if (is_author())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/auth_style.css" type="text/css" media="screen" />'."n";
if (is_page()) //also can take $pages=array(1,2,3); adding and elseif or else at the end.
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/page_style.css" type="text/css" media="screen" />'."n";
if (is_404())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/page_style.css" type="text/css" media="screen" />'."n";
}
[/php]
I’d be curious why one would need a separate stylesheet? Isn’t that what the body class is for?
I am not sure and I totally agree! But that’s what the person asked for. I simply thought it was interesting.
Hi,
I was just looking for this.
I might be mistaken on the way of doing it (I’m really a newbie). I have education child theme, and I would like to have, just in the home page, the sidebar inside set to the left instead to right.
I can do it changing float: right to float: left, but it changes all layout in the blog.
My idea was to set a custom css file just for the homepage, but I don´t really know how to do it.
I see up in the post that you have explained it, but I don´t really understand it, could you give a easier explanation, solution, or idea on how to do it.
Thanks a lot for the support and sorry if it sounds stupid, but I have been messing around for days and I havent been able to solve it on my own.
Hi Fbws,
You don’t need to change the CSS. Instead you need to force a different layout on the homepage of the Education Child Theme. To do this, locate the following code in functions.php.
[php]// Force layout on homepage
add_filter(‘genesis_pre_get_option_site_layout’, ‘education_home_layout’);
function education_home_layout($opt) {
if ( is_home() )
$opt = ‘content-sidebar-sidebar’;
return $opt;
}[/php]
and change
$opt = 'content-sidebar-sidebar';to$opt = 'sidebar-content-sidebar';Hi Travis,
Thanks for your useful tutorial,
i added :
if (is_single())
echo ”.””;
so “post” page can take style from original style css.
But is there any way to style “post” page based on category?
I thought when i use “if (is_category( id-numer ))”, “post” page will take diffirent style each categories, but it didn’t work.
Please help me find the way out Travis.
And sorry for my poor English.
Thanks.
I found it Travis,
i just added another if (is_category() and change “is_category” to “in_category” and tada, its working.
Thanks.
A noob question – Is it mandatory to do remove action to remove loading default css and then adding the custom one? Can’t we just do the add action so that both default and custom could work?
Second, I was putting all the custom css via simple hooks by using if-else loop and stating style elements between style tags. I know it can’t be the default approach or even suggested. But is it a bad way?
Travis, what conditional logic would I use to give a unique style to a page and all pages that are children of that page?