• 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

Decent60

Well-known member
#2
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.
 
#3
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
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
#7
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
 
#8
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;
        }
 

Decent60

Well-known member
#10
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
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
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.