1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need help with "hole" in header area

Discussion in 'XenForo Questions and Support' started by Teddy Scott, Jan 20, 2011.

  1. Teddy Scott

    Teddy Scott Active Member

    What can I do to remove this "hole" or at least make it smaller?
    Id really like to move the search box to somewhere else.
    Maybe there is something I can put in this "hole" area?
    Any other suggestions welcome too.
    Thanks!
    www.68camaroproject.com
    help12.png
     
  2. Decent60

    Decent60 Well-Known Member

    Easiest way would be to make your banner bigger to fill it up, or center it instead of aligning it to the left.
    There is a place in the templates were you can adjust your search bar's location (I'd just suggest making it lower).

    You can adjust the search bar's height by going into the search_bar.css file and finding this line:
    PHP:
    #QuickSearch
        
    {
            
    positionabsolute;
            
    right20px;
            
    top: -15px;
    and increase the "top:" number.
     
    Teddy Scott likes this.
  3. Teddy Scott

    Teddy Scott Active Member

    yea. i want the logo centered. I had it centered at once point but it put the search bar right on top of the logo.
    Ill try to move the search box first then re center. Sounds like a plan. Thanks so much.
    ill post back my result
     
  4. Teddy Scott

    Teddy Scott Active Member

    i seen it on here somewhere but how do you change the background color of the the search box from lets say
    from blue to white?
    I know you can change it as I seen the post on how to some where ...lol
     
  5. Teddy Scott

    Teddy Scott Active Member

  6. Teddy Scott

    Teddy Scott Active Member

    I think this looks so much better?
    Also I think I need to change the search box from either light blue or to white from the current dark blue?
    www.68camaroproject.com

    help13.png
     
  7. Decent60

    Decent60 Well-Known Member

    There are a few ways to go about it.

    In that same CSS file that you moved the searchbar with, you can change the background colours of it.
    You can either put in a manual colour or if you see a colour palette that you like, you can use that (eg: @primaryLightest; )
    In #QuickSearch, look for this:
    PHP:
    background-color#xxxxxx;
            
    border-radius5px;
            
    padding-top5px;
            
    _padding-top3px;
    and change the #xxxxxx in background-color to whatever you want using hexadecimal colour codes (good site for it here: http://techcoded.com/wp-content/uploads/2010/05/colorchart.gif) or you could replace it with a colour palette from the Styles area of your site (eg: pirmaryLightest would be: @primaryLightest; ).

    Same thing needs to be done in the following areas:
    PHP:
    #QuickSearch .controlsWrapper
            
    {
                
    background-color#xxxxxx;
                
    border-radius5px;
                
    padding5px;
                
    margin5px 0;
                
    font-size11px;

    PHP:
    #QuickSearch .advSearchLink:hover
                
    {
                    
    background#xxxxxx;
                    
    text-decorationnone;
                }
    PHP:
    #searchBar .textCtrl
            
    {
                
    width222px;
                
    border1px solid @primaryLightish;
                
    background-color: @primaryLightest;
    Note that your settings may differ, I just pulled this from one of my custom styles lol
     
  8. Teddy Scott

    Teddy Scott Active Member

    I tried that its not changing.
    here is my current code:
    Code:
    #searchBar
    {
        position: relative;
        zoom: 1;
        z-index: 1;
    }
    
        #QuickSearch
        {
            display: block;
    
            position: absolute;
            right: 0px;
            top: 2px;
    
            margin: 0;
    
            /* background-color: @pageBackground;
            border-radius: 5px;
            padding-top: 5px;
            _padding-top: 3px; */
            z-index: 7500;
        }
    
            #QuickSearch .secondaryControls
            {
                display: none;
            }
    
            #QuickSearch.active
            {
                box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
                padding-bottom: 5px;
                background-color: @pageBackground;
            }
     
  9. Teddy Scott

    Teddy Scott Active Member

    does not the /* comment it out?
    maybe the /* has to be removed first?
    This is the way this style that I am using was set.
     
  10. Decent60

    Decent60 Well-Known Member

    Yes, /* */ are comment out brackets (similar to <xen:comment> </xen:comment> ) for the CSS. Remove those from your #Quicksearch area and it should work fine for you.
     
  11. Teddy Scott

    Teddy Scott Active Member

    still not working. I have done it both ways even with the @pageBackground
    and makes no difference.

    What else could it be? This should have fixed it.
    Is there another place I can change the back ground color of the search box?

    Code:
    #searchBar
    {
        position: relative;
        zoom: 1;
        z-index: 1;
    }
    
        #QuickSearch
        {
            display: block;
    
            position: absolute;
            right: 0px;
            top: 2px;
    
            margin: 0;
    
            background-color: #f7f7f7;
            border-radius: 5px;
            padding-top: 5px;
            _padding-top: 3px;
            z-index: 7500;
        }
    
            #QuickSearch .secondaryControls
            {
                display: none;
            }
    
            #QuickSearch.active
            {
                box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
                padding-bottom: 5px;
                background-color: #f7f7f7;
            }
     
  12. Teddy Scott

    Teddy Scott Active Member

    someone take a gander at my site. It did do something. What that is I dont know. It look like it made a white boarder around the box. But the inside of the box is still blue. Maybe I need to pm the style builder. I think I will.
     
  13. Brogan

    Brogan XenForo Moderator Staff Member

    Enter this in EXTRA.css:

    Code:
    .searchbox {
    background-color: #FFFFFF;
    }
    Change FFFFFF to whichever colour you want.
     
    Teddy Scott likes this.
  14. Teddy Scott

    Teddy Scott Active Member

    YAY! Brogan did it. Thanks Brogan.
     

Share This Page