Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #11949

    Hi,

    Just wondering if I could pick somebodys brain on how to make a button that fills a 1/5 column?

    Here is what I have done:

    Added the following to my (child) them style.css

    /*Add a full width button - 1 third column*/
    .bnt_fw_5{
    width: 78% !important;
    height: 75px !important;}

    /* Mobile */
    .avia-button .avia-mobile{ background: transparent url("../st3/img/icons/mobile.png") no-repeat center left;
    padding: 10px 30px 40px 30px; left:-2px;
    font-size: 23px;
    font-weight: bold;
    vertical-align: middle;
    text-shadow: 0px 2px 3px #666;
    }
    .avia-ilink .help{ background: transparent url("../st3/img/icons/mobile.png") no-repeat center left; }

    Then following this ( http://www.kriesi.at/support/topic/add-more-icons-to-icon-buttons-shortcode ), I added a “mobile” button to the shortcode editor.

    Everything works, except I cant get the icon to stay to the left, and the text to be on the right. Does that make sense?

    They are overlapping and its driving me bonkers.

    Could somebody help?

    Here is the production site: http://brandpag.es/sharetel/

    #73699

    Following code gives me good results:

    .avia-button .avia-mobile {
    background: url("../st3/img/icons/mobile.png") no-repeat scroll -12px center transparent;
    font-size: 23px;
    font-weight: bold;
    left: -5px;
    padding: 10px 0 40px 50px;
    text-shadow: 0 2px 3px #666666;
    vertical-align: middle;
    }

    #73700

    A very similar question:

    I am using Propulsion (www.tradesolarkits.com)

    Is there a piece of CSS I can drop in to the quickcss box that would allow all buttons to fill the column width in which they appear?

    At present they confirm to the width of the text used within the button but I want the buttons to be 100% of the column width in which they appear.

    Many thanks

    Martin

    #73701

    Hey,

    you can try dropping this piece of code in there

    .avia-button {
    width:89% !important;
    }

    Fiddle around with the percentage to suit your needs better.

    If you want to centralise the text you can add “text-align:center;” below the width line.

    Cheers,

    Chris

    #73702

    Yey! that works brilliantly.

    Thanks Chris thats a big help :-)

    #73703

    Hi martingfisher,

    Glad that it worked. :)

    Regards,

    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Custom XL Buttons – Icon and text’ is closed to new replies.