Guides: 1. Style Guide: Coding Tools

Coding Tools

When you want an embedded item, like a video, to be center-aligned in the box, you can add a little code int he widget asset.

<iframe width="560" height="315" src="https://www.youtube.com/embed/OdfEmLOy4sM" frameborder="0" allowfullscreen class="center-block"></></iframe>

Hanging Indentation (for citations)

There is a custom CSS class in the Admin. Look and Feel. This is a one-time set up, but if you need to input it again, the code is:

<style>

.hanging {

padding-left: 20px;

text-indent: -20px;

}

</style>

When you need to format a citation in the Rich Text Editor, wrap the text with these tags in the HTML code:

Original ripped from getbootstrap.com

Editing the code samples (important!)

You can have more than one of these on a page, but they have to use different names for the groups.
Edit the titles and contents in Source view, not the regular rich text editor.
To add on additional rows:

To add new subheaders, just insert this section of code before the final <div>. You need to update all the yellow-highlighted PLUSONE spots to name the new row section something unique from the previous. The original code (linked above) used numbers; I've swapped to letters in my version.

Title of Section

</a>

</h4>

</div>

This “body” text can be edited in the regular rich text editor.

</div>

Behaviour: first row starts out expanded. Clicking new rows closes open rows (only one row is expanded at a time).

Behaviour: first row starts out expanded. Clicking new rows does NOT close open rows: everything can stay open at once. (User can manually close a row by clicking it.)

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseA" aria-expanded="true" aria-controls="collapseA"> Collapsible Group Item A </a> </h4> </div> <div id="collapseA" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseB" aria-expanded="false" aria-controls="collapseB"> Collapsible Group Item B </a> </h4> </div> <div id="collapseB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div>

To make a star rating like this: enter the below code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>

Create an Infographic in Springshare (not an image!)

Success! Indicates a successful or positive action.

Info! Indicates a neutral informative change or action.

Warning! Indicates a warning that might need attention.

Danger! Indicates a dangerous or potentially negative action.

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Help Videos

<p><a aria-pressed="true" class="btn btn-primary btn-lg active" href="https://www.youtube.com/channel/UCtU9lWpljPEckoFmxzyM-Pw" role="button">Help Videos</a></p>

Full Button Width

Virtual & On-Campus Hours

<h3 style="text-align:center"><a class="btn btn-primary btn-lg btn-block" href="https://kwlibguides.lonestar.edu/c.php?g=261303&p=1745458#s-lg-box-wrapper-29379270" target="_blank"> Virtual & On-Campus Hours</a></h3>

Buttons with Collapsed Details

To log into the free digital resources, you can:
1. Enter your 14-digit library card number, or
2. Click on the link under the login button to sign in using your myLoneStat username and password.*

*This method only works on databases subscribe to by the system.

Search the library catalog for book titles.
Search the Full Text Finder for the newspaper, magazine, or journal title for links to articles found in LSC databases.
Still looking? Request books and articles from libraries in Texas and beyond.

<p style="text-align:center"><button aria-controls="multiCollapselogindatabase" aria-expanded="false" class="btn btn-primary" data-toggle="collapse" href="#multiCollapselogindatabase" role="button">How do I get into the databases?</button>    <button aria-controls="multiCollapsespecific" aria-expanded="false" class="btn btn-primary" data-target="#multiCollapsespecific" data-toggle="collapse" role="button">Looking for a specific book or article?</button></p>

<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapselogindatabase">
<div class="card card-body">
<p>To log into the free digital resources, you can:<br />
1. Enter your 14-digit library card number, or<br />
2. Click on the link under the login button to sign in using your myLoneStat username and password.*</p>

<p>*This method only works on databases subscribe to by the system.</p>
</div>
</div>
</div>

<ol style="list-style-type:decimal" type="1">
   <li><strong><a href="http://hcpl2.ent.sirsi.net/client/en_US/lsc/" target="_blank">Search the library catalog</a></strong> for book titles.</li>
   <li><strong><a href="http://lscsproxy.lonestar.edu/login?url=http://atoz.ebsco.com/home.asp?id=5930" target="_blank">Search the Full Text Finder</a></strong> for the newspaper, magazine, or journal title for links to articles found in LSC databases.</li>
   <li>Still looking?<strong> <a href="http://www.lonestar.edu/library/interlibrary-request.htm" target="_blank">Request books and articles from libraries in Texas and beyond</a>.</strong></li>
</ol>
</div>
</div>
</div>
</div>

Add an un-numbered paragraph between numbered items on a list

Say you want to add another paragraph associated with a numbered item you are typing up in the Rich Text. In order to continue to numbering sequence, you have to hit shift + enter to prevent the subsequent line from being numbered. If you were to hit enter again, the list should continue in the proper number sequence.

FontAwesome Icons

Icons are standard images used to help people easily and visually identify information on the page. Springshare LibGuides uses Font Awesome Icons. Go to Font Awesome’s website and browse or search for icons to use. Once you find the icon that you like, click on it. You will get a preview of the different sizes. The basic size will be the smallest one, found on the far right. You will notice that the icon is typically labeled fa-something. This label is the name you will be using in the code. Underneath that you should have the <i class=…> code with the label in it. Copy it!

To embed the icon, go into the HTML code of the Rich Text Editor, locate the place you wish to add the icon, and embed the code provided.

For example

Tooltip is a small pop-up box that appears when the user moves the mouse over an element.

For Example

To create a tooltip, add the data-toggle="tooltip" attribute to an element.

Use the title attribute to specify the text that should be displayed inside the tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Bootstrap 4

The code below is the layout used on the LC page where there are contrasting rows of information on either blue or white background. The parts of the code that are highlighted in yellow with caps locked text indicate areas that need editing. The light blue highlights the section background color.

<section class="section section-dark">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2 class="text-white">SECTION HEADER</h2>
</div>
</div>