Joomla Templates Club 406,261 posts

[linnea Friend linneaJoin date: April 2015Posts: 68Downloads:0Uploads:9 Thanks: 24 Thanked: 1 times in 1 posts]

#206430

Hi there,

I have been building a slideshow for my website using the ACM block slideshow with style-3. I would like to add a button class so that my links show up a bit better but am not sure where to find this information. I would appreciate it if someone could point me in the direction of the proper instructions. Thanks!

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#570929

Hi,

You can use the button class field located here :

In this field you can put every button class used in uber (like “btn btn-primary”, “btn btn-rounded btn-warning” etc…) or create your own style and put in a custom.css file…

---

Attachments:

1. 

1 user says Thank You to polo974 for this useful post

1. linnea

[linnea Friend linneaJoin date: April 2015Posts: 68Downloads:0Uploads:9 Thanks: 24 Thanked: 1 times in 1 posts]

#570932

Ok, thank you. I guess I was wondering if there was a list of all the button classes somewhere in the Uber documentation. I have been looking at the Uber Demo Typo page but it seems a bit clumsy to have to inspect the element in my browser to find out the class. But maybe that’s the only way to do it?

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#570933

In variable.less file in your template folder you have this :


// Buttons
// -------------------------

@btn-font-weight: @font-weight-normal;

@btn-default-color: #fff
@btn-default-bg: @gray-dark;
@btn-default-border: darken @gray-dark, 5%);

@btn-primary-color: #fff
@btn-primary-bg: @brand-primary;
@btn-primary-border: @brand-primary;

@btn-success-color: #fff
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);

@btn-warning-color: #fff
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);

@btn-danger-color: #fff
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);

@btn-info-color: #fff
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);

// T3 Note: Add "Inverse" style for Button
@btn-inverse-color: @gray-dark;
@btn-inverse-bg: rgba(225,225,225,0.9);
@btn-inverse-border: transparent;

@btn-link-disabled-color: @gray-light;

@btn-rounded-radius: @t3-global-padding;
@btn-rounded-lg-radius: @btn-rounded-radius * 2;

@btn-border-width: 3px;

which can give you an overview of the button existing in uber, but you have to “understand” less language (it’s pretty much like CSS ).

You can also make many custom buttons with this :

http://www.bestcssbuttongenerator.com/

[Author]

Posts