Need help with "hole" in header area

[Teddy Scott]

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

 

[Decent60]

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:

#QuickSearch
    {
        position: absolute;
        right: 20px;
        top: -15px;

and increase the "top:" number.

 

[Teddy Scott]

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]

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

 

[Teddy Scott]

bump

 

[Teddy Scott]

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

 

[Decent60]

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:

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:

#QuickSearch .controlsWrapper
        {
            background-color: #xxxxxx;
            border-radius: 5px;
            padding: 5px;
            margin: 5px 0;
            font-size: 11px;

#QuickSearch .advSearchLink:hover
            {
                background: #xxxxxx;
                text-decoration: none;
            }

#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]

I tried that its not changing.
here is my current 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]

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]

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]

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?

#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]

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.

 

[Paul B]

Enter this in EXTRA.css:

.searchbox {
background-color: #FFFFFF;
}

Change FFFFFF to whichever colour you want.

 

[Teddy Scott]

YAY! Brogan did it. Thanks Brogan.