WordPress.org

1. mea777
   Member
   Posted 2 years ago #
   

   I'm using a Twenty ten child theme. I have manipulated one page so I now have a little banner with a strapline right underneath the menu on that page only (done this creating a second entry content div on the page and using css)

   Using the conditional statement for explorer makes it work fine ie menu stuck to banner, but in Firefox and safari, it moves the banner slighty down ont the entry-content div. If I give this div a negative margin it works, but affect the banner in explorer which moves up. How do I make the changes in FFox/Safari not affect Explorer and vice versa?

   .entry-content {
   clear: both;
   margin: 0 auto;
   background-color: #000; font-color: #fff;

   }

   .entry-content2 {

   margin-top: -22px ; /*the negative value no longer works when I add in the conditional statement for explorer (below) /* padding: 15px 0 15px 40px;
   display: block;
   clear: both;
   background: url("http://www.example.com/wp-content/uploads/2011/03/banner3.jpg"); font-family: arial; font-size: 13pt; color: #dcd0d1;

   <!--[if gte IE 6]>
   clear: both; display: block; position: relative; margin-top: -3px; /*this brings banner down right underneath menu, which I want*/

   <![endif]-->
   }

2. Chip Bennett
   Theme Review Admin
   Posted 2 years ago #
   

   You need to put your IE-specific CSS in its own CSS file, then put your IE conditional tags in your document head, and use them to link to your IE-specific CSS file.

3. mea777
   Member
   Posted 2 years ago #
   

   ok..... Just to clarity, would the additional css only use the conditional statement from the style.css sheet and saved again, as say, style2.css, like this?

   @charset "UTF-8";
   /* CSS Document */

   /*
   Theme Name: newtheme
   Description: Child theme for the twentyten theme

   Template: twentyten
   */

   @import url("../twentyten/style.css");

   .entry-content2 {
   <!--[if gte IE 6]>
clear: both; display: block; position: relative; margin-top: -3px;
   <![endif]-->
}

4. Chip Bennett
   Theme Review Admin
   Posted 2 years ago #
   

   No, you'd have your normal stylesheet, style.css, that you use as you would normally.

   Then you would create a second stylesheet, e.g. "ie.css", that includes only your IE-specific CSS changes.

   Then, you would call "style.css" as per normal in your document head.

   Then, in your document head, you would put your IE conditional tags, e.g. <!--[if gte IE 6]><![endif]-->
, inside of which you would call your "ie.css" stylesheet.

5. mea777
   Member
   Posted 2 years ago #
   

   I think i understand. But you talk about the 'document head'.

   Is it ok to do that in WordPress?... I mean each page shows as a visual or html option right, but the html option (i have wondered why) only includes sections relevant to the 'visual' right, like <p> it never includes the initial declaration, the opening html / body tags etc ... Can i ignore that and 'expand' and add the opening elements as well including the 'head'?? Sorry if this sounds obvious, thanks for your help on this :)

6. Chip Bennett
   Theme Review Admin
   Posted 2 years ago #
   

   You can't make these changes from the Page-Edit or Post-Edit screens. You're modifying your Theme template files, not your Page/Post content.

   You need to use a text editor, and access the Theme template files via FTP.

7. mea777
   Member
   Posted 2 years ago #
   

   Ok, so i'm in my ftp, child theme folder. Here I create eg an ie.css document, where I would type in the following (without the @import url("../twentyten/style.css"); ?)

   @charset "UTF-8";
   /* CSS Document */

   .entry-content2 {
   <!--[if gte IE 6]>
clear: both; display: block; position: relative; margin-top: -3px;
   <![endif]-->
}

   Which document do I then 'call' the ie.css document in since there is no html file per se in the ftp? A php file I presume? but my child theme only contains a footer.css and style.css doc? aaargh confused still ..

8. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #
   

   You will probably need to copy the parent's header.php into your child theme and then add your conditional code to this file.

