Jump to content

Aligning searchform in center


dt819

Recommended Posts

Hi, I am very new to coding and have no idea where to begin. I want to customize a theme for Wordpress for my blog and need to change a few things around.

 

I want the seachform at the top of the page to remain constant and in the center of the page, regardless of how wide the browser is.

The website is www.pureplantasy.com

I also want to remove the transparent bar behind it that turns white when hovering over it. How do I remove this completely.

 

The searchform.php html is...

 

<?php
/**
 * The template for displaying search forms in Preus
 *
 * @package Preus
 */
?>
<form role="search" method="get" class="row search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<button type="submit" class="btn btn-default search-submit"><i class="fa fa-search"></i></button>
<label>
<span class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'preus' ); ?></span>
<input type="text" class="search-field" placeholder="<?php echo esc_attr_e( 'Search this site...', 'preus' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
</label>
</form>



Thanks heaps, in advance!
Link to comment
Share on other sites

From the element with the id of "top-search" you could have the classes all span 12 grid places.

col-lg-12 col-md-12 col-sm-12

And then set a style to align everything to the center

text-align:center

You could also specify offsets for the element using classes.

col-sm-offset-4 col-sm-4

That would also center it.

 

For the bar you would need to remove background and border colors from the relevant element. In this case it is 

#top-bar
Link to comment
Share on other sites

Thanks for the help Doddsey. As I said I am very new to the whole coding world and really have no idea how to change things around.

In "top search" I changed the grid places as recommended and also specified offsets for each and it helped a little bit, but the actual search button moved out of the search box when I started making the size of the browser smaller, so I removed it.

I have no idea where to inside the "text-align:center" piece of code.. Do I enter it into the searchform.php, header.php, stylesheet.css? And where abouts exactly?

Also I couldn't figure out how to remove the colour from the top bar element. I cannot find it the code files, but when I Right-Click it (in chrome on Mac) and choose 'Inspect element', I can go into the 'sources' tab and mess around with it a little bit. Is there any way I can save the changes I make through this, or to extract code and enter it into Wordpress etc..??

 

 

 

Thanks heaps for the help, I am loving the whole learning process and working out how coding works. And would love to get exact step-by-step instructions about how to go about these issues..

 

Thanks again.

Link to comment
Share on other sites

This is exactly how I want the top bar and search box, but I just need the search box aligned in the center at all times. 

How can I enter this code into Wordpress theme editor for it to work?

 

/* 2. Top Bar

------------------------------------------------------- */

#top-bar {

  background: ;

  padding: 0px 0px;

  position: relative;

  z-index: 99999;

  opacity: 0.8;

  border-bottom: px solid #B2B2B2;

  box-shadow: 0 0px 0px #000000;

}

#top-bar:hover {

  opacity: 1.0;

}

#social-icons {

  float: right;

  text-align: right;

}

.social-icon {

  color: #00796a;

  font-size: 28px;

  margin-right: 2px;

  position: relative;

  top: 0px;

  left: 0px;

  transition: ease 0.4s all;

}

.social-icon:hover {

  color: #00c6ad;

  text-shadow: 3px 3px 1px #00ac97;

  top: -1px;

  left: -1px;

}

a:hover .social-icon {

  text-decoration: none;

}

#top-search {

  position: relative;

  top: 7px;

  left: -15px;

  z-index: 999;

}

#top-search input[type=text] {

  background: #fafafa;

  outline: none;

  border: none;

  box-shadow: inset 0px -1px 1px #e6e6e6;

  width: 280px;

  padding-left: 35px;

  padding-top: 6px;

  padding-bottom: 6px;

  font-family: "Lato", Helvetica, sans-serif;

}

#top-search input[type=text]:hover,

#top-search input[type=text]:focus {

  background: #ffffff;

}

#top-search ::-webkit-input-placeholder {

  color: #000000;

}

#top-search :-moz-placeholder {

  /* Firefox 18- */

 

  color: #000000;

}

#top-search ::-moz-placeholder {

  /* Firefox 19+ */

 

  color: #000000;

}

#top-search :-ms-input-placeholder {

  color: #000000;

}

#top-search button {

  position: relative;

  padding: 2px 5px;

  background: none;

  border: none;

  -webkit-linear-gradient: none;

  top: -2px;

  box-shadow: none;

  right: -30px;

  color: #000000;

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.