Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 27, 2015 at 11:33 pm #386693
    darryllevine

    I would like to mimic the minimalist front page and prominent search box on websites like Calgary.ca and Chattanooga.gov.

    Using Enfold’s Avia Layout Builder, I added a Fullscreen Sider element with one hi-res photo. I removed the sidebars and breadcrumbs. At the top is a transparent and glassy header. It’s pretty much the way I want, except for the position of the search box.

    I previously followed these instructions to move the search box to the header. That is where I would like to keep it on every page — except the front page.

    How can I place a search box over the full screen image?

    January 28, 2015 at 5:12 pm #387135
    Elliott

    Hi darryllevine!

    Try creating a caption for the slide image and add this inside.

    <form class="" method="get" id="searchform" action="http://artwork.mysitehosted.com/~cote/">
	<div style="opacity: 0; display: none;">
		<input type="submit" class="button avia-font-entypo-fontello" id="searchsubmit" value="">
		<input type="text" placeholder="Search" value="" name="s" id="s">
			</div>
</form>

    And then add this to your custom CSS.

    .avia-caption-content, .avia-caption-content * { display: block !important; opacity: 1 !important; }

    Cheers!
    Elliott

    January 28, 2015 at 7:26 pm #387322
    darryllevine

    Beautiful. It worked! Thank you. I figured out how to adjust the search box size and font size inside the box adding this to the Quick CSS box in Enfold — General Styling. I include here for others and future me:

    #top #searchform>div {
max-width: 800px; 
}

#top #s {
font-size: 32px;
padding: 80px 60px 20px 20px; }

    Is there a way to have two separate search boxes the search boxes: one for the front page and a different one for my header? Currently my nice big search box in the middle of the front page is the same size in my header on every inside page. Yikes!

    • This reply was modified 9 years, 10 months ago by darryllevine.
    January 29, 2015 at 9:54 pm #387978
    Elliott

    Hi!

    You can target them both with this.

    input[type="text"] {  }
input[type="submit"] {  }

    And only the ones in your header with this.

    #header input[type="text"] {  }
#header input[type="submit"] {  }

    Cheers!
    Elliott

    January 29, 2015 at 11:37 pm #388031
    darryllevine

    Hi Elliott. Forgive me. I need a little more hand holding.

    I recognize that code as being CSS-ish. So I added it to Quick CSS but nothing changed with my search boxes. I assume there is an obvious other thing that I am supposed to do somewhere else…

    January 30, 2015 at 7:18 pm #388451
    Yigit

    Hey!

    Elliott posted you selectors that you can use in Quick CSS field. You should adjust them separately as following 

    #header input[type="text"] { font-size: 18px !important; }
#header input[type="submit"] { font-size: 16px!important; }

input[type="text"] { font-size: 22px!important;  }
input[type="submit"] { font-size: 20px !important;  }

    Best regards,
    Yigit

    January 30, 2015 at 11:21 pm #388599
    darryllevine

    SOLVED: It works. Thanks Yigit.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to make very large search box in middle of front page’ is closed to new replies.