9. Chip Bennett
   Theme Review Admin
   Posted 2 years ago #
   

   1) Remove the IE conditional tags from around the CSS markup. The IE conditional tags go in your document head, not directly around the CSS markup.

   Your ie.css will look like this:
   

   .entry-content2 {
        
clear: both;
        display: block;
        position: relative;
        margin-top: -3px;
   
}

   That's all you really have to put in that file.

   2) As esmi said: copy header.php from your Parent Theme into your Child Theme's directory.

   3) In your Child-Theme copy of header.php, look in the document head, look for something like this:
   

   <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />

   4) Immediately after the above <link> tag, add the following:
   

   <!--[if gte IE 6]>
   <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/ie.css" type="text/css" media="all" />
   <![endif]-->

10. mea777
    Member
    Posted 2 years ago #
    

    Thanks Esmi, it's getting clearer though I feel i'm venturing into unknown territory with php, is this difficult to do? Do I put the statement anywhere within this?

    [Code moderated as per the Forum Rules. Please use the pastebin]

    Also , could you tell me if the content of the ie.css document as per my previous msg is correct ie do I need to make some reference to the parent theme or not?

11. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #
    

    Please put code inside backticks, and anything greater than about 10 lines really needs to be pasted into a pastebin, and linked here.

    As for where to put the code: please see my last response.

    You want your ie.css to be called after your default stylesheet, style.css. So, make sure you put your IE conditional tags, and the ie.css stylesheet link, after the style.css link.

12. mea777
    Member
    Posted 2 years ago #
    

    Thank you both very much, thanks Chip for the detailed reply, makes sense now, i'll give that a go now. Sorry about the code thing, wasn't aware of this will have to go thru the rules in detail ;-)

13. mea777
    Member
    Posted 2 years ago #
    

    um..... not as easy as it looked ! Must have done something wrong, When i refreshed the page, all I had was a sheet of php code for a web page...

    This is what I did

    1 -found in the header.php, and I included the statement after the bit you mentioned (looked similar but not 100% same).

    <link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!--[if gte IE 6]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style2.css" type="text/css" media="all" />
<![endif]-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

    2- uploaded it.

    3- uploaded the ie.css (called it style2.css) after pasting the code in.

    4- refreshed...

    any idea?

14. mea777
    Member
    Posted 2 years ago #
    

    (ps. downloaded a copy of the twentyten header.php file before proceeding to step 1)

15. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #
    

    I can't see anything obviously wrong with the code you have posted.

16. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #
    

    Did you upload the changed header.php to the TwentyTen directory, or to your Child Theme directory?

    Likewise with your "style2.css": I assume you uploaded both to your Child Theme directory?

17. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #
    

    Also, what code, exactly, did you paste in to "style2.css"?

18. mea777
    Member
    Posted 2 years ago #
    

    This is what the style2.css looked like

    @charset "UTF-8";
    /* CSS Document */

    .entry-content2 {

    clear: both;
    display: block;
    position: relative;
    margin-top: -3px;

    }

19. mea777
    Member
    Posted 2 years ago #
    

    yes, both uploaded to the child theme directory

20. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #
    

    If you have code appearing on your pages,. I can only assume that you inadvertently removed an opening <?php tag from your theme's header.php file when adding your new stylesheet links.

21. mea777
    Member
    Posted 2 years ago #
    

    No I checked...... was i supposed to delete anything, maybe the header.php file from the parent theme?

22. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #
    

    No! That should remain untouched and unedited.

23. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #
    

    Can you post a pastebin of your entire, modified header.php file?

24. mea777
    Member
    Posted 2 years ago #
    

    I've done it, not sure how this works, didn't have an account, it's in mea777's pastebin...

25. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #
    

    You need to post a link to the pastebin.

26. mea777
    Member
    Posted 2 years ago #
    

    duh
    http://pastebin.com/u/mea777

27. mea777
    Member
    Posted 2 years ago #
    

    sorry i think this is what you need

    http://pastebin.com/aH64PuLb

28. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #
    

    You need to clean that up, and put the line breaks back where they are in the original.

    How did all the line breaks get removed from the code? Is that how it looks on your site, or just in the pastebin?

    (p.s. it helps if you change the pastebin syntax to "PHP")

29. mea777
    Member
    Posted 2 years ago #
    

    you're right, I don't know what happened, maybe using the textedit tool adding the bit of text it changed everything.

    I've uploaded the original header.php file here pastebin.com/LJ3hZ3w1 now looks ok

30. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #
    

    Okay, now add back in your IE conditional tags, with your style2.css link.

Topic Closed

This topic has been closed to new replies.