Archived

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

  • 0

Feature Overrides Button Styling

Question

Posted · Report post

http://dev.millerfamilydermatology.com

 

On the first feature "Patient Centered Care"

I've tried putting in some buttons using this code

 

[pl_button type="info" size="large" link="http://dev.millerfamilydermatology.com/about/mission-and-care-philosophy/"]Learn More[/pl_button]
 
 
<button class="btn btn-large btn-info" link="http://dev.millerfamilydermatology.com/about/mission-and-care-philosophy/">Learn More</button>
 
The first one works as a link, but the 2nd one has the styling I want.  Everyplace else on the site where i've put in  the code [pl_button type="info" size="large" link="http://dev.millerfamilydermatology.com/about/mission-and-care-philosophy/"]Learn More[/pl_button].  I get a nice light blue button, but when I try to do this in the Feature area, I get a crappy little gray button.  Why?   

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

getting there.  button came out transparent.  hmm.

Share this post


Link to post
Share on other sites

Posted · Report post

Which browser are you using, could be that you need to add another css line for the gradient, different browsers use different css for the gradients. The full spectrum for gradients in different web browsers is below.

 

 {
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));

/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);

/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; }

So to apply to the button above try

 

.mybtn {background-color: #49AFCD;
    background-image: linear-gradient(to bottom, #5BC0DE, #2F96B4)!important;
background: -webkit-gradient(linear, left top, left bottom, from(#5BC0DE), to(#2F96B4));
background: -moz-linear-gradient(top, #5BC0DE, #2F96B4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5BC0DE, endColorstr=#2F96B4);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5BC0DE, endColorstr=#2F96B4)";
 background-repeat: repeat-x !important; 
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important; 
color: #FFFFFF !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important; 
border-radius: 6px 6px 6px 6px !important; 
font-size: 17.5px !important; 
padding: 11px 19px !important;} 
 

Share this post


Link to post
Share on other sites

Posted · Report post

this works great for shortcode [pl_button type="info" link="#"]button[/pl_button]

 

<a href="#" class="btn btn-large btn-info ">button</a>
 

As written on tools page http://demo.pagelines.me/tools/
 

You may find that Wordpress inserts line-breaks when using Shortcodes on different lines, as in our example here. To prevent this from ruining your day, wrap problematic shortcodes in RAW. Example: rawSC.png?v=1363434364

 

 

But actually I can not inspect a [pl_raw][/pl_raw] shortcode to find a class and insert it into function. What class is using this shortcode?

thanks

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

If you're inserting the buttons using html instead of the pl shortcodes you'll need to enter the link and the styling slightly differently to get it to work, the formatting isn't the same as using the shortcode markup.

 

The grey button is appearing as its using the default button. An example of the html markup is below, you can change it to suit

 

<a href="#" class="btn btn-large btn-info ">Primary link</a>

You can find full information on the bootstrap buttons and the various options you can apply to them here - http://twitter.github.com/bootstrap/base-css.html#buttons

 

Hope that helps

Share this post


Link to post
Share on other sites

Posted · Report post

The feature area has its own <a> styling, you will have to override it with css if you want it to look like the blue button.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok in that case I have the following working

 

http://screencast.com/t/DtxWu5tE6

 

Create your own button class (mybtn) with the required info inside


<a href="#" class="mybtn btn-large btn-primary">Primary link</a>


Then apply the following css using !important to override the <a> styling

 

.mybtn {background-color: #49AFCD;
    background-image: linear-gradient(to bottom, #5BC0DE, #2F96B4)!important;
    background-repeat: repeat-x !important;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
border-radius: 6px 6px 6px 6px !important;
    font-size: 17.5px !important;
padding: 11px 19px !important;}

You might have to add a margin-top:50px to the above as I found my button came up too high and the top was cut off.

 

Hope that works for you :-)

Share this post


Link to post
Share on other sites