If your site is running on Drupal 7 with the official GT Theme and the GT Editor module, then you should have a Styles drop-down option in the toolbar of your WYSIWYG (GUI) text editor (AKA CKEditor) with the following formatting styles. If you are not using both the official theme and the GT Editor module, then you will not see any of these styles (and may not even see the Styles drop-down option).
"Block" styles
"Block" styles describes HTML elements or containers which do NOT sit next to each other on a line, but "own" the entire page's width for the lines they fill.
Basic HTML Styles
These first options are mainly headings, so you can add visual (and invisible) outlines to your pages and make it easier for people to scan them quickly.
- Heading <h3>
- Subheading 1 <h4>
- Subheading 2 <h5>
- Subheading 3 <h6>
- Preserve format <pre>
Image and Media Styles
Mostly, these options style images within your pages. They work best when you place your image on its own line, and not inside a paragraph.
- Float Left: moves your image to align with the LEFT side of the page and makes other text wrap around your image on the same lines it occupies.
- Float Left - Simple
- Float Left 70%
- Float Left 50%
- Float Left 30%
- Float Right: moves your image to align with the RIGHT side of the page and makes other text wrap around your image on the same lines it occupies.
- Float Right - Simple
- Float Right 70%
- Float Right 50%
- Float Right 30%
- Clear Floats: forces text to NOT wrap around your image, so that the image has lots of white space on either side of it.
- Clear Float Left
- Clear Float Right
- Embedded Media Wrapper: not currently used, but may one day make videos more responsive on various sizes of device.
For Themers: these apply a <div> with a special class around the selected image or media. That <div> may replace the <p> element if your image is within a paragraph, leading to incorrect styling. This is intentional, as every Float style (except for those ending in "Simple") is designed to provide special styling to any text that accompanies your Floated image.
Paragraphs, Buttons and Links
Add visual enhancements to paragraphs or turn small phrases or a short sentence into a special button or link.
- Intro Text: makes a paragraph's font size and line spacing larger (designed to be used only for the FIRST paragraph on a page).
- Yellow Highlight Button
- Blue Highlight Button
- Jump Link
For Themers: these apply a <p> with a special class around the selected text.
"Inline" styles
"Inline" styles describes containers which are designed to sit next to each other on the same line and usually occur within a paragraph.
Basic HTML Styles
- Computer Code <code>
- Cited Work <cite>
- Inline Quotation <q>
- Block Quotation <blockquote>
Pull Quotes
- Pull-quote - Left: styles a sentence as a large quote on the LEFT side of the page.
- Pull-quote - Right: similar to above, but on the RIGHT side of the page.
For Themers: these apply a <blockquote> with a special class around the selected text.
File Types
Add icons to your selected text, which show pictures of the related file type.
- PDF Icon
- MS Word Icon
- MS Excel Icon
- MS PowerPoint Icon
- Generic File Icon
For Themers: these apply a <span> with a special class around the selected text.