ThemeShaper Forums » Thematic

Styling belowheader

(12 posts)
  • Started 11 years ago by waseem
  • Latest reply from Ian Stewart
  • This topic is resolved
  1. Hey
    So I'm trying the below header in the functions.php of my child theme and im wondering how you can style it. Can you import a css file or directly style from within the document.

    I also have a question on how to create an image nav menu, would you do this in the child theme and how would you go about it.

    thanks

    Posted 11 years ago #
  2. Anything inserted into the template via thematic_belowheader() can be styled from the style.css in your Child Theme directory.

    Yep. You can make a image-based menu using your Child Theme.

    Here's a tutorial by Doug Bowman, the designer that first figured out how to do a standards-based menu using CSS …

    http://www.alistapart.com/articles/slidingdoors/

    And here's a few more examples …

    http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/

    You'll have to adapt the CSS in the examples above for Thematic. It won't be hard.

    Posted 11 years ago #
  3. Thanks Ian this will really help, I'm doing a summer project for a nonprofit organization to get community service hours to graduate. I'll post my final design as soon as possible. I am actually more experienced with Flash design than css and php. are there and id selectors for styling the below header in the style.css or would you declare the ids when you're coding it. What I'm trying to do is create a secondary header in the thematic_belowheader(), so would I create a div and give it an id which I can use to style it?

    Thanks again!

    Posted 11 years ago #
  4. You've got it. There's nothing in there. You add your own ids and classes.

    Posted 11 years ago #
  5. Thanks!
    Here is what I'm experimenting with right now. I'm going to try use this conditional statement to display the custom header for each different page.

    function childtheme_helloworld() { ?>
    
    	<?php if (is_front_page()) { ?>
    <div id=”header”> </div>
    
    <?php } else if(is_page[2]) { ?>
    <div id=”about”> </div> 
    
    <?php } else if(is_page[3]) { ?>
    <div id=”team”> </div> 
    
    <?php } else if(is_page[4]) { ?>
    <div id=”contact”> </div> 
    
    <?php } 
    
    ?>
    
    <?php }
    add_action('thematic_belowheader','childtheme_helloworld');

    I'll put it into below header and test it out. What do you think?

    Posted 11 years ago #
  6. Looks good. I think it's is_page('4') though (I could be wrong). Anyway, I prefer is_page('about-me'). That way I can remember later what I was writing.

    And I'd change the function name. ;)

    Posted 11 years ago #
  7. Oh nooo!!
    I updated the files and activated it but now all I see on their website is a blank white page! socoba dot org do you know what I can do? maybe I should reupload the old functions.php

    Posted 11 years ago #
  8. That would be the PHP white screen of death. Upload the old functions.php.

    Posted 11 years ago #
  9. Also, test locally before you try something live.

    http://www.wampserver.com/en/

    http://www.mamp.info/en/index.php

    Posted 11 years ago #
  10. And while you're testing locally, turn on PHP error reporting. Very helpful.

    Posted 11 years ago #
  11. Ahhh darn dreamweaver, I clicked validate document and it told me there were no mistakes.
    I tried to download wamp and mamp before to test my wordpress themes but it never worked for me. Ill try it again soon and see if it works. I actually used the theme preview in wordpress and it showed a white screen but I thought it wasn't functioning right. Could you validate it for me If you have wamp already? Here is the php
    `<?php

    function childtheme_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
    <?php }

    add_action('wp_head', 'childtheme_favicon');

    // Hook into the area below the header
    function secondary_header() { ?>

    <?php if (is_front_page()) { ?>
    <div id=”bghome”> </div>

    <?php } else if(is_page['about']) { ?>
    <div id=”about”> </div>

    <?php } else if(is_page['team']) { ?>
    <div id=”team”> </div>

    <?php } else if(is_page['contact']) { ?>
    <div id=”contact”> </div>

    <?php

    ?>

    <?php }
    add_action('thematic_belowheader','secondary_header');

    ?>

    '

    Posted 11 years ago #
  12. Another thing you can do is test on a subdomain, like test dot socoba dot org. Or in a subdirectory like socoba dot org slash testsite.

    Posted 11 years ago #

RSS feed for this topic

Reply

You must log in to post.