[Resolved] Foundation - Search box length

[harrisorganic]

<div class="small-7 medium-8 large-9 columns nav-boxes">

    <div class="row"></div>
    <div class="row show-for-medium-up">
        ::before
        <div class="small-12 columns">
            <div id="box-search">
                <form id="search_form" method="get" action="http://www.harrisorganicwine.com.au/shop/search.html" novalidate="novalidate">

            <div class="row collapse">
                ::before
                <div class="small-10 large-11 columns">
                    <input type="text" required="" placeholder="Search our store" name="search[keywords]" aria-required="true"></input>
                </div>
                <div class="small-2 large-1 columns">
                    <button class="button postfix" value="Search" type="submit"></button>
                </div>
                ::after
            </div>
            <input type="hidden" value="category" name="_a"></input>
        </form>
        <div id="validate_search" class="hide"></div>
    </div>

</div>

 

Hi, I found the above using firefox toggle tools regarding the search box.

Is there a way of altering the search box column length  with an insert of code in cubecart.default.css?

 

[bsmither]

Yes, but if your goal is to make more room for the logo, sorry. I only know to make adjustments to the number of small/medium/large columns for that solution.

#box-search { float: right; width: 20rem; }

 

Alternatively:

.nav-boxes {width: 30rem; }

 

[harrisorganic]

Thanks Brian, getting there slowly.

Next is to change button color from blue to whatever.

tried  .button .postfix {
 background-color: #123456; but no luck.

[bsmither]

This is a standard button. To change the background color of all standard buttons:

button { background-color: #123456; } /* the actual <button> tag */

To change all elements having the button class:

.button { background-color: #123456; } /* any tag of class 'button' */

To change just buttons having the class 'button':

button.button { background-color: #123456; } /* button tag of class 'button' */

To change all buttons AND anything with the class 'button', which is the current Foundation CSS rule:

button, .button { background-color: #123456; } /* any button and any tag of class 'button' */

[bsmither]

The reason .button .postfix { didn't work is because of the space. A space in CSS rule-making means:

Start with an element having class .button, then apply the rules to its children having class .postfix.

To target an element having multiple class names, and you need to specify more than one of the class names, it is: .button.postfix -- no space.

[harrisorganic]

Hi Brian,

further to the above I am wanting to change the colour of the button once it has been clicked. It goes dark blue (foundation)

ie Add to Basket button

this code in default css is:    .button.small.postfix:hover{background: #4c9160} is the hover colour

In firebug it comes up as button.button.small.postfix. but I can not find any code to change the color.

Any suggestions please. regards Duncan

[bsmither]

"I am wanting to change the colour of the button once it has been clicked."

I think there is little one can do with CSS to make a form element button (as opposed to a web address link) take on a color that represents its past state -- that is, having had been clicked even when the mouse is no longer hovering over it.

(A web address link can have the state, or 'pseudo-class', of "visited". But that indication relies on the web browser having had actually visited the page and having this address in its session history.)

Maybe with some javascript, something can be done.

I might be misunderstanding what it is you really want.

[harrisorganic]

Thanks Brian, to clarify I have added a picture of the said button. The Add to Basket button on the LHS has been clicked and the RHS has not. Yes, the mouse is not hovering on the LHS blue button.

As I mentioned I would like to change the color of the blue button.

[bsmither]

I see what is happening. The left image shows a button that has been clicked, and is also retaining the "focus". Even though the mouse is no longer hovering over the button, the browser is still giving that button the focus. You can (barely) see a dotted border around the button perimeter. To remove the focus, click on an empty area of the page. The button will assume the un-hovered, un-focused color.

More later.

[bsmither]

As you may have concluded, removing the focus from the button, by clicking anywhere else, restores the background color of the button to it's default color. Therefore, we still have no easy way to make the button keep a color, once clicked, but not hovered or focused.

If you can be satisfied with changing the background color of the button when hovered, or also when has focus, then the CSS rule is:

button:hover, button:focus, .button:hover, .button:focus { background-color: #ff0000; }

It is easiest to place this rule in the foundation folder CSS file cubecart.default.css.

[harrisorganic]

Brian, that's perfect. Thanks so much. 

That issue has bugged me for ages. Now I can get away from foundation blue.