Jump to content


Photo
- - - - -
Resolved

Pl_Button - Add Additional Colors

pl buttons

Best Answer Evan Mattson , 02 November 2012 - 04:10 AM

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! Go to the full post


  • Please log in to reply
7 replies to this topic

#1 tsalstrand

tsalstrand

    Super Member

  • Members

  • 225 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 31 October 2012 - 07:01 PM

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!

#2 batman

batman

    Bat Learning

  • Members

  • 1776 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 31 October 2012 - 08:10 PM

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



#3 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 31 October 2012 - 11:45 PM

Let us know if Batmans solution worked for you

#4 tsalstrand

tsalstrand

    Super Member

  • Members

  • 225 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 01 November 2012 - 03:12 PM

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?

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2012 - 01:04 AM

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.

#6 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 196 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 02 November 2012 - 04:10 AM   Best Answer

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!
  • tsalstrand and Jean-Philippe like this

#7 tsalstrand

tsalstrand

    Super Member

  • Members

  • 225 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 05 November 2012 - 08:48 PM

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!

#8 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 06 November 2012 - 01:54 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, pl buttons