Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

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


  #1  
Old Sep 23, 2014, 11:43 AM
tlck9
 
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">
</form>

Last edited by tlck9; Sep 23, 2014 at 11:53 AM.
  #2  
Old Sep 23, 2014, 02:50 PM
juggledad's Avatar
juggledad
 
23,765 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

Bookmarks

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 12:13 AM
Using Jetpack's carousel effect instead of builtin effect jboss Montezuma Theme 1 Oct 24, 2012 11:18 PM
Please help with new twenty ten theme, menu troubles dvv1 Page & Category Menu Bars 1 Jul 19, 2010 12:54 PM
Toggle post like in Mandigo theme Befrielse Post-Kicker, -Byline & -Footer 0 Sep 17, 2009 03:59 AM
adding text in search widget ppat2 Sidebars & Widgets 1 Apr 28, 2009 12:09 AM


All times are GMT -6. The time now is 09:22 PM.


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