ThemeShaper Forums Tag: header

ThemeShaper Forums Tag: header http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sat, 04 Feb 2012 04:08:30 +0000 ScottNix on "HTML5 Boilerplate Header with Thematic" http://themeshaper.com/forums/topic/html5-boilerplate-header-with-thematic#post-25173 Sat, 04 Feb 2012 00:55:51 +0000 ScottNix 25173@http://themeshaper.com/forums/ To get the Modernizr script, go make a custom build <a href="http://www.modernizr.com/download/">here</a>. Add this snippet to functions.php <pre><code>// script manager template for deregestering and registering scripts. function childtheme_script_manager() { // wp_enqueue_script template ( $handle, $src, $deps, $ver, $in_footer ); // deregister standard jquery wp_deregister_script('jquery'); // loads modernizr-js script, local path, no dependency, no version, loads in header wp_enqueue_script('modernizr-js', get_bloginfo('stylesheet_directory') . '/js/modernizr.js'); // loads jqery script, from google cdn url, no dependency, yes version, loads in footer wp_enqueue_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1', true); } add_action('wp_enqueue_scripts', 'childtheme_script_manager');</code></pre> Put the script in a folder of /js/ in your child theme, name the script modernizr.js. The little snippet above will also turn off the normal jQuery that comes with WP/Thematic and instead load it from the Google CDN which will be enqueued in the footer. Modernizr however will be loaded in the head as required in the docs. For more info/links, check <a href="http://scottnix.com/2012/adding-modernizr-to-thematic/">my post.</a> ScottNix on "HTML5 Boilerplate Header with Thematic" http://themeshaper.com/forums/topic/html5-boilerplate-header-with-thematic#post-25109 Tue, 31 Jan 2012 02:10:04 +0000 ScottNix 25109@http://themeshaper.com/forums/ You are right, a caching plugin won't effect it at all because it is based on the browser. Thematic should actually use this style instead in my opinion, minus the .no-js class which is modernizr specific. I also tested this on the SVN version of Thematic and it works fine but it looks like there is no longer a <code>"\n\t"</code> needed to move the meta charset if you want it to look pretty. ;) helgatheviking on "HTML5 Boilerplate Header with Thematic" http://themeshaper.com/forums/topic/html5-boilerplate-header-with-thematic#post-25092 Mon, 30 Jan 2012 19:32:32 +0000 helgatheviking 25092@http://themeshaper.com/forums/ scott, any idea how well these work with the use of an aggressive caching plugin? i am guessing they'll still do fine b/c it is always in the markup and depends completely on the browser. any experience to the contrary? helgatheviking on "Full Screen Header/Body/Footer Image" http://themeshaper.com/forums/topic/full-screen-headerbodyfooter-image#post-24920 Mon, 16 Jan 2012 19:37:35 +0000 helgatheviking 24920@http://themeshaper.com/forums/ sorry, don't follow you. can't you just put 1 large background on the body? or #wrapper? perhaps you could create a diagram or screenshot to better explain. crashprojects on "Full Screen Header/Body/Footer Image" http://themeshaper.com/forums/topic/full-screen-headerbodyfooter-image#post-24916 Mon, 16 Jan 2012 04:20:20 +0000 crashprojects 24916@http://themeshaper.com/forums/ I'm building on Thematic, and I'd like to use a background image for my entire site; header, body, and footer. I'd like to utilize all of the screen real estate, and not just the real estate specified in the thematic dimensions. Can anyone tell me: a: what dimensions should I use in the creation of the image? b: how do I go about implementing use of the image? Also, I'd settle for being able to use 3 separate images for header, body, and footer as long as they used up all the screen real estate and not just that weird center area that gets inhabited when I use a banner in place of the blog title. I hope I'm explaining this correctly. Thank you for reading. dazlm on "Header - Delete Blog Title and Description" http://themeshaper.com/forums/topic/header-delete-blog-title-and-description#post-24751 Mon, 09 Jan 2012 05:51:44 +0000 dazlm 24751@http://themeshaper.com/forums/ Who are you people... and why do you keep solving my problems? :) Thanks for this code! violetabella on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24729 Sun, 08 Jan 2012 05:13:33 +0000 violetabella 24729@http://themeshaper.com/forums/ 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.. helgatheviking on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24728 Sun, 08 Jan 2012 05:08:08 +0000 helgatheviking 24728@http://themeshaper.com/forums/ ok, not sure what you needed then. anyway, thought that was you following me. hope i don't bore you to tears violetabella on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24727 Sun, 08 Jan 2012 04:38:05 +0000 violetabella 24727@http://themeshaper.com/forums/ 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 ;) helgatheviking on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24726 Sun, 08 Jan 2012 04:33:51 +0000 helgatheviking 24726@http://themeshaper.com/forums/ 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? <pre><code><ul id="menu" class="sf-menu"</code></pre> violetabella on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24725 Sun, 08 Jan 2012 04:27:03 +0000 violetabella 24725@http://themeshaper.com/forums/ 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? <pre><code><ul id="menu"> <li><a href="#">facebook </a></li> <li><a href="#">twitter </a></li> <li><a href="#">youtube </a></li> <li><a href="#">linked in </a></li> <li><a href="#">rss </a></li></code></pre> ScottNix on "HTML5 Boilerplate Header with Thematic" http://themeshaper.com/forums/topic/html5-boilerplate-header-with-thematic#post-24703 Fri, 06 Jan 2012 22:16:10 +0000 ScottNix 24703@http://themeshaper.com/forums/ The Man, The Myth, The Legend Paul Irish added a link to this snippet as a resource on his <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">conditional class article</a>. I was pretty excited about that, then I went through a phase where I was super impressed the guy keeps the info up to date on a article from 2008 which is pretty bad ass. Thanks for answering the basics of <a href="http://www.modernizr.com/download/">Modernizr</a> middlesister, also a handy thing it does is you can load the IE shim/shiv through it and also use the media queries polyfill for IE6/7&8. It has a sick build interface so you can only include what you need, it gets compacted and you load it through one script. It is just so clean for more modern sites. For Thematic, I just use it for the CSS classes it adds to provide graceful fallback support for CSS (middlesister's first example). helgatheviking on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24651 Thu, 05 Jan 2012 03:04:46 +0000 helgatheviking 24651@http://themeshaper.com/forums/ 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 violetabella on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24646 Thu, 05 Jan 2012 01:10:57 +0000 violetabella 24646@http://themeshaper.com/forums/ Thanks so much, it worked ;) helgatheviking on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24643 Wed, 04 Jan 2012 23:01:56 +0000 helgatheviking 24643@http://themeshaper.com/forums/ violeta, you can echo whatever you want in proto's code, so you can nest as many divs as you'd like. <pre><code>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');</code></pre> violetabella on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24641 Wed, 04 Jan 2012 21:52:49 +0000 violetabella 24641@http://themeshaper.com/forums/ It worked, thank you!!! One last question on this- is there a way to insert a smaller div inside of this new div? proto on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24637 Wed, 04 Jan 2012 20:46:26 +0000 proto 24637@http://themeshaper.com/forums/ 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! <pre><code>// 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');</code></pre> violetabella on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24633 Wed, 04 Jan 2012 19:43:55 +0000 violetabella 24633@http://themeshaper.com/forums/ 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. ;) proto on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24622 Wed, 04 Jan 2012 11:43:53 +0000 proto 24622@http://themeshaper.com/forums/ 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: <pre><code>// 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');</code></pre> 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: <pre><code>// Action hook for placing content above header function webmagic_divbefore_header() { echo('<div id="yourdivname">') ;} add_action ('thematic_aboveheader', 'webmagic_divbefore_header');</code></pre> 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). violetabella on "New Div Above Header" http://themeshaper.com/forums/topic/new-div-above-header#post-24619 Wed, 04 Jan 2012 05:00:12 +0000 violetabella 24619@http://themeshaper.com/forums/ Hi- I'm wondering how to add a new division above the header division. Thanks!! middlesister on "HTML5 Boilerplate Header with Thematic" http://themeshaper.com/forums/topic/html5-boilerplate-header-with-thematic#post-24609 Tue, 03 Jan 2012 22:25:07 +0000 middlesister 24609@http://themeshaper.com/forums/ Well the idea is of course that you get a whole lot of html classes based on whether a browser supports a feature. So you could have <pre><code>body { background-image: url(first.png), url(second.png); } .no-multiplebgs body { background-image: url(alternative.png) }</code></pre> True, I guess if you don't bother with IE8 and older, a lot of the css3 is well supported anyway across the board so it might be a bit overkill. Though you could use it for something like making links or buttons bigger on touchscreens: <pre><code>#button { /* nice rounded corner button */ } .touch #button { /* make button bigger - easier to hit with fingers */ }</code></pre> Maybe the bigger use would be to have all those variable accessible via javascript: <pre><code>if (Modernizr.touch) { $(el).click(stuff); $(el).click(stuff); } else { $(el).mouseover(stuff); $(el).mouseover(stuff); }</code></pre> (see the better alternative code at <a href="http://stackoverflow.com/questions/5985430/different-methods-based-on-modernizr-click-vs-hover" rel="nofollow">http://stackoverflow.com/questions/5985430/different-methods-based-on-modernizr-click-vs-hover</a>) @scott: great tip! elizabethr4 on "Question about removing code from header" http://themeshaper.com/forums/topic/question-about-removing-code-from-header#post-24580 Tue, 03 Jan 2012 17:18:36 +0000 elizabethr4 24580@http://themeshaper.com/forums/ Follow up questions (and I will mark this resolved): What is the advantage of doing those sorts of changes (different html for a second header file) through the functions.php file over just writing the html in the header file? And second, where does the html mark up go? In the code in the functions.php file? I know of many changes that can be made through CSS, but if there's a paragraph of live text, with a link, into which file does that code go? Thanks, just trying to understand more about Thematic overall! elizabethr4 on "Question about removing code from header" http://themeshaper.com/forums/topic/question-about-removing-code-from-header#post-24579 Tue, 03 Jan 2012 17:13:44 +0000 elizabethr4 24579@http://themeshaper.com/forums/ Thanks for taking a look! That was my dilema - should it be done through functions.php - but I was unsure of how to specify/differentiate the two page templates with the two headers (page.php with header.php and page-template-home.php with header-home.php) in the code in the functions file. Seemed a little over my head, so I took the "easy" way out. Just wanted to make sure that cutting a little PHP: <pre><code>thematic_header();</code></pre> wouldn't cause an issue later. Next time, I'll try to learn more about using functions.php! Thanks! helgatheviking on "HTML5 Boilerplate Header with Thematic" http://themeshaper.com/forums/topic/html5-boilerplate-header-with-thematic#post-24572 Tue, 03 Jan 2012 16:00:27 +0000 helgatheviking 24572@http://themeshaper.com/forums/ neat work scott. i've been playing around w/ using boilerplate w/ my own projects. i really like the IE classes, and am leaning more and more towards serving IE8 and older a single, simplified layout and server the regular layout via media query à la: <a href="http://jonikorpi.com/leaving-old-IE-behind/" rel="nofollow">http://jonikorpi.com/leaving-old-IE-behind/</a> what is the benefit of modernizr? just wondering if i should bother w/ it, esp if i don't serve anything interesting to IE ScottNix on "Question about removing code from header" http://themeshaper.com/forums/topic/question-about-removing-code-from-header#post-24567 Tue, 03 Jan 2012 03:48:45 +0000 ScottNix 24567@http://themeshaper.com/forums/ Nice job on getting the sites to match up. It looks like you moved the #access menu outside the header which is smart. That would of been the one thing I would have suggested, but you already took care of that. Really there are no issues you have to worry about. There are other ways to do it where you could do it all through your functions.php file, but in this case I can't think of a reason to do that if you already have it working correctly. ScottNix on "HTML5 Boilerplate Header with Thematic" http://themeshaper.com/forums/topic/html5-boilerplate-header-with-thematic#post-24566 Tue, 03 Jan 2012 03:40:24 +0000 ScottNix 24566@http://themeshaper.com/forums/ I had a project where I needed Modernizr, so I added a no-js class to the html file, but the way I was prevously doing it is I would pull in the header.php into my child theme and comment out 2 lines, it felt dirty, so I fixed it so it now works from the functions.php file only. HTML5 Boilerplate Style <pre><code>// creates the doctype section ( html5 boilerplate style ) function childtheme_create_doctype() { $content = "<!doctype html>" . "\n"; $content .= '' . "\n"; $content .= ''. "\n"; $content .= '' . "\n"; $content .= "" . "\n"; $content .= "<html class=\"no-js\""; return $content; } add_filter('thematic_create_doctype', 'childtheme_create_doctype'); // creates the head and meta charset tags function childtheme_head_profile() { $content = ""; $content .= "\n" . "<head>" . "\n"; $content .= "\n\t" . "<meta charset=\"utf-8\">" . "\n\n"; return $content; } add_filter('thematic_head_profile', 'childtheme_head_profile'); // remove meta charset tag, now in the above function function childtheme_create_contenttype() { // silence } add_filter('thematic_create_contenttype', 'childtheme_create_contenttype');</code></pre> Ouputs in the Header <pre><code><!doctype html>     <html class="no-js" dir="ltr" lang="en-US">  <head> <meta charset="utf-8"> <title>Dev Site | Just another WordPress site</title></code></pre> I also made another "cleaner" HTML5 header which also has the no-js class and just has 1 class of ".ie" for IE6, IE7 and IE8 and is more intended for sites that don't care about supporting IE6. If you are good at CSS and tend to never need IE specific CSS you might want to try the other version <a href="http://scottnix.com/2012/html5-header-with-thematic/" rel="nofollow">http://scottnix.com/2012/html5-header-with-thematic/</a> Eventually I will get around to cleaning up some stuff and post the information on how to get Modernizr on a Thematic theme here too (which is cake) but I just have to write it up. Any suggestions/changes/thoughts are welcome, thanks. elizabethr4 on "Question about removing code from header" http://themeshaper.com/forums/topic/question-about-removing-code-from-header#post-24565 Tue, 03 Jan 2012 03:06:00 +0000 elizabethr4 24565@http://themeshaper.com/forums/ Sorry, I don't have backticks on my keyboard - the code is supposed to be highlighted. Thanks! elizabethr4 on "Question about removing code from header" http://themeshaper.com/forums/topic/question-about-removing-code-from-header#post-24564 Tue, 03 Jan 2012 03:05:18 +0000 elizabethr4 24564@http://themeshaper.com/forums/ Hi all, I'm new to Thematic, but so far doing okay at making a static site (http://www.buunnicoffee.com/) into a Wordpress site: <a href="http://buunnicoffee.com/testing2/" rel="nofollow">http://buunnicoffee.com/testing2/</a> I have two different headers, one for the home page (header-home.php) and one for the subpages (header.php). I successfully implemented this, and it's actually working as I want it to (yay!) but I took out a bit of code from the header file and I don't know if it will mess me up later. Basically, I couldn't understand how/where to add my desired html (not just images, but live text too) into my new header-home.php file in my child theme. I didn't know how to differentiate the two headers in the functions file, if necessary. Anyway, so I just thought, let me just add my html and see what happens - and it worked! BUT - I took out the following from my new header file: <div id="header"> <?php // action hook creating the theme header thematic_header(); ?> </div> And put in: <div id="header2"> all my html code </div> As I said, it's working fine - but is taking out that bit of php going to cause me a problem later? I didn't want it to get the other header, but maybe there's something that should go in the functions.php file for this template page where the second header is called? Any insight would be greatly appreciated! helgatheviking on "Different Header Images per Page" http://themeshaper.com/forums/topic/different-header-images-per-page#post-24563 Tue, 03 Jan 2012 02:33:59 +0000 helgatheviking 24563@http://themeshaper.com/forums/ so much love. you're welcome. can you mark the topic as resolved if we've sorted it out? lance1572 on "Different Header Images per Page" http://themeshaper.com/forums/topic/different-header-images-per-page#post-24560 Tue, 03 Jan 2012 01:07:27 +0000 lance1572 24560@http://themeshaper.com/forums/ Can I just say that I LOVE YOU!!!! Thank you for the help!!!!!