1. Style Guide

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: 

<div class="hanging"> </div> 

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

<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="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" 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>

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

<!-- Add icon library -->
<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>

<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&amp;p=1745458#s-lg-box-wrapper-29379270" target="_blank"> Virtual & On-Campus Hours</a></h3>

Buttons with Collapsed Details

How do I get into the databases?    Looking for a specific book or article?

<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>

<div class="col">
<div class="collapse multi-collapse" id="multiCollapsespecific">
<div class="card card-body">
<p>&nbsp;</p>

<p>&nbsp;</p>

<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. 

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. 

<i class="fa fa-motorcycle" aria-hidden="true"></i> 

 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

With coding you can add changes to your boxes to showcase information for students. The first two boxes are examples of citing example in Chicago format and the other boxes are to show the different styles boxes can be made into should you like the help to format them. 

<div style="border: 1px solid black; padding: 10px; background-color:cornsilk;">
<p class="hanging indent">
<span style="font-family:Times New Roman,Times,serif;">Ogden, Daniel.&nbsp;<em>The Werewolf in the Ancient World.&nbsp;</em>Oxford University Press, 2021.</span>
</p>
</div>

<div style="border: 1px solid black; padding: 10px; background-color:cornsilk;">
<p class="hanging indent">
<span style="font-family:Times New Roman,Times,serif;">Ogden, Daniel.&nbsp;<em>The Werewolf in the Ancient World.&nbsp;</em>Oxford University Press, 2021.</span>
</p>
</div>
 

<div style="border: dotted black; padding 10px; background-color:darkseagreen;">
<p>This is a dotted black border style with a dark sea green background.</p>
</div>

<div style="border: dashed green; padding 10px; background-color:HoneyDew;">
<p>This is a dashed green border style with a honeydew background.</p>
</div>

<div style="border: double red; padding 10px; background-color:Orchid;">
<p>This is a double red border style with an orchid background.</p>
</div>

<div style="border: 5px groove; padding 10px; background-color:silver;">
<p>This is a groove border style in 5px size with a silver background.</p>
</div>

<div style="border: 5px ridge; padding 10px; background-color:snow;">
<p>This is a ridge border style in 5px size with a snow background.</p>
</div>

<div style="border: inset; padding 10px; background-color:Bisque;">
<p>This is a inset border style with a bisque background.</p>
</div>

<div style="border: outset; padding 10px; background-color:chocolate;">
<p>This is a outset border style with a chocolate background.</p>
</div>

This code is used to create a navigation or cookie trail to the other LC-team pages. Rearrange the order as appropriate for your page.

<nav class="nav"><a class="nav-link" href="https://www.lonestar.edu/lsc-kingwood-tutoring.htm">Learning Support: Tutoring Services</a>&nbsp;&nbsp;&nbsp

<a class="nav-link" href="https://www.lonestar.edu/kw-learning-commons">Learning Commons</a>&nbsp;&nbsp;&nbsp;

<a class="nav-link active" href="https://www.lonestar.edu/library/kingwood">Library Services</a></nav>