Multiple CSS files and Conditional Tags

  • Ed Mac

    (@edoardo-melchiori)


    13 years, 10 months ago

    Hi everybody,
    if code is poetry I’m learning the ABC modifying a theme.
    Right now I’m trying to use 2 different CSS files. Style.css with the sidebar and style2.css without the sidebar and with a slightly different page layout.
    Style.css is for blog and posts and style2.css is for specific pages with a certain page template (blank.php).

    I’m trying to use conditional tags in the header, something like:
    Option1

    <?php if( is_page_template('blank.php') ) :?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style2.css" media="screen" type="text/css" />
<?php endif;?>

    But it doesn’t work.

    I’ve laso tried the other way round (inverting Css files names) setting up this:
    Option2

    <?php if( is_home() ) :?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style2.css" media="screen" type="text/css" />
<?php endif;?>

    This way it works but I get my sidebar only in the main posts page, not in single posts.
    To load sidebar’s content and widgets I obviously modify the page.php & page template blank.php when needed adding or deleting the load sidebar code line.

    Is there anybody who could explain me why option1 doesn’t work and help me to fix it?

    Thanks in advance

Viewing 9 replies - 1 through 9 (of 9 total)

  • Why not use a single stylesheet and unique classes/ids?

    Thread Starter Ed Mac

    (@edoardo-melchiori)

    If it works… but I should admit I have no idea where to start with classes/ids. Could you please give me some code as an example?

    Does your theme use the post_class and body_class functions?

    Thread Starter Ed Mac

    (@edoardo-melchiori)

    Well, if I’m supposed to find post_class and body_class in the style.css file… well the answer is no. By the way if it could help this is my theme and this is?my website.

    You need to look for these functions in the theme’s template files.

    Thread Starter Ed Mac

    (@edoardo-melchiori)

    It’s official: my theme doesn’t use classes.

    In that case, I strongly recommend that you add them. You’ll have a whole stack of auto-generated generated classes on both the body element and the post container element that you can play with. For example, your template-without-sidebar will be specifically referenced as a unique class on the body tag on any page that has that template assigned to it.

    Which should make your problem of how to style the different layouts far easier to solve.

    https://codex.www.ads-software.com/Function_Reference/body_class
    https://codex.www.ads-software.com/Function_Reference/post_class

    Thread Starter Ed Mac

    (@edoardo-melchiori)

    Ok, this is a great step forward. Now my theme has classes.
    Now I have two options:
    1. tell the css to load sidebar only in this two cases

    <body class="blog">
<body class="single single-post">

    or
    2. tell the css not to load the sidebar in this case
    <body class="page-template-blank">
    Which option is best? And how do I write down the code? I’ve tried this

    .blog {
#sidebar{
position:absolute;
	top:12em;
	right:313px;
	float:right;
	width:190px;
	margin:0 -230px 0 0;
	padding:20px;
	background:#eee;
}
}

    in the css with no good results. Do I have to repeat the .blog {} every time sidebar appears in the css stylesheet?

    Thread Starter Ed Mac

    (@edoardo-melchiori)

    I’ve made some tests (and read some more tutorials) and sorted out this:

    #sidebar.blog{
position:absolute;
	top:12em;
	right:313px;
	float:right;
	width:190px;
	margin:0 -230px 0 0;
	padding:20px;
	background:#eee;
}

    this way the widgets load on the bottom of the page and the sidebar’s background color remains…

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Multiple CSS files and Conditional Tags’ is closed to new replies.