Quick CSS to shift a search box into the footer WordPress
- SOLVED
Hello,
I'm having a problem getting this search box aligned with the footer. Currently its shifted all the way to the left. I know I'm missing some kind of <div></div>, here's the code for the footer, I have no idea why there is </div> at the top, I downloaded it from Lucian, its the Journalist Theme for Wordpress.
</div>
<div id="footer">
<a href="http://testsite.ledesmaweb.com/archives/">Archive</a> | <a href="http://testsite.ledesmaweb.com/colophon/">About</a> | <a href="http://testsite.ledesmaweb.com/essays/">Essays</a> | <a href="http://testsite.ledesmaweb.com/linkss/">Links</a> | <a href="http://testsite.ledesmaweb.com/">Feed</a> | <a href="http://twitter.com/jorgeledesma">Twitter</a>
<br />
<br />
<br />
Copyright © 2010 - <?php $the_year = date("Y"); echo $the_year; ?>
<a href="http://testsite.ledesmaweb.com/">Jorge Ledesma</a>. Tracked by <a href="http://haveamint.com/">Mint</a>. Accelerated by <a href="http://www.maxcdn.com/">Max CDN</a>.
</div>
<br />
<br />
<form id="searchform" method="get" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<input class="searchfield" type="text" name="s" id="s" value="" title="Enter keyword to search" />
<input class="submit" type="submit" value="search" title="Click to search archives" />
</form>
<br />
<?php do_action('wp_footer', ''); ?>
</body>
</html>
So basically get this box on the footer and we're golden.
Answers (2)
Pippin Williamson answers:
You're going to need to give us some sort of reference for where you need the search box to go. Either a live site or a screenshot.
Jorge Ledesma comments:
here's the test site: http://testsite.ledesmaweb.com/
Just in the middle, just get it with the footer, I'll then position it where I want but it should for the sake of the question ie. right below where it says:
Archive | About | Essays | Links | Feed | Twitter
[ Search Box here ]
Pippin Williamson comments:
First, replace the code above with this and see where it gets you.
</div>
<div id="footer">
<a href="http://testsite.ledesmaweb.com/archives/">Archive</a> | <a href="http://testsite.ledesmaweb.com/colophon/">About</a> | <a href="http://testsite.ledesmaweb.com/essays/">Essays</a> | <a href="http://testsite.ledesmaweb.com/linkss/">Links</a> | <a href="http://testsite.ledesmaweb.com/">Feed</a> | <a href="http://twitter.com/jorgeledesma">Twitter</a>
<br />
<br />
<br />
Copyright © 2010 - <?php $the_year = date("Y"); echo $the_year; ?>
<a href="http://testsite.ledesmaweb.com/">Jorge Ledesma</a>. Tracked by <a href="http://haveamint.com/">Mint</a>. Accelerated by <a href="http://www.maxcdn.com/">Max CDN</a>.
<form id="searchform" method="get" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<input class="searchfield" type="text" name="s" id="s" value="" title="Enter keyword to search" />
<input class="submit" type="submit" value="search" title="Click to search archives" />
</form>
</div>
<?php do_action('wp_footer', ''); ?>
</body>
</html>
Jorge Ledesma comments:
just tried it, nothing happened, looks the same and I reset the cache on chrome and safari and went thru the Wp admin as well and upload via panic, nothing.
Pippin Williamson comments:
Add this to your CSS:
#footer {
width: 670px;
margin: 0 auto;
}
Jorge Ledesma comments:
good, it brought it in. Can it be shifted now.
Pippin Williamson comments:
If you want to shift it all the way to the right, just use:
<code>
#searchform {
float: right!important;
}
Jorge Ledesma comments:
not fully right, just in the middle, right now, its floating left.
Pippin Williamson comments:
<code>
#searchform {
text-align: center;
}
#searchform input {
display: inline!important;
float: none!important;
}
Jorge Ledesma comments:
excellent
Chris Lee answers:
Add this to your stylesheet at the bottom of style.css:
<style>
form#searchform { margin: 15px auto 0;
width: 650px; }
#searchform #s { float: left; margin-right: 10px; }
</style>
Jorge Ledesma comments:
it brought it to the side which is cool but it needs to be shift more centrally
Chris Lee comments:
You want it centered horizontally?
Jorge Ledesma comments:
yes,
Chris Lee comments:
Change the code above with this:
form#searchform { width: 191px; margin: 15px auto 0px }
Jorge Ledesma comments:
replace this <style>
form#searchform { margin: 15px auto 0;
width: 650px; }
#searchform #s { float: left; margin-right: 10px; }
</style>
for this
form#searchform { width: 191px; margin: 15px auto 0px }
Chris Lee comments:
Or more simply this:
<style>
form#searchform { width: 191px; margin: 15px auto 0px }
#searchform #s { float: left; margin-right: 10px; }
</style>
Jorge Ledesma comments:
I did, but its kind off the same
Chris Lee comments:
I don't see it uploaded yet. Are you sure you uploaded it to the server?
Jorge Ledesma comments:
Yes, I went thru the wp admin, I can try it via panic ftp
Chris Lee comments:
ah you did do it. Remove the <Style> </style> line in the css. they don't go there. sorry. i assumed you knew that.