Add a centered search bar on homepage

Support Area Forums Foxy Add a centered search bar on homepage

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question:
  • Author
    Posts
  • #3761
    Gary Sorensen
    Participant

    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?

    #3767
    Bill Robbins
    Moderator

    You 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.

    #3777
    Gary Sorensen
    Participant

    Thanks 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?

    #3782
    Bill Robbins
    Moderator

    Gary, any chance you could send me a link to where you’re working on this? That would be helpful.

    #3786
    Gary Sorensen
    Participant

    Hi 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.

    #3795
    Bill Robbins
    Moderator

    Gary,

    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.

    #7830
    Nelson Fernandes
    Participant

    For 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?

    #7831
    Bill Robbins
    Moderator

    Nelson,

    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:

    1. Go to the Theme Options page and select the Styling tab.
    2. At the top, choose “yes” to include custom styling.
    3. Scroll down to the Custom CSS box and paste this:
      
      #logo,
      #text-logo {
      	text-align: center;
      }
      
    4. 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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Add a centered search bar on homepage’ is closed to new replies.