ThemeShaper Forums » Thematic

[closed]

New Div Above Header

(13 posts)
  • Started 2 years ago by violetabella
  • Latest reply from violetabella
  • This topic is resolved
  1. violetabella
    Member

    Hi- I'm wondering how to add a new division above the header division. Thanks!!

    Posted 2 years ago #
  2. proto
    Member

    Hello violetabella,

    You can do this by hooking onto one of Thematic's many hooks. Assuming you're new to this (apologies if you're not) Thematic comes with lots of hooks where you optionally add content / markup etc to. These hooks are like pieces of velcro and if you enter the right code you hook onto these velcro hooks markup and content.

    I might add there are many people on here who are more experienced than me who might have a better suggestion but one way you can do this is to add your div to one of the velcro 'hooks' that are located before the header. In thematic's case this is called "thematic_aboveheader();"

    So your code might look like this:

    // Action hook for placing content above header
    
    function webmagic_divbefore_header() {
    	echo('<div id="yourdivname">Here's your new Div!</div>') ;}
    
    add_action ('thematic_aboveheader', 'webmagic_divbefore_header');

    The "webmagic_divbefore_header" with a unique name, perhaps something like 'webmagic' (sub in your own name) to ensure it doesn't conflict with any of wordpress native commands.

    If you wanted to have a div that JUST STARTED BEFORE the header but CARRIED ON you'd adjust the code slightly:

    // Action hook for placing content above header
    
    function webmagic_divbefore_header() {
    	echo('<div id="yourdivname">') ;}
    
    add_action ('thematic_aboveheader', 'webmagic_divbefore_header');

    But then you'd need to close this div where you wanted it to end (eg end of the website) etc. This can be done either through another of Thematic's hooks (the velcro bits we talked about earlier). There are many other velcro type hooks in the footer, for example. To find out where the hooks are have a look in the Thematics 'header.php' and 'footer.php' and other files, you'll see them there, adjust the code accordingly and you could add in a closing div for your new div.

    Obviously then you can style away with CSS targeting your new div's name.

    Like I said many more people on here a lot better than me who might have a better suggestion but that's one way of doing it!

    **You'd place the code snippets above in your child theme's functions.php file. Child themes are the way to go as your site can update but retain all your unique customisations.

    If this resolved your query please mark as resolved (near the top of the page in the drop down menu).

    Posted 2 years ago #
  3. violetabella
    Member

    Hi!

    When I try to use the first code snippet, I get the php white screen of death lol. Am I doing something wrong? The second code worked fine however...

    Thanks so much for explaining this, I'm still trying to learn php. ;)

    Posted 2 years ago #
  4. proto
    Member

    Hello Violetbella,

    I think in the example I hadn't escaped the apostrophe, I've re-tested this a load of times and it should work fine to add in a complete div above your header. Take out the containing "Here\'s your new Div!" text if you don't want that appearing above your header for example!

    copy and paste as below and it should work fine!

    // Action hook for placing content above header
    
    function webmagic_divbefore_header() {
    	echo('<div id="yourdivname">Here\'s your new Div!</div>') ;}
    
    add_action ('thematic_aboveheader', 'webmagic_divbefore_header');
    Posted 2 years ago #
  5. violetabella
    Member

    It worked, thank you!!!

    One last question on this- is there a way to insert a smaller div inside of this new div?

    Posted 2 years ago #
  6. violeta, you can echo whatever you want in proto's code, so you can nest as many divs as you'd like.

    function webmagic_divbefore_header() {
    	echo '<div id="yourdivname"><div id="bnacon">Here\'s your new Div!</div></div>' ;
    }
    
    add_action ('thematic_aboveheader', 'webmagic_divbefore_header');
    Posted 2 years ago #
  7. violetabella
    Member

    Thanks so much, it worked ;)

    Posted 2 years ago #
  8. you can put your menu in that function too. no need for your own customized header.php and definitely no need to hack thematic's header.php

    Posted 2 years ago #
  9. violetabella
    Member

    I tried putting the menu inside of the new div, but it's not being styled the same as when I have it in header.php. Where would I put this in? When I tried to put it in the code above, it acted wonky.. maybe I am putting it in the wrong place?

    <ul id="menu">
    
    <li><a href="#">facebook <span></span></a></li>
    <li><a href="#">twitter <span></span></a></li>
    <li><a href="#">youtube <span></span></a></li>
    <li><a href="#">linked in <span></span></a></li>
    <li><a href="#">rss <span></span></a></li>
    Posted 2 years ago #
  10. please put your code between backtick marks. i did it for you (because i have that kind of power now... mbwahah!), b/c it was breaking the site (since you are posting html).. but i think part of your code was lost.

    are you expecting this menu to look the same as the default menu? all the default styling for a ul with the class of sf-menu (look at default.css) so since yours is lacking that class it will never pick up the default styling.

    what about?

    <ul id="menu" class="sf-menu"
    Posted 2 years ago #
  11. violetabella
    Member

    Oops! Sorry about that!

    nope, this menu is not going to look anything like the sf menu... it's really just social media icons that i need to place above the branding and access..

    (p.s. I added you on twitter- you're seriously my thematic/php idol ;)

    Posted 2 years ago #
  12. ok, not sure what you needed then. anyway, thought that was you following me. hope i don't bore you to tears

    Posted 2 years ago #
  13. violetabella
    Member

    Ha! Hope I don't pester you to death on here ;)

    Is there an easier way to add those icons to the new div without being in an unordered list? Just as images maybe? I guess I'm just confused at where to insert things into these new divs...

    Or, new divs for each icon? Hmm..

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.