ThemeShaper Forums Tag: div

ThemeShaper Forums Tag: div http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Tue, 21 May 2013 04:08:38 +0000 webmakerholly on "Thematic Structure Diagram - widget areas included" http://themeshaper.com/forums/topic/thematic-structure-diagram-widget-areas-included/page/2#post-25794 Thu, 08 Mar 2012 20:32:29 +0000 webmakerholly 25794@http://themeshaper.com/forums/ Thanks! I wish I saw this post a year ago when i started using Thematic. It would have spared me a LOT of frustration. 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> helgatheviking on "Insert new html somewhere in Thematic header (using a hook?)" http://themeshaper.com/forums/topic/insert-new-html-somewhere-in-thematic-header-using-a-hook#post-24707 Sat, 07 Jan 2012 00:21:52 +0000 helgatheviking 24707@http://themeshaper.com/forums/ how to use an action hook: <a href="http://themeshaper.com/forums/topic/need-help-understanding-actions-vs-filters-and-changing-post-meta-and-utility#post-22638" rel="nofollow">http://themeshaper.com/forums/topic/need-help-understanding-actions-vs-filters-and-changing-post-meta-and-utility#post-22638</a> TyeNewton on "Insert new html somewhere in Thematic header (using a hook?)" http://themeshaper.com/forums/topic/insert-new-html-somewhere-in-thematic-header-using-a-hook#post-24706 Fri, 06 Jan 2012 22:36:53 +0000 TyeNewton 24706@http://themeshaper.com/forums/ Okay, I'm trying to understand hooks, but I just don't know PHP at all yet. I really want to try to ask as few questions as possible as I learn this stuff, but maybe that's silly... Also, someone else might just find what I'm trying to do interesting... maybe. ; ) Anyway, I have a specific goal, and I only have a vague notion of how it's done: I'm pretty sure I want to use an action hook (or perhaps I need a filter hook) to place a couple div tags within the thematic header. My specific goal is to create an alternating masthead graphic, utilizing <a href="http://css-tricks.com/webkit-image-wipes/">Chris Coyier's CSS trick for webkit image wipes</a> (I realize I will have to come up with an alternative for non-webkit browsers... One step at a time.) Ideally, the two alternating mastheads would still be clickable links, and ultra-ideally, they'd each link to separate URLs! (Again, one step at a time.) I guess I'm just looking for a straight answer about how exactly I use PHP to insert code into the header (probably the blog-title area?). I just recently used an action hook, for the first time, to move #access from one place to another; now I'm thinking I need to do something similar here, but I'm creating new html this time. Thanks so much for any and all tips! Javi A. on "Thematic Structure Diagram - widget areas included" http://themeshaper.com/forums/topic/thematic-structure-diagram-widget-areas-included/page/2#post-24661 Thu, 05 Jan 2012 12:25:35 +0000 Javi A. 24661@http://themeshaper.com/forums/ Hi, I´m starting design & development Wordpress sites with Thematic & Acamas. Thank you dwenaus, sfrangos and Jonny Janiero. Your contributions really helps me to switch between visual design and code. Thanks a lot! 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. ;) em hr on "Thematic Structure Diagram - widget areas included" http://themeshaper.com/forums/topic/thematic-structure-diagram-widget-areas-included/page/2#post-24623 Wed, 04 Jan 2012 14:02:00 +0000 em hr 24623@http://themeshaper.com/forums/ Thanks Scott! That's awesome :) 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!! sfrangos on "Thematic Structure Diagram - widget areas included" http://themeshaper.com/forums/topic/thematic-structure-diagram-widget-areas-included/page/2#post-24544 Sun, 01 Jan 2012 21:16:23 +0000 sfrangos 24544@http://themeshaper.com/forums/ Hi Stu - Glad it helps. I have to credit Chris, Gene, Kathy, and probably others who have contributed to my own understanding of Thematic... PLUS -- Mr. Stewart who launched all. Cheers - Scott stusequ on "Thematic Structure Diagram - widget areas included" http://themeshaper.com/forums/topic/thematic-structure-diagram-widget-areas-included/page/2#post-24536 Sun, 01 Jan 2012 03:51:16 +0000 stusequ 24536@http://themeshaper.com/forums/ Wow, sfrangos, this rocks. Very helpful - thanks! Stu sfrangos on "Thematic Structure Diagram - widget areas included" http://themeshaper.com/forums/topic/thematic-structure-diagram-widget-areas-included/page/2#post-24519 Sat, 31 Dec 2011 01:48:08 +0000 sfrangos 24519@http://themeshaper.com/forums/ Hello All - There's a diagram, in part based on what people have generously contributed before, for all here: <a href="http://thematicmondo.com/wp-content/guides/ThematicMondoGuide-1.pdf">http://thematicmondo.com/wp-content/guides/ThematicMondoGuide-1.pdf</a> More planned. Cheers & Happy New Year... let's make 2012 the year Thematic Surges - Scott helgatheviking on "Wrap #primary in a new Div" http://themeshaper.com/forums/topic/wrap-primary-in-a-new-div#post-24313 Thu, 15 Dec 2011 02:25:00 +0000 helgatheviking 24313@http://themeshaper.com/forums/ it's bloated b/c you don't need 2 functions to hook into thematic_abovemainasides. if you need 2 divs, just put them both in one function. Gigi on "Wrap #primary in a new Div" http://themeshaper.com/forums/topic/wrap-primary-in-a-new-div#post-24312 Thu, 15 Dec 2011 02:22:01 +0000 Gigi 24312@http://themeshaper.com/forums/ Well I found a way but I'm not sure if it's bloated or not. This is what I have: <pre><code>// ADD DIV ABOVE AND BELOW PRIMARY ASIDE STARTS HERE // Begin div ABOVE primary aside function start_aside_top() { ?>  <div id="aside-wrap-top"> <?php } // end of our new function start_aside_top // Add starting div to above primary aside add_action('thematic_abovemainasides','start_aside_top'); // Begin closing div to above primary aside function end_aside_top() { ?> </div>  <?php } // end of our new function end_aside_top add_action('thematic_abovemainasides','end_aside_top'); // Begin div BELOW primary aside function start_aside_bottom() { ?>  <div id="aside-wrap-bottom"> <?php } // end of our new function start_aside_bottom // Add starting div add_action('thematic_betweenmainasides','start_aside_bottom'); // Begin closing div function end_aside_bottom() { ?> </div>  <?php } // end of our new function end_aside_bottom // Add closing div add_action('thematic_betweenmainasides','end_aside_bottom'); // ADD DIV ABOVE AND BELOW PRIMARY ASIDE ENDS HERE</code></pre> Gigi on "Wrap #primary in a new Div" http://themeshaper.com/forums/topic/wrap-primary-in-a-new-div#post-24310 Thu, 15 Dec 2011 00:16:28 +0000 Gigi 24310@http://themeshaper.com/forums/ Is there any way to see the code for Helga's suggestion: "open the div on the thematic_abovemainasides hook and close the div on the thematic_betweenmainasides hook." I tried a couple of ways but came up empty handed... helgatheviking on "Strange div position" http://themeshaper.com/forums/topic/strange-div-position#post-23850 Thu, 17 Nov 2011 23:05:32 +0000 helgatheviking 23850@http://themeshaper.com/forums/ must not still be there? i don't see anything in red. Sabra on "Strange div position" http://themeshaper.com/forums/topic/strange-div-position#post-23841 Thu, 17 Nov 2011 11:42:35 +0000 Sabra 23841@http://themeshaper.com/forums/ I can't for the life of me figure out why my second (in red) div has a distance to the menu div above it. Can anyone help me out here, it's driving me nuts: <a href="http://www.dotsconnected.nl/diensten/" rel="nofollow">http://www.dotsconnected.nl/diensten/</a> Thanks, Sabra scott_see on "Thematic Structure Diagram - widget areas included" http://themeshaper.com/forums/topic/thematic-structure-diagram-widget-areas-included/page/2#post-23597 Tue, 25 Oct 2011 00:12:38 +0000 scott_see 23597@http://themeshaper.com/forums/ dwenaus, Wow, thank you!!! Scott See drsethery on "Adding divs to the #header" http://themeshaper.com/forums/topic/adding-divs-to-the-header#post-22891 Mon, 29 Aug 2011 16:47:10 +0000 drsethery 22891@http://themeshaper.com/forums/ Got it, thanks for the references! helgatheviking on "Adding divs to the #header" http://themeshaper.com/forums/topic/adding-divs-to-the-header#post-22803 Mon, 22 Aug 2011 15:00:53 +0000 helgatheviking 22803@http://themeshaper.com/forums/ my "primer" on adding, removing functions, and filtering: <a href="http://themeshaper.com/forums/topic/need-help-understanding-actions-vs-filters-and-changing-post-meta-and-utility#post-22638" rel="nofollow">http://themeshaper.com/forums/topic/need-help-understanding-actions-vs-filters-and-changing-post-meta-and-utility#post-22638</a> moving stuff around in the header <a href="http://themeshaper.com/forums/topic/move-header-above-wrapper-in-functionsphp" rel="nofollow">http://themeshaper.com/forums/topic/move-header-above-wrapper-in-functionsphp</a> drsethery on "Adding divs to the #header" http://themeshaper.com/forums/topic/adding-divs-to-the-header#post-22795 Mon, 22 Aug 2011 04:09:45 +0000 drsethery 22795@http://themeshaper.com/forums/ I would like to have #branding and #access floated left and right in the header respectively. Above that I need to create a narrow div that will house a latest tweet (which will be the same width as #branding, and another narrow div directly above #access to house share icons. Visual - <a href="http://img.photobucket.com/albums/v331/darktiger_64/Picture1-2.png" rel="nofollow">http://img.photobucket.com/albums/v331/darktiger_64/Picture1-2.png</a> I am wondering how to approach doing this. Should I use thematic_header() or thematic_aboveheader() to create two new divs. I assume I would use these action hooks to create divs with php inside functions.php correct? Is that the right way to approach this or does anyone recommend another method? Thanks in advance!