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.

Table Sorter

Simply turn your table into a sortable table by adding the "tablesorter" class to your table tag.  The THEAD and TBODY tags also need to be present for the plugin to work - details and example below. 

  • Multi-column sorting : add “tablesorter” class to the required table
  • Disable sorting from particular column : add “sortless” class to the required TH column within THEAD tag.
  • Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
  • Cross-browser support : IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

IMPORTANT

  1. THEAD and TBODY tags are compulsory in the desired table, otherwise this plugin will not work.
  2. Add "tablesorter" class in the desired TABLE tag.
  3. For column heading, use TH tag within THEAD tag.
  4. If you want to exclude a particular column, add "sortless" class to that TH tag.

/*===== Example of Table Code =====*/

<table class="tablesorter" style= "cellspacing="0" cellpadding="0">
<thead>
<tr style="height: 24px; border: 1px solid #dad9c7;">
<th>Sortable Header 1</th>
<th>Sortable Header 2</th>
<th>Sortable Header 3</th>
<th class="sortless">This is a Non-Sortable Header</th>
</tr>
</thead>
<tbody>
/*===== Table Body Content Here =====*/
</tbody>
</table>

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="https://www.google.com" 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: