Jump to content


Photo
- - - - -

Feature Overrides Button Styling


  • Please log in to reply
8 replies to this topic

#1 arlomiller

arlomiller

    Advanced Member

  • Members

  • 97 posts
  • Framework Version:1.1.8
  • Country: Country Flag

Posted 27 December 2012 - 07:56 PM

Please Login or Register to see this Hidden Content

 

On the first feature "Patient Centered Care"

I've tried putting in some buttons using this code

 

[pl_button type="info" size="large" link="

Please Login or Register to see this Hidden Content

"]Learn More[/pl_button]
 
 
<button class="btn btn-large btn-info" link="

Please Login or Register to see this Hidden Content

">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="

Please Login or Register to see this Hidden Content

"]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?   


#2 James B

James B

    Advocate

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

Posted 27 December 2012 - 09:23 PM

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

 

Please Login or Register to see this Hidden Content

You can find full information on the bootstrap buttons and the various options you can apply to them here -

Please Login or Register to see this Hidden Content

 

Hope that helps



#3 arlomiller

arlomiller

    Advanced Member

  • Members

  • 97 posts
  • Framework Version:1.1.8
  • Country: Country Flag

Posted 27 December 2012 - 09:32 PM

Tried inserting this code:

<a href="

Please Login or Register to see this Hidden Content

" class="btn btn-large btn-info">Learn More</a>

and i still just get the stupid little grey button.



#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 27 December 2012 - 09:56 PM

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.



#5 James B

James B

    Advocate

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

Posted 28 December 2012 - 01:08 AM

Ok in that case I have the following working

 

Please Login or Register to see this Hidden Content

 

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

Please Login or Register to see this Hidden Content


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

 

Please Login or Register to see this Hidden Content

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



#6 arlomiller

arlomiller

    Advanced Member

  • Members

  • 97 posts
  • Framework Version:1.1.8
  • Country: Country Flag

Posted 28 December 2012 - 07:44 PM

getting there.  button came out transparent.  hmm.



#7 James B

James B

    Advocate

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

Posted 29 December 2012 - 12:25 AM

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.

 

Please Login or Register to see this Hidden Content

So to apply to the button above try

 

Please Login or Register to see this Hidden Content



#8 jankowalski

jankowalski

    Advocate

  • Members
  • 346 posts
  • Country: Country Flag

Posted 23 March 2013 - 04:24 PM

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

 

Please Login or Register to see this Hidden Content

As written on tools page 

Please Login or Register to see this Hidden Content


 

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



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15120 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 March 2013 - 09:11 AM

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

 

Please Login or Register to see this Hidden Content

 

@jankowalski

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