Skip to Main Content

LibGuides Website Tips

This guide accompanies PALNI's Website Style Guide and focuses on assisting you to create a custom website in LibGuides

Create buttons

You can add custom buttons to your LibGuides by using the built-in Bootstrap features. 

This is a standard button: 

This is a primary button: 

This is a success button: 

This is an informational alert button: 

This is a warning button: 

This is a danger button: 

This is a button that looks like a link: 

You can make buttons larger: 

You can make buttons smaller: 

You can make buttons extra small: 

Here is the code for buttons:

  • Standard button: <button class="btn btn-default" type="button">Default</button>
  • Primary button: <button class="btn btn-primary" type="button">Primary</button>
  • Success button: <button class="btn btn-success" type="button">Success</button>
  • Informational alert button: <button class="btn btn-info" type="button">Info</button>
  • Warning button: <button class="btn btn-warning" type="button">Warning</button>
  • Danger button: <button class="btn btn-danger" type="button">Danger</button>
  • Button that looks like a link: <button class="btn btn-link" type="button">Link</button>
  • Large button: <button class="btn btn-primary btn-lg" type="button">Large button</button>
  • Small button: <button class="btn btn-primary btn-sm" type="button">Small button</button>
  • Extra small button: <button class="btn btn-primary btn-xs" type="button">Extra small button</button>

You can customize buttons further with CSS. You can apply CSS to any of the button classes, but it is a better choice to create your own button class.  You can use CSS such as this to customize a button:

<style>

 /*Below customizes a button*/

.btn-PALNI {

background-color: #006838;
color: #FFFFFF;
 }

</style>

Then use the following code to create the button on the guide: 

<p><button class="btn btn-PALNI" type="button">PALNI button</button></p>

 

See more CSS options here from W3Schools.

Now it's time to make your button do something!
 

This is a button that links to Google: 

Visit Google 

<a class="btn btn-info" href="https://www.google.com" role="button">Visit Google</a>

Or, use buttons in custom forms.  

How to use CSS on LibGuides

There are several ways you can change the CSS for your LibGuides. First, you can visit the "Look & Feel" section of your LibGuides Admin interface and click on the "Custom JS/CSS" tab. Alternatively, you can change the CSS for an entire group of guides by editing the group's "Custom JS/CSS" tab in the group admin interface. Or finally, you can change the CSS for a single guide under the "Guide Layout" drop down menu by clicking on "Guide Custom JS/CSS." Conveniently, the code is the same.