ThemeShaper Forums » Thematic

[closed]

Adding browser-specific stylesheets to Thematic

(5 posts)
  • Started 3 years ago by allyoop
  • Latest reply from allyoop
  • This topic is resolved
  1. allyoop
    Member

    I'm building a site using the Thematic framework. The site works fine in browsers like Firefox and Chrome, but needs a few small tweaks in Internet Explorer 8 and the Safari/iPad view. I know how to direct a straight HTML site to use an IE stylesheet using a conditional statement, but Thematic's use of multiple .php and .css files confuses me as to where to make this statement (and whether placing it before or after calls to style.css, default.css, etc. changes how successfully it works--does it need to be called before or after my normal stylesheets?)
    Could anyone direct me as to how and in what file to place a conditional stylesheet within the Thematic framework? Thanks!

    Posted 3 years ago #
  2. You won't need to use Conditional Comments with Thematic for CSS.

    Thematic uses dynamic body classes, mine is below.

    <body class="home page page-id-4 page-template page-template-front-page-php windows firefox ff5">

    Because the body tag reads I am using Firefox, you can do a Firefox specific fix by just targeting that class.

    .firefox .menu { css for firefox only here }
    .ff5 .menu { css for firefox version 5 only here }

    Same works for IE, so if I was lame and used IE the body class would read ie6, you could just target fixes that way.

    .ie6 .menu { css for ie6 fixes }

    Since it is in the body you can target anything through CSS. Also you ask where to actually apply the changes, I would stick the fixes in the style.css right underneath whatever section they go with. So if the fix you needed for IE6 was a menu, stick it underneath the rest of the menu CSS just to keep it organized, no extra files needed.

    Now if you are trying to send specific JS or something, then yes, conditinal comments would be needed. At which point I would suggest checking out http://forums.themeshaper.com/topic/best-way-to-add-additional-jquery-scripts

    Posted 3 years ago #
  3. body classes are great, though i think you can get tripped up if you serve cached versions of your site. adding a conditional comment isn't different, you just need to add it to the right hook. wp_head should be fine in this case.

    add this to your child's functions.php:

    function add_conditional(){ ?>
    <!--[if IE]-->
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/all-ie-only.css" />
    <!--[endif]-->
    <?}
    add_action('wp_head','add_conditional');
    Posted 3 years ago #
  4. allyoop
    Member

    Thanks, Helga and Scott, for your quick answers! I'll report back after I've tried them.

    Posted 3 years ago #
  5. allyoop
    Member

    I was having trouble implementing dynamic classes, but your great advice plus the following two links helped me to success:
    http://forums.themeshaper.com/topic/dynamic-classes-include-slug#post-1199
    http://themeshaper.com/thematic/guide/?page_id=64#Using%20the%20body%20class (scroll down to read about dynamic body classes)

    Thanks, all, for your kind help!

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.