Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Jul 2004
    Posts
    127
    Plugin Contributions
    0

    Default CSS Back Button - can't change width

    Hi all,

    Just wondering how to change the width of the .back_button css.

    This button appears bottom left of Advanced Search page, for example.

    I've tried adding the following to the stylesheet_css_buttons.css:

    .button_back { width: 7em; }

    but no change!

    Any help gratefully received.

  2. #2
    Join Date
    Nov 2003
    Posts
    1,987
    Plugin Contributions
    15

    Default Re: CSS Back Button - can't change width

    The current version of the css buttons uses inline styling to set the width, that is why you need to add "!important" to over ride these styles like this:
    .button_back {
    width: 30em !important;
    }

  3. #3
    Join Date
    Jul 2004
    Posts
    127
    Plugin Contributions
    0

    Default Re: CSS Back Button - can't change width

    Hi paulm

    Thanks for the reply.

    I've tried adding this to stylesheet_css_buttons.css,
    but no change.

    Any ideas why please?

  4. #4
    Join Date
    Nov 2003
    Posts
    1,987
    Plugin Contributions
    15

    Default Re: CSS Back Button - can't change width

    Maybe you editted the wrong file then, or it might be a cache issue. (press ctrl+reload (IE) or shift+reload (FF) to refresh the page).

    Is it possible to post an url?

  5. #5
    Join Date
    Jul 2004
    Posts
    127
    Plugin Contributions
    0

    Default Re: CSS Back Button - can't change width

    I am definitely editing the right file (checked another change which displayed correctly).

    Also, I emptied the cache, history etc of the browser, still no change in the width of the button_back style.

    I can override other button styles, but not this one. I notice that it is governed by a <span> whereas other buttons are styled in the <input> tag.

    Can you confirm that you can change the width of this button (eg bottom left "button_back" of the Advanced Search page)?

    Unfortunately, I can't give you a URL, as the site is hosted internally at this stage.

    Any other suggestions??

  6. #6
    Join Date
    Nov 2003
    Posts
    1,987
    Plugin Contributions
    15

    Default Re: CSS Back Button - can't change width

    Quote Originally Posted by speeke
    Can you confirm that you can change the width of this button (eg bottom left "button_back" of the Advanced Search page)?
    Yep, I even tested it (not because I was not sure if it would work, but to check if classname was correct).

    Indeed the links are wrapped in a span, and the inputs are not, but this is not related. Could you post your (css buttons) css file? (including the new width setting)

    And maybe temporarily disable all other stylesheets to make sure the problem does not come from another css file?

    (the FireFox toolbar by Chris Pederick, is a fantastic tool to track done these kinds of problems, and many others)

  7. #7
    Join Date
    Jul 2004
    Posts
    127
    Plugin Contributions
    0

    Default Re: CSS Back Button - can't change width

    Copy of css buttons stylesheet:

    /* css buttons */
    .cssButton, .cssButtonHover {
    width : 20em;
    background-color: #F4F4F4;
    color : #000000;
    border: 2px outset #F4F4F4;
    font-size: .8em;
    text-align:center;
    white-space: nowrap;
    text-decoration: none;
    /*border-spacing: 1px;*/
    /*margin-left: auto;
    margin-right: auto;*/
    /*display: block;*/
    /*vertical-align: top;*/
    /*line-height: 130%;*/
    /*cursor: pointer;*/
    }

    .cssButtonHover {
    color: #616161;
    border-style: inset;
    text-decoration: none;
    }
    /* adding the styles below might be needed if the default button width is changed */
    /* .button_continue_shopping, .button_shipping_estimator {width: 150px;} */
    .small_delete, .button_prev, .button_next, .button_search {width: 4em;}
    .button_sold_out_sm, .button_sold_out, .button_update_cart, .button_checkout, .button_login {width: 10em;}
    .button_return_to_product_list, .button_add_selected {width: 22em;}
    .button_in_cart{width: 19em;}
    .button_submit {width: 18em;}
    .button_update_cart {color: red;}
    .button_update_cartHover {color: black;}
    /*.innerbox#headernavcenter .boxtext .button_search {display:inline;}*/
    .button_back {width: 4em !important;}

  8. #8
    Join Date
    Nov 2003
    Posts
    1,987
    Plugin Contributions
    15

    Default Re: CSS Back Button - can't change width

    Found it :-)

    It needs a:
    display: block;
    (note: a float would work too for example, the inline element just needs to be converted to a block element one way or another)

    Inline elements do not have width settings.

  9. #9
    Join Date
    Jul 2004
    Posts
    127
    Plugin Contributions
    0

    Default Re: CSS Back Button - can't change width

    Excellent, the display:block; now allows me to change the width.

    However, the height of the button is now too big.

    I've tried adding margin:0; and padding:0; - but no help.

    Any last ideas please :)

  10. #10
    Join Date
    Jul 2004
    Posts
    127
    Plugin Contributions
    0

    Default Re: CSS Back Button - can't change width

    Never mind, I added a line-height and margin-top so now it lines up exactly with the search button to the right.

    Many thanks for your help.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v151 How to change the button width that in the INPUT element when the css button is used?
    By su35 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 9 Jun 2013, 04:34 PM
  2. v150 Alter search button (css) width
    By mi16chap in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 6 Jun 2012, 03:18 PM
  3. CSS Confirm Order Button Width
    By nicko2 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 4 Sep 2008, 01:05 PM
  4. Template width won't change back???
    By Arkwright in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 21 Nov 2007, 08:23 AM
  5. How can I change how the "Back" button works/displays?
    By askjv in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 2 Nov 2007, 10:52 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg