7 replies to this topic

[SteveS]

On this page:

Please Login or Register to see this Hidden Content

, about 1/3rd of the way down is gives some shortcodes for adding buttons fast. THIS IS AWESOME! For buttons I'm use to designing two buttons and then the good old HTML

Please Login or Register to see this Hidden Content

So this works great, but there are only 5 different colors... where in the framework would I go to define and add more colors?

Thanks!

[batman]

Hi SteveS,

For example if you use a Success button
You can try add in
PageLines > Site Options > Custom Code > CSS Rules
It is advisable to learn how to do this on your own too.
Check out

Please Login or Register to see this Hidden Content

and change the rgb (#,#,#) as you like.

Please Login or Register to see this Hidden Content

For mouse hover

Please Login or Register to see this Hidden Content

[James B]

Let us know if Batmans solution worked for you

[SteveS]

Thanks for the help Batman!

However, I'm not wanting to override the "success" color... rather, instead of having only the 5 colors that are currently offered I'd like to expand that to 20+ different colors, etc.

Yes, I know how to customize the current buttons with CSS. The problem is that I don't know how to add new buttons to the framework that can be called in with shortcodes. Any idea?

[Rob]

I don't believe you can do that. The solution Batman offered is probably the best one, allowing you to customize colors on an individual basis. If you wrap each button in its own class, then you can change the button colors by class as well as effect. There's no place to add the information by default, per se, but once you have the classes in your stylesheet you can simply wrap new buttons in that class.

[Evan Mattson]

Hey Steve,

No problem, the shortcodes aren't locked to a few types of buttons. They just generate some link markup. No need to override existing button types.

The only thing you need to do is define the css class to style your extra buttons. You'll want to use LESS to create the styling as that is how the existing buttons are styled, and it's really quite easy to make your own. The majority of the styling is already handled by the button shortcode, you just need to handle the extra colors.

For example, if you wanted to create a button type "awesome", you would need to style that with the .btn-awesome css class.

Jumping into some quick LESS:

Please Login or Register to see this Hidden Content

What we just did is created a style for our awesome button that you would call with the pl_button shortcode with a type="awesome". We defined the button type's background color gradient (as well as the hover & active background colors and border color - dynamically), and set our hover & active states for the button text (based on the existing types). The .buttonBackground() mixin does a lot. Cool stuff.

The @startColor and @endColor should be replaced with any less variable or valid css color value (hex, rgb, rgba ..). The gradient goes top-down, so the start color is the top and the end is at the bottom.

To use this button, you would use it the same way you would use the others:

Via shortcode: [pl_button type="awesome" link="some url"]click here[/pl_button]
OR
Old fashioned way:

Please Login or Register to see this Hidden Content

Hope that helps, good luck!

[SteveS]

Man, I've been so busy on projects that I forgot to check back on this thread, but I'm SO glad that I did!!!!!!!!

Evan, you're the $#^*!!!!! Thanks a million, bro! I haven't really learned LESS but you've spelled it out extremely well that I think I can figure it out. Really man, thanks a lot!

[mackenzie]

The topic was marked as resolved.