Add a centered search bar on homepage
Support Area › Forums › Foxy › Add a centered search bar on homepage
- This topic has 7 replies, 3 voices, and was last updated 11 years, 5 months ago by Bill Robbins.
-
AuthorPosts
-
September 27, 2011 at 10:17 #3761Gary SorensenParticipant
I would like to add/relocate the search feature widget to the middle-center of my homepage under a center justified logo in the ‘foxy’ theme. I would also like to control the width of the widget. The goal is to achieve a ‘google-ish’ look.
This would only happen on the homepage. Any help?
Also, is there away to ‘pin’ the nav menu to the left side of the browser window?
September 27, 2011 at 21:33 #3767Bill RobbinsModeratorYou can modify the theme to add a search bar on the homepage with it and the logo being centered. Here’s how to go about that.
1) Go to the appearance section of your WordPress control panel and select edit to open up the theme editor.
2) From the list of files on your right, select header.php.
3) Find this spot:</header>
and paste the code from this link http://pastebin.com/WrqrQCZC just above that.
4) Save your changes and open up style.css.
5) Paste this at the very bottom:.home #logo {
position: relative;
text-align: center;
width: 100%;
}.header-search {
position: relative;
z-index: 2000;
text-align: center;
top: 57px;
}input#s-header {
width: 300px;
}6) Save your changes and you should now have a centered logo and a search bar.
To pin the navigation to the sidebar can’t be done without also moving the sidebar to the left side. If you don’t mind that, here’s how to do that.
1) Edit the style.css file again and look for this spot:
.wrap {
width: 960px;
margin: 0 auto;
position: relative;
z-index: 20;
padding-bottom: 60px;
}and change it to this:
.wrap {
width: 960px;
margin: 0 auto;
z-index: 20;
padding-bottom: 60px;
}then find this spot:
aside.sidebar {
float: left;
position: relative;
width: 180px;
}and replace it with this:
aside.sidebar {
float: left;
position: absolute;
width: 180px;
left: 30px;
}2) Save your changes. That should move your sidebar over to the left.
September 28, 2011 at 16:29 #3777Gary SorensenParticipantThanks Bill, that worked well. I haven’t pinned the menu to the browser, yet. I may have some second thoughts.
I did notice on “staff” archive the images don’t show up until you click to go to the next level. Is there a way to have the images show on the first level?
Also, the “next” and “previous” buttons are reversed. I am pretty sure I can find these eventually, but if you could point me to them it would be great.
Lastly, how can I increase the number of listings per page on the staff postings?
September 28, 2011 at 20:43 #3782Bill RobbinsModeratorGary, any chance you could send me a link to where you’re working on this? That would be helpful.
September 29, 2011 at 09:14 #3786Gary SorensenParticipantHi Bill, I am working with a temporary address.
http://content.hummelarch.com/wordpress/
if you click on the “Design Team” link, you should get to the complete listing and the area I am referring to.
Are you the creator of Organized Themes? If so, great job. I appreciate your help.
September 30, 2011 at 16:25 #3795Bill RobbinsModeratorGary,
The staff members images are the “featured images” for those staff members. There is quick screencast in our video section that explains how to use them if you need some help. If you don’t see the “featured image” box in your edit staff page, click the link in the top right corner for “Screen Options” and make sure that it’s checked so it will be visible. Once the image is saved as the featured image, it should appear in the staff listings along with their name and contact information.
If you’d like to change the order of the previous/next buttons you can do that by editing the paging.php file. Look for these two spots:
<p class=”paging-next left”>
and
<p class=”paging-prev right”>
and just swap the left and right classes to float them on opposite sides.
To change the number of staff members per page, you’ll need to edit the taxonomy-staff-group.php page.
The easiest way to change the number of staff members displayed per page is to go to Settings>Reading in your control panel and change the number of post displayed per page there. Once you save your changes it will reflect the number of staff per page too.
October 10, 2012 at 23:57 #7830Nelson FernandesParticipantFor centering the logo I added the CSS code you mentioned above. However, this only centers the logo on the main page. All of the other pages it’s left-aligned. Thoughts?
October 11, 2012 at 08:39 #7831Bill RobbinsModeratorNelson,
Thank you for your business first of all. In this instance the code snippet above was to create kind of a Google like first page with the logo centered over a search bar.
You can have the logo centered on every page though. Here’s how:
- Go to the Theme Options page and select the Styling tab.
- At the top, choose “yes” to include custom styling.
- Scroll down to the Custom CSS box and paste this:
#logo, #text-logo { text-align: center; }
- Save your changes.
That will center the logo on all of your pages and posts. If you have any questions or trouble, just let me know.
Bill
-
AuthorPosts
- The topic ‘Add a centered search bar on homepage’ is closed to new replies.