Forums

Calling alternative css from twentyten not working (12 posts)

  1. guileshill
    Member
    Posted 1 year ago #

    http://www.safeproductions.co.uk/01wp/news/

    All I am trying to do is to get the posts to display with a different style on blog pages.

    This is driven from a child theme of twentyten. I have the following in the header.php which is currently located in the child theme folder but I have tried it, and the corresponding css stylesheet in both parent and child. I have also tried all the forms for specifying the page id. The css is not being called at all according to firebug. This is the first time I have used a child theme and I suspect I am screwing up the relationship between parent and child somewhere. Could someone give me a steer please.

    lines 37-41 of header.php having removed the default style call

    <?php if ( is_page('News') ) { ?>
    <link rel="stylesheet" href="http://www.safeproductions.co.uk/01wp/wp-content/themes/1SAFE/posts.css" type="text/css" media="screen" />
    <?php } else { ?>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"  type="text/css" media="screen" />
    <?php } ?>
  2. hedronist
    Member
    Posted 1 year ago #

    That's not how you override the style of a parent theme. As covered in http://codex.wordpress.org/Child_Themes, you want to 1) create a new theme directory, 2) create a style.css like below, 3) include whatever new/override styles you want. The Template: line names the directory of the parent, and the @import line brings in the parent's stylesheet.

    /*
    Theme Name:     Twenty Ten Child
    Description:    Child theme for the Twenty Ten theme
    Author:         Your name here
    Template:       twentyten
    */
    @import url("../twentyten/style.css"); /* this is !important; */
  3. guileshill
    Member
    Posted 1 year ago #

    Yes, thanks, I did all that at the outset.

    The php above is in the header.php and should be using the child's styles.css unless the page is that specific one. The child theme is working fine apart from the fact that it will not switch css stylesheet for that particular page.

  4. hedronist
    Member
    Posted 1 year ago #

    Ah, sorry about that.

    If you aren't getting the alternate CSS file then is_page('News') must be returning false. I know this is a 'Duh!' kind of statement, but it helps focus on what you need to determine/fix.

    I notice that the info in the title tag is different for this page than your other pages. Since this is the information the is_page() function is checking ...?

    Another possibility is that you might have an extra space at the end of the title. Most systems I build automatically strip leading/trailing spaces, but I just checked and found WordPress does not do this. That means the title *could* be 'News ' and it would be very hard to see.

    Good luck.

  5. guileshill
    Member
    Posted 1 year ago #

    Thanks again. But it's not this, it does it, or doesn't do it no matter what form of ref I put in there, title, tag or id. I thought at first it had to be to do with the location of the header.php or the post.css, but tried them both in both the parent and child folders. Then I tested to see if something in the cascade was busted and the post.css was being overruled by the style.css, but post.css doesn't appear anywhere in the heirarchy in firebug. Hence my stumpedness.

    At present I have resolved this, slightly resentfully at my ignorance, by using a plugin that puts css rules inline with the page. But I hate this as a solution because it just bypasses the problem and I really want to learn to solve it.

  6. hedronist
    Member
    Posted 1 year ago #

    It's sort of a kludge, but you could try using the page's ID instead of it's title. IDs are unambiguous and so it might work where the title doesn't, but they are inherently non-self-documenting, so don't forget to tell your future-self what ID 14 (or whatever) really means.

  7. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Why bother using a completely separate stylesheet. You can simply add the extra CSS to the existing child's stylesheet and prefix all of the relevant classes and ids with one of the classes generated by the body_class() tag.

  8. guileshill
    Member
    Posted 1 year ago #

    Ooh, it's turning into a chat! Thanks hedronist. Thought I mentioned that I've used all the forms of id, including the page id (which is pretty easy with the plugins that display them properly). This was before the problem appeared.

    Esmi, thanks. One of the things that has confused me about twentyten is that posts and pages seem not to be distinguished from each other in the classes. I have been resetting the .hentry class but am unsure if this differs in terms of defining blog posts from the .entry class. The nomenclature in twentyten, for such a simple theme, is oddly obscure. It even took me a moment to realise that menus are defined by the term 'access'.

    But I note that the .blog and .archive classes are not used in the style.css, is this what you mean? I'll give it a go because this is much closer to my normal way of working.

  9. guileshill
    Member
    Posted 1 year ago #

    Ok, the body_classes is being called in the header.php body section as expected. But the css still isn't picking up. I added the following to the styles.css

    body .blog #content .hentry,
    body .archive #content .hentry,
    body .category #content .hentry:{
    	border-top: 1px solid #E7E8DF;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 48px;
    	box-shadow: 0px 5px 7px 0px #9B9C96;
    	-webkit-box-shadow: 0px 5px 7px 0px #9B9C96;
    	-moz-box-shadow: 0px 5px 7px 0px #9B9C96;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#9B9C96, offX=0, offY=5, positive=true);
    	padding: 10px;
    	border-bottom: 1px solid #999;
    	}
  10. alchymyth
    The Sweeper
    Posted 1 year ago #

    body.blog ....

    try without the space between body and the .class

  11. guileshill
    Member
    Posted 1 year ago #

    Good idea, should have been that. But no change. The html shows that the body classes are working ok but the css still isn't kicking in.

  12. guileshill
    Member
    Posted 1 year ago #

    Got it. For some reason the compound rule was breaking it. When the style is declared for each of the blog, category and archive classes separately it works.

    Thanks guys for all your help.

Topic Closed

This topic has been closed to new replies.

About this Topic