Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Adding toggle effect (similar to twenty-thirteen) search box

Old Sep 23, 2014, 12:43 PM
151 posts · Aug 2010
hi All, I wondered if anyone had managed to successfully add a toggle effect to the search box.

I found the following code on one of the sites:

/* twentythirteen search */
.menu-main-container {
background-color: #2B2139;
float: left;
#search-form {
float: right;
margin-right: 20px; /* to match your other right gutters */
background-color: #2B2139; /* if you want the purple across the bar */
#site-search {
background-color: transparent;
background-image: url(ata-images/search-icon-white.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 20px; /* if you want the input box the same size as the bar */
margin: 0;
padding: 0 0 0 34px;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
#site-search:focus {
background-image: url(ata-images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
background-color: #fff;
cursor: text;
outline: 0;
width: 230px;

Can this be simply added to the insert html/css on the theme, or is it more complicated than that

and where should the code go:
<form role="search" method="get" id="searchform" class="slide" action="http://XXXXX/wordpress/">
<label class="assistive-text" for="site-search">Search for:</label>
<input type="search" placeholder="Search…" value="" name="s" id="site-search">

Last edited by tlck9; Sep 23, 2014 at 12:53 PM.
Old Sep 23, 2014, 03:50 PM
juggledad's Avatar
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Why don't you give it a try? I'd put the code in the header configuration to start
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Lining Up search box beside tagline in header - WP Twenty Twelve Theme Peary Other BFA WordPress Themes 1 Aug 20, 2013 01:13 AM
Using Jetpack's carousel effect instead of builtin effect jboss Montezuma Theme 1 Oct 25, 2012 12:18 AM
Please help with new twenty ten theme, menu troubles dvv1 Page & Category Menu Bars 1 Jul 19, 2010 01:54 PM
Toggle post like in Mandigo theme Befrielse Post-Kicker, -Byline & -Footer 0 Sep 17, 2009 04:59 AM
adding text in search widget ppat2 Sidebars & Widgets 1 Apr 28, 2009 01:09 AM

All times are GMT -6. The time now is 02:40 PM.

Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.