Custom XL Buttons - Icon and text « Support Forum | Kriesi.at

Support Forum » Propulsion

Custom XL Buttons - Icon and text

6 posts from 5 voices

Started 1 year ago by reganfrank
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

reganfrank
Member
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/
Posted 1 year ago #

Dude
Dude

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;
}

Posted 1 year ago #

martingfisher
Member

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

Posted 1 year ago #
Chris Beard
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
Posted 1 year ago #
martingfisher
Member

Yey! that works brilliantly.
Thanks Chris thats a big help :-)

Posted 12 months ago #
Ismael
Moderator

Hi martingfisher,

Glad that it worked. :)

Regards,
Ismael

Posted 11 months ago #