Support Forum - Topic: Add Search and Social to the Header

Support Forum - Topic: Add Search and Social to the Header http://www.kriesi.at/support/topic/add-search-and-social-to-the-header Support Forum - Topic: Add Search and Social to the Header en-US Thu, 23 May 2013 17:08:19 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-51941 Tue, 17 Apr 2012 00:26:14 +0000 Ismael 51941@http://www.kriesi.at/support/ Hey, That's great! Glad we could help you. :) Cheers, Ismael shelteredinsound on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-51815 Mon, 16 Apr 2012 14:13:58 +0000 shelteredinsound 51815@http://www.kriesi.at/support/ Thanks! I had to make a few extra little tweaks to get what I wanted but your direction really helped. Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-51162 Wed, 11 Apr 2012 13:15:29 +0000 Ismael 51162@http://www.kriesi.at/support/ Hi, Inside the Propulsion folder, kindly open the css folder and find layout.css. Find this code: <code>@media only screen and (max-width: 767px)</code> Below it you can find this line: <code>#top .logo{float:none; margin:0 auto; display: block; text-align: center; width:100%;}</code> Remove the text-align: center; And add this below: <code>.mod-search > ul.social_bookmarks { top: 10px!important; right: 0; }</code> Just change the top and right value as required. Hope this helps. :) Best Regards, Ismael shelteredinsound on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-51090 Wed, 11 Apr 2012 00:39:36 +0000 shelteredinsound 51090@http://www.kriesi.at/support/ Thanks. We are indeed getting closer as the search bar now reacts nicely to the responsive design but the search and social media buttons are still overlapping with the main logo. Ideas to have them coexist when the site is squeezed? Can't confirm your IE9 fix as I don't have access to a PC. Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-51036 Tue, 10 Apr 2012 20:34:39 +0000 Ismael 51036@http://www.kriesi.at/support/ Hi shelteredinsound, I apologize I was looking at Chris site(http://dev.hvs.on.ca). Please remove this code: <code>.mod-search > #searchform { position: absolute; left: 718px; top: 40px; }</code> And replace it with this: <code>.mod-search > #searchform { position: absolute; right: 0; top: 40px; }</code> For the IE issue just add this code: <code>.mod-search #s { width: auto; }</code> Hope this helps. :) Best Regards, Ismael shelteredinsound on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50983 Tue, 10 Apr 2012 15:56:34 +0000 shelteredinsound 50983@http://www.kriesi.at/support/ I've been having strange caching issues but when I look in Firebug I do see the code. I've taken a screen shot with the screen squeezed. You can see the social buttons overlapping and no sign of the search bar. It looks perfect when the browser is full but stays in place as the browser gets smaller. In the shot you can see the code in Firebug. There has been a lot of code flying around on this request so maybe I misplaced something. If anyone else has actually succeeded in getting this to work properly I'd love to hear it. Hopefully we'll figure this out. <a href="http://christiepits.com/wordpress/wp-content/themes/ncreative/images/Screenshotsocial.png" rel="nofollow">http://christiepits.com/wordpress/wp-content/themes/ncreative/images/Screenshotsocial.png</a> Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50970 Tue, 10 Apr 2012 14:53:53 +0000 Ismael 50970@http://www.kriesi.at/support/ Hi, I checked your site using firebug and I'm not seeing the code I have posted above. <code>.mod-search #searchsubmit { background-color: #DFE6F0; height: 35px; width: 35px; top: 1px; right: 1px; }</code> I can't see any problem on my end except for the overlapped button. Kindly give us some screenshot regarding the problems you have mentioned. Thanks Regards, Ismael michaelspencer on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50965 Tue, 10 Apr 2012 14:39:27 +0000 michaelspencer 50965@http://www.kriesi.at/support/ Would it be possible to get a definitive solution to this including support for the responsive design? I would like to implement this change in my site and I'm sure others would too. In fact, what would be even better is to add a setting to the theme so people don't have to add so much code themselves. Just a suggestion. Thank you. shelteredinsound on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50757 Mon, 09 Apr 2012 17:36:33 +0000 shelteredinsound 50757@http://www.kriesi.at/support/ With the revised code, when you start squeezing the site, the search bar stays static and by the time you are at iphone dimensions the search bar is not viewable. I can't verify the IE9 fix as I'm on a mac. I'll leave that for Chris to confirm. Maybe I've left some old code in place or something..... Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50737 Mon, 09 Apr 2012 16:36:28 +0000 Ismael 50737@http://www.kriesi.at/support/ Hi, I noticed that the search button overlapped. Try to replace this code: <code>.mod-search #searchsubmit { background-color: #DFE6F0; }</code> with this: <code>.mod-search #searchsubmit { background-color: #DFE6F0; height: 35px; width: 35px; top: 1px; right: 1px; }</code> and also for the IE search form issue, try to replace this code: <code>.mod-search > #searchform { position: absolute; right: 0; top: 40px; }</code> with this: <code>.mod-search > #searchform { position: absolute; left: 718px; top: 40px; }</code> Hope it helps. :) Best Regards, Ismael Chris on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50553 Sun, 08 Apr 2012 01:57:13 +0000 Chris 50553@http://www.kriesi.at/support/ So far everything is working as expected, except now the responsive design of the website is broken. See <a href="http://dev.hvs.on.ca">http://dev.hvs.on.ca</a> I also had to tweak the CSS a bit to get the styling of the search bar correct. <pre><code>#header > .container { padding-bottom: 60px; } .mod-search > #searchform { position: absolute; right: 0; top: 40px; } .mod-search #s { background-color: #DFE6F0; } .mod-search #searchsubmit { background-color: #DFE6F0; } .mod-search > ul.social_bookmarks { top: 48px!important; }</code></pre> Its also broken in IE9 :( Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50284 Thu, 05 Apr 2012 23:43:24 +0000 Ismael 50284@http://www.kriesi.at/support/ Hi, I checked your site(using firebug) and I haven't found the code I have given you above. Can you try to put in either in Quick CSS or custom.css. Best Regards, Ismael shelteredinsound on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50266 Thu, 05 Apr 2012 22:43:38 +0000 shelteredinsound 50266@http://www.kriesi.at/support/ The code did not remove the original search and social icons. And the new search/social is scrambled in the header file. Other thoughts? Thanks for sticking with this! Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50167 Thu, 05 Apr 2012 16:30:50 +0000 Ismael 50167@http://www.kriesi.at/support/ Hi, In your custom.css replace the code I have given you with this code: <code>.main_menu { position: absolute!important; right: 0; top: 100px; } .mod-search > ul.social_bookmarks { position: absolute!important; right: 225px; } div.title_meta > #searchform, div.title_meta > ul.social_bookmarks { display: none; }</code> This code also removes search and social icons showing in its original position(showing twice). Hope this helps. :) Best Regards, Ismael shelteredinsound on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-50023 Wed, 04 Apr 2012 19:06:32 +0000 shelteredinsound 50023@http://www.kriesi.at/support/ Thanks! This is moving it forward but the custom css doesn't see to affect positioning. Search bar just resting up against the logo. I also need help removing the search/social instance on the pages that don't use the default layout like dynamic template pages and portfolio template pages. You can see what I mean at the address I provided. Search/social showing up twice. Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-49989 Wed, 04 Apr 2012 16:16:51 +0000 Ismael 49989@http://www.kriesi.at/support/ Hi, In your functions.php change the code above to this: <code>if(!function_exists('mod_avia_search')) { function mod_avia_search() { echo '<div class="mod-search">'; echo get_search_form(); echo '<ul class="social_bookmarks">'; if($dribbble = avia_get_option('dribbble')) echo "<li class='dribbble'><a** href='http://dribbble.com/".$dribbble."'>".__('Follow us on dribbble', 'avia_framework')."</a**>"; if($twitter = avia_get_option('twitter')) echo "<li class='twitter'><a** href='http://twitter.com/".$twitter."'>".__('Follow us on Twitter', 'avia_framework')."</a**>"; if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a** href='".$facebook."'>".__('Join our Facebook Group', 'avia_framework')."</a**>"; echo ' <li class="rss"><a** href="'.avia_get_option('feedburner',get_bloginfo('rss2_url')).'">RSS</a**>'; echo '</div>'; } }</code> Its weird that the [a] tags I put on the code were gone. :( Sorry about that. Just remove the ** in the code(if I try to remove that some code will be missing, so just replace it on your end after you pasted the code). And in your custom.css change it to this: <code>.mod-search > #searchform { position: absolute; right: 0; top: 40px; } .mod-search > ul.social_bookmarks { top: 48px!important; }</code> Hope this helps. :) Best Regards, Ismael shelteredinsound on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-49889 Wed, 04 Apr 2012 02:44:08 +0000 shelteredinsound 49889@http://www.kriesi.at/support/ I'm not getting the social media graphics to load. Also, the search bar and social logos are showing up in the portfolio, contact and dynamic template pages. I've been editing code here and there but don't think my changes should have affected this area. Can you take a look at my demo site and verify the code you provided is not to blame? Thanks in advance. <a href="http://christiepits.com/wordpress/contact/" rel="nofollow">http://christiepits.com/wordpress/contact/</a> Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-49853 Tue, 03 Apr 2012 23:31:17 +0000 Ismael 49853@http://www.kriesi.at/support/ Hi, Kindly undo my previous instructions and edit your template-blog.php and find: <code>avia_title($t_link); </code> And replace it with this: <code>avia_title($t_link, '', false);</code>-> This code removes the search and social besides the Blog - Latest News in the blog page. Then edit your functions.php, go to last line and paste this code: <code>if(!function_exists('mod_avia_search')) { function mod_avia_search() { echo '<div class="mod-search">'; echo get_search_form(); echo '<ul class="social_bookmarks">'; if($dribbble = avia_get_option('dribbble')) echo "<li class='dribbble'><a href='http://dribbble.com/".$dribbble."'>".__('Follow us on dribbble', 'avia_framework')."</a>"; if($twitter = avia_get_option('twitter')) echo "<li class='twitter'><a href='http://twitter.com/".$twitter."'>".__('Follow us on Twitter', 'avia_framework')."</a>"; if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a href='".$facebook."'>".__('Join our Facebook Group', 'avia_framework')."</a>"; echo ' <li class="rss"><a href="'.avia_get_option('feedburner',get_bloginfo('rss2_url')).'">RSS</a>'; echo '</div>'; } }</code>->This code creates a function that generates the search and social icons structure. Then edit your header.php and find: <code>echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');</code> Add this code below it: <code>mod_avia_search();</code>->This code places the search and social icons to the header. Then add this code to your custom.css: <code>#header > .container { padding-bottom: 60px; } .mod-search > #searchform { position: absolute; right: 0; top: 125px; } .mod-search > ul.social_bookmarks { top: 133px!important; }</code>->This code fixes the position of the search and social icons on the header. This instruction is quite lengthy but hopefully this should work. :) Best Regards, Ismael Chris on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-49628 Tue, 03 Apr 2012 00:13:39 +0000 Chris 49628@http://www.kriesi.at/support/ Sorta, but the formatting isn't being applied and I would like both the search and social bar moved to the header while retaining their existing formatting. Thanks, Chris Lillis Ismael on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-49468 Mon, 02 Apr 2012 05:42:25 +0000 Ismael 49468@http://www.kriesi.at/support/ Hi, Edit your header.php and look for 1st <div class='container'>, add this line below. <pre><code><div class="search-form-header"> <?php get_search_form(); ?> </div></code></pre> Then visit your custom.css and add this line. <pre><code>.search-form-header { position: absolute; top: 10px; right: 0px; }</code></pre> Hope this helps. :) Regards, Ismael Chris on "Add Search and Social to the Header" http://www.kriesi.at/support/topic/add-search-and-social-to-the-header#post-49460 Mon, 02 Apr 2012 04:31:10 +0000 Chris 49460@http://www.kriesi.at/support/ Hi I would like to be able move the social/search bar to the very top header as shown in the following image: <img src="https://collaborate.lillistech.net/download/attachments/10780682/Header.jpg"> Thanks, Chris Lillis