html

Visual Editor Altering HTML

Description

You edited a page through the Text editor, but when you switch to Visual editor, some of the HTML you added changes or is removed.

This is known to happen specifically when adding Bootstrap Collapsible Accordion Menus and anchors but may happen with other bits of code as well.

Accordions

If you add a collapsible accordion menu to your page through the text editor, it deletes the following line of code from every panel:

<a class="collapsed" href="#PanelID" data-toggle="collapse" data-parent="#accordion">

It also deletes the corresponding </a>. Note that this <a> tag wraps each .panel-heading div.

Anchors

Sometimes when you add an anchor on a page, it will later disappear. This does not happen all the time but it appears to happen by either adding an anchor in the Visual editor, switching to text editor, and switching back to Visual, or adding an anchor in the text editor and switching to Visual.

Steps to Fix the Issue

Because there is no known solution for this issue, the best thing to do would be to avoid going back into Visual editor on any page that has a collapsible accordion menu/anchor. If you do go into Visual editor, you could do one of two things:

  • Click Browse next to Revisions in the Publish box and restore the latest version that had the full code (if there are any).
  • Go back and manually re-add the code yourself.

Other Code

If the above suggestions do not solve your issue or you’ve found other code that the Visual editor alters, please email us at webdev@uconn.edu.

Browser Development Tools

In order to target specific elements on a page with CSS, you will have to figure out which HTML tags/classes to use. This can be easily done on your browser using the built-in development tools.

Instructions

  1. Right click on the element you wish to style with CSS
  2. Click 'Inspect' (Google Chrome) or 'Inspect Element' (Firefox, Internet Explorer, Safari)

You will now see the HTML that makes up the webpage, focused on the line(s) related to the element you're targeting. In addition, Inspect Element allows you to temporarily edit the HTML or CSS of a page which will go away once the page is reloaded.

Bootstrap-Specific HTML

Because both Sherman and Hale 2015 are Cornerstone-based sites, they support the features that come with the Boostrap 3 framework.  These features include, but are not limited to the following:

For additional information about the features that Boostrap 3 has to offer, you can visit the Bootstrap 3.3.4 website.

Text Wells

You may use a well to give your div box an inset effect. To do so, simply give the div a well class.

Normal Well

Sample Code:

<div class="well">Some text goes here.</div>

Result:

Some text goes here.

Large Well

Sample Code:

<div class="well well-lg">This is a large well.</div>

Result:

This is a large well.

Small Well

Sample Code:

<div class="well well-sm">This is a small well.</div>

Result:

This is a small well.

Glyphicons Guide

Glyphicons is a library of icons that can be added to links, headers, and buttons with a just bit of HTML. By adding classes to links, headings, or buttons, you can quickly draw attention to a section of your site.

Adding Glyphicons to Your Site

For sites using Cornerstone-based themes like Sherman and Hale 2015, site webmasters can add any of the glyphicons from Bootstrap 3. Go to the glyphicons website to search for glyphicons. When you find one you want to use, simply click on it and a code will appear for you to copy. Copy that code and paste it where you want the glyphicon to show up! It must be pasted in the text editor of the page's or post's edit screen.

Feel free to browse all the glyphicons on glyphicons.com. However, if you know what you're looking for, you can type keywords into the search bar at the top.

Example: up-arrow glyphicon

  1. Type "arrow" into the search bar
  2. Click on the desired icon and copy the HTML that appears

    The following is the full line of HTML that was copied:

    <span class="glyphicons glyphicons-arrow-up"></span>
  3. Paste that line of code into the text editor view of your page's edit screen:
Note: switching back to the visual editor after pasting a glyphicon code may result in the deletion of the code itself.

Styling Glyphicons

General

If you want to target all glyphicons on your site, you may do so using the .glyphicons class. For example, to change the size of all glyphicons to 24px, you would need to add the following to your Custom CSS:

.glyphicons{
font-size:24px;
}

Style by Type

To target only a specific type of glyphicon (such as the up arrow that was used in the previous example), you should do so using all of the classes that appear in its HTML code. For example, the code for the up arrow glyphicon is <span class="glyphicons glyphicons-arrow-up"></span>. The two classes that appear (separated by a space) are "glyphicons" and "glyphicons-arrow-up". Therefore, to target this glyphicon in our Custom CSS, we add a period before each class and remove the space inbetween:

.glyphicons.glyphicons-arrow-up{
font-size:24px;
}

Style by Instance

You can always add additional classes to certain glyphicons to get even more specific. For example, say I want to paste another up arrow glyphicon which I want to be blue, but I do not want the other one on this page to change its color. I can add a class "blue-glyphicon" which would result in the following HTML code:

<span class="glyphicons glyphicons-arrow-up blue-glyphicon"></span>

And I would target this glyphicon in my Custom CSS by adding the following CSS code:

.glyphicons.glyphicons-arrow-up.blue-glyphicon{
color:blue;
}

Now I will add the HTML to this page, resulting in a blue up arrow:

Hale and Prudence Themes

The Hale & Prudence themes were built with Bootstrap 2 and can therefore use any of the Bootstrap 2 Glyphicons. Add them using html like that shown below, swapping out the classes as described in the Bootstrap 2 website.

<i class="icon-search icon-white"></i>

Developers

Developers can make use of glyphicons in their custom themes by referencing to the centrally located global files available within their development sandboxes.

Collapsible Accordion Menus

Aurora now has Easy Accordions which are recommended to use instead of Collapsible Accordion Menus. Check out the Easy Accordions Guide for how to use them.

 

Sometimes, you may find that a page or post has too much information and requires a lot of scrolling as a result. One way to fix this is by using collapsible accordion menus. To learn more about how to create these with HTML, visit Bootstrap’s JavaScript guide page. Below is some sample HTML for an accordion menu along with its result.

 

**Accordions are a very advanced feature and are easy to break. Flipping between text/visual when editing your page can cause issues and we recommend that you only edit the page in text mode.

<div id="accordion" class="panel-group">
<div class="panel panel-default">
<a class="collapsed" href="#collapse1" data-toggle="collapse" data-parent="#accordion">
<div class="panel-heading">
<h2 class="panel-title">Panel 1 Heading</h2>
</div></a>
<div id="collapse1" class="panel-collapse collapse in">
<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, 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">
<a class="collapsed" href="#collapse2" data-toggle="collapse" data-parent="#accordion">
<div class="panel-heading">
<h2 class="panel-title">Panel 2 Heading</h2>
</div></a>
<div id="collapse2" class="panel-collapse collapse">
<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, 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">
<a class="collapsed" href="#collapse3" data-toggle="collapse" data-parent="#accordion">
<div class="panel-heading">
<h2 class="panel-title">Panel 3 Heading</h2>
</div></a>
<div id="collapse3" class="panel-collapse collapse">
<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, 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>

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

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

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

Columns

The framework that we use as the base for our sites, Bootstrap, comes with a built-in responsive grid system. This means users can create multiple columns of information on a single row that collapse in when the screen is too small to successfully display all of the information side-by-side. Read about how to implement this using HTML on Bootstrap’s CSS guide page. Note that to do this on a page or post, you must use the ‘Text’ editor.

Buttons

To add buttons to your page/post, you must be in the 'Text' editor view.

Compatible Tags

You can make buttons out of the following HTML tags:

Tag Sample Code
 a
<a class="btn btn-default" href="#" role="button">Link</a>
 button
<button class="btn btn-default" type="submit">Button</button>
 input (type: button)
<input class="btn btn-default" type="button" value="Input">
input (type: submit)
<input class="btn btn-default" type="submit" value="Submit">

Button Classes

You may use the following btn btn-* classes to produce buttons of different colors:

Class Sample Code Output
btn-default
<button type="button" class="btn btn-default">Default</button>
btn-primary
<button type="button" class="btn btn-primary">Primary</button>
btn-success
<button type="button" class="btn btn-success">Success</button>
btn-info
<button type="button" class="btn btn-info">Info</button>
btn-warning
<button type="button" class="btn btn-warning">Warning</button>
btn-danger
<button type="button" class="btn btn-danger">Danger</button>
btn-link
<button type="button" class="btn btn-link">Link</button>

Button Sizes

You may use the following btn btn-* classes to produce buttons of different sizes:

Class Sample Code Output
btn-lg
<button type="button" class="btn btn-primary btn-lg">Large button</button>
N/A (default)
<button type="button" class="btn btn-primary">Default button</button>
btn-sm
<button type="button" class="btn btn-primary btn-sm">Small button</button>
btn-xs
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

Block Buttons

You may also create buttons that fill the entire width of the parent div by adding a btn-block class. For example:

Alert Boxes

You can make any div an alert box by adding alert alert-* classes to it. To add alert boxes to your page/post, you must be in the ‘Text’ editor view.

Class Sample Code Output
alert-success
<div class="alert alert-success" role="alert">Success!</div>
Success!
alert-info
<div class="alert alert-info" role="alert">Information.</div>
Information.
alert-warning
<div class="alert alert-warning" role="alert">Warning.</div>
Warning.
alert-danger
<div class="alert alert-danger" role="alert">Danger!</div>
Danger!

For more information, check out Bootstrap’s Components Page.