Jump to content

[Resolved] Foundation - Search box length

Recommended Posts

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

    <div class="row"></div>
    <div class="row show-for-medium-up">
        <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">
                <div class="small-10 large-11 columns">
                    <input type="text" required="" placeholder="Search our store" name="search[keywords]" aria-required="true"></input>
                <div class="small-2 large-1 columns">
                    <button class="button postfix" value="Search" type="submit"></button>
            <input type="hidden" value="category" name="_a"></input>
        <div id="validate_search" class="hide"></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?


Link to comment
Share on other sites

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; }
.nav-boxes {width: 30rem; }


Link to comment
Share on other sites

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' */

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

"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.

Link to comment
Share on other sites

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.

blue button.PNG

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...