Need help with "hole" in header area

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
 

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
    {
        position: absolute;
        right: 20px;
        top: -15px;
and increase the "top:" number.
 

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
 

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
 

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-radius: 5px;
        padding-top: 5px;
        _padding-top: 3px;
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-radius: 5px;
            padding: 5px;
            margin: 5px 0;
            font-size: 11px;

PHP:
#QuickSearch .advSearchLink:hover
            {
                background: #xxxxxx;
                text-decoration: none;
            }
PHP:
#searchBar .textCtrl
        {
            width: 222px;
            border: 1px solid @primaryLightish;
            background-color: @primaryLightest;
Note that your settings may differ, I just pulled this from one of my custom styles lol
 

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;
        }
 

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.
 

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.
 

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;
        }
 

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.
 

Brogan

XenForo moderator
Staff member
Enter this in EXTRA.css:

Code:
.searchbox {
background-color: #FFFFFF;
}
Change FFFFFF to whichever colour you want.
 
Top