Jump to content
Sign in to follow this  
seeyou30

How To Make Bootstrap Labels And Badges Become A Link (Like Button).

Recommended Posts

seeyou30    1
seeyou30

Hi,

PL 2.3.5

I like this tiny look of Labels and Badges, so I want them to be clickable.

I know I can use Buttons but still want labels and badges for design purpose.

Is there a way to customize colors in them?

tnx

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

Labels like Buttons and Badges come in multiple colors, you can view all the colors available here - http://demo.pagelines.me/tools/

Although, Labels and Badges don't support the function to be used as a link "Out of the Box", you could add HTML to create a link. However, you could simply use the button shortcode and use the mini button to have a similar effect.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
seeyou30    1
seeyou30

thank u for ur answer.

there are only 6 colours available.

and yes, Id like to have clickable badges and labels.

what exactly needed to make them links?

ty

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Well the Labels and Badges do not support links, so in doing this you will need to apply some custom CSS.


.label a, .badge a {
color: white;
}
[/CODE] To add a link to a label or badge you will need to use actual HTML and not the shortcode. See the example below.
[CODE]<span class="label label-purple"><a href="http://www.pagelines.com/">Purple Label</span>
To create custom colors, use the code above to add your custom class ( see label-purple ) this is a custom class and then use the custom CSS below to style the label and badge.


.label-purple, .badge-purple {
background-color: purple;
}


[/code]

If you need to see other HTML code for labels and badges, visit this page - http://twitter.github.com/bootstrap/components.html#labels-badges


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
seeyou30    1
seeyou30

wow thank you, worked like a charm

resolved

Share this post


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

The topic was marked as resolved.


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

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

Sign in to follow this  

  • Similar Content

    • ppotent
      By ppotent
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • nandorj78
      By nandorj78+
      I checked the demo for the new bootstrap theme (http://themes.pagelines.com/bootstrap/) and I really liked the slider on it. I suppose it was not done using 'impulse' or 'flick slider', was it? How was it done?
    • micstepl
      By micstepl+
      is Bootstrab (http://getbootstrap.com/ ) kompatible to PL5? how to install most fitting?
    • respectgb
      By respectgb+
      Hi,
      I'm having problems with bootstrap popovers being cut off the edge of the browser. I'm using the latest version of dms (2.2) and this problem occurs on all browsers tested. Please can you let me know how we can fix this?

      Cheers

    • brightonkeller
      By brightonkeller+
      For some reason my Tabbed content isn't working correctly (see this page - click on all tabls)
       
      It could TOTALLY be the shortcodes I've got in there but I wanted to see if any of you could pinpoint the issue faster than I could. Any help would be must appreciated. 
       
      attached is a screenshot of what I see.
       
      And here is the code I have in the edit html...
      [pl_raw][pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle active="yes" number="1"]Currently Obsessed[/pl_tabtitle] [pl_tabtitle number="2"]gifts for him[/pl_tabtitle] [pl_tabtitle number="3"]Office // Desk[/pl_tabtitle] [pl_tabtitle number="4"]PLAID TREND[/pl_tabtitle] [pl_tabtitle number="5"]GIFT IDEAS[/pl_tabtitle] [pl_tabtitle number="6"]baubles[/pl_tabtitle] [pl_tabtitle number="7"]FUR VESTS[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] [show_boutique_widget id="122328"] [/pl_tabcontent] [pl_tabcontent number="2"] [show_boutique_widget id="201724"] [/pl_tabcontent] [pl_tabcontent number="3"] [show_boutique_widget id="203968"] [/pl_tabcontent] [pl_tabcontent number="4"] [show_boutique_widget id="201832"] [/pl_tabcontent] [pl_tabcontent number="5"] [show_boutique_widget id="176320"] [/pl_tabcontent] [pl_tabcontent number="6"] [show_boutique_widget id="203960"] [/pl_tabcontent] [pl_tabcontent number="7"] [show_boutique_widget id="176328"] [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs][/pl_raw]
×