Jump to content

Archived

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

jmad

Button Shortcode Colors

Recommended Posts

jmad

Is it possible to change the color of the built in button shortcodes?  Or if I've used a shortcode button generator in WP can I change the button that automatically shows with the hero?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You can create your own button colors using custom LESS/CSS. However, these custom button colors will not be available in the Hero section option, as the section has already determined the colors in the sections code.

 

Therefore, if you want to have a custom color in your Hero section you will need either not use the Button option and instead use the Shortcode in the Hero sections text field or override the Hero buttons CSS.

.btn-purple {
  color: @white;  
  .buttonBackground(lighten(@[member="purple"], 10%),@[member="purple"]);
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 
  &:hover {
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    color: @white;
  }
  &:active {
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  }
}

You can then use that button in your HTML and Shorcodes.

 

<a href="Add Your URL Here" class="btn btn-large btn-purple">Purple Large</a>

 

[pl_button type="purple" link="Add Your URL Here"]Button Label[/pl_button]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

I added that coded to the Custom CSS and then the btn-purple class to the Hero but it changed the hover color of the hero not the button.  What did I miss?

Share this post


Link to post
Share on other sites
Danny

Can you provide a link to the site in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

I figured it out.  One question, should I add the HTML or short code to the subtext section of the hero or is it better elsewhere.

Share this post


Link to post
Share on other sites
Danny

You should be able to use either. However, I prefer to HTML to shortcodes, but the choice is up to you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

I've probably done something incorrect but if I'm want the button to be this color #4d0505 how would I do it?  I substituted it for the 'purple' and received a less error.

Share this post


Link to post
Share on other sites
Danny

A Parse Error means you have errors in your CSS. Therefore, can you copy and paste the code you're using below please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

 

I ended up getting this to work and am customizing more.  So I used the code below to create a button with transparent background and 2px border with the border and text changing to gray on hover.  Seems to work fine.  However, I would like to change the width to a fixed number for the desktop but still have the box fill the width of a mobile device and center...using the code below and adding width: 100px;   makes the box stay 100px but also left aligns on mobile and doesn't expand to fill the mobile.   Hope this makes sense...I've searched the code but can't find what I need to change.  I assume it's an @media but can't get it to work.  

 

Also, what are the @media sizes/code you recommended using for tablets and smart phones (android, windows, iOS)?  I couldn't find any recommendations in your docs and why does the link to Docs keep appearing and disappearing from the Pagelines homepage?

 

.btn{
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
  font-family: Titillium Web;
  color: #2bd3d8;
  font-size: 15px;
  background: rgb(0,0,0,0);
  padding: 10px 20px 10px 20px;
  border: solid #2bd3d8 2px;
  text-decoration: none;
  text-shadow: none;
}
 
.btn:hover {
  color: #a2a09e;
  text-shadow: none;
  background: rgb(0,0,0,0);
  border: solid #a2a09e 2px;
  text-decoration: none;
}

Share this post


Link to post
Share on other sites
Danny
Not sure what you're referring to in regards to the docs link?
 
Our documentation shouldn't really cover @media queries as they're related to CSS. Therefore, you will need to find a good CSS resource for more information such as - http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

The docs link has sometimes been on the Pagelines homepage and sometimes not.  

 

On the box issue...so do I need to just write use @media css to to make the box expand and center?

Share this post


Link to post
Share on other sites
Danny

The idea of @Media Queries is that you can adapt your elements to conditions such as screen resolution. Therefore, if you want to have a button appear larger and be centered, you will do so by using the media query of choice i.e. screen resolution (which you can find the link I gave you above) and then add your button css class, then apply your custom CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×