Jump to content
arlomiller

Feature Overrides Button Styling

Recommended Posts

arlomiller    7
arlomiller

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Simon    247
Simon

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
James B    436
James B

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 :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
arlomiller    7
arlomiller

getting there.  button came out transparent.  hmm.

Share this post


Link to post
Share on other sites
James B    436
James B

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;} 
 

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jankowalski    3
jankowalski

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
Danny    1,327
Danny

@arlomiller, follow James suggest above also, we have documentation which has more information on how to create a custom button.

 

http://support.pagelines.me/docs/customization/create-custom-buttons/

 

@jankowalski

Not sure what you're referring to, can you create you own topic please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×