Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Pl_Button - Add Additional Colors


Question

Posted · Report post

On this page: http://demo.pagelines.me/tools/, 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


onmouseover

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!

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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:

.btn-awesome {

  color: @white;  

  .buttonBackground(@startColor, @endColor);


  &:hover {

    text-shadow: 0 -1px 0 rgba(0,0,0,.25);

    color: @white;

  }

  &:active {

    color: rgba(255,255,255,.75);

  }

}

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:
<a href="some url" class="btn btn-awesome">click here</a>

Hope that helps, good luck!

2 people like this

Share this post


Link to post
Share on other sites

Posted · Report post

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 http://www.pagelines...wiki/Custom_CSS

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

.btn-success {

	background-color: rgb(91, 183, 91);

	background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81));

	background-repeat: repeat-x;

	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
For mouse hover
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {

	background-color: rgb(81, 163, 81);}


.btn-success {

	background-color: rgb(91, 183, 91);

	background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81));

	background-repeat: repeat-x;

	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}

Share this post


Link to post
Share on other sites

Posted · Report post

Let us know if Batmans solution worked for you

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites