Aligning searchform in center

[dt819]

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!

[doddsey_65]

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

[dt819]

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.

[dt819]

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;