Typography

Typography examples and guidelines. This is intro text and all articles should have it. Separate intro text from the full text of your articles by clicking this button in the WYSIWYG editor

Text Styling


text link - Do not use titles for text links. Image links can and should use titles. Do not BOLD text links or change their color.  

Acronyms:
JCM
- hover over it to see the effect.
Example: <acronym title="Joomla! Community Magazine">JCM</acronym>
Acronyms should be used in accordance with our Linguistic Style Guide.

strong text - Use the B button in the WYSIWYG editor

deleted text.

Paragraph


Image Description<p> Use paragraph breaks often. Studies have shown that text is easier to read online when broken into smaller paragraphs.</p>

To get a paragraph (double-line) break, use the ENTER key in the WYSIWYG editor. Use the SHIFT and ENTER keys together to get a single-line break or <br>

<p class="info"> Use this class when you have some additional information to share that doesn't flow into your article. Links to external sites or descriptions of the products/website/services in question would be an example.</p>

"Blockquotes are styled with horizontal lines above and below them. Do not use the <hr> tag with blockquotes."
-blockquote

Headings

h1 Heading

 - H1 is styled the same as the article title so use with caution

h2 Heading

- Use H2 when breaking up articles into sections.

h3 Heading

- Use H3 as subheadings or subtopics under H2. Do not use unless you have a preceding H2 tag. This improves SEO.

h4 Heading

- Can be used for emphasis where needed. Does not require the use of a preceding H2 or H3 tag. Note that the H4 tag is styled very similarly to article introtext. To avoid confusion, do not begin your full text with H4 tags.

h5 heading - use for interview questions within the article

 

Unordered Listing <ul><li>

Use when you have a list of at least two items which are not sequential.

  • Components
  • Modules
  • Plugins

Ordered Listing <ol><li>

Use when you have a list of at least two items which are sequential.

  1. Download the latest release .zip
  2. Upload .zip to your web server
  3. Unzip files
  4. Remove the .zip file

Definition term <dl><dt><dd>

<dt> Frog</dt>
<dd>Wet green thing</dd>
<dt>Rabbit</dt>
<dd>Warm fluffy thing</dd>

Code <pre></pre>

a:link, a:visited { color:#0066cc; text-decoration:none }
a:hover { text-decoration: underline; }
a:focus { outline:0; }
ul.nav li a { line-height:30px; padding:2px 5px; font-size:120%; }
ul.nav li a:hover { background:#000; color:#fff; text-decoration:none; }
ul.nav li a:focus { background:#333; color:#fff; }
ul.menu li a { line-height:24px; padding:2px; }
ul.menu li ul li a { line-height:18px; padding:2px; }
<?php if( $task == 'plugin' || $task == 'help' ){
require_once( JPATH_ADMINISTRATOR .DS. 'components' .DS. 'com_jce' .DS. 'editor.php' );
exit();
} ?>

Tables

th heading th heading th heading
They push the human race forward. Maybe they have to be crazy. How else can you stare at an empty canvas and see a work of art? Or sit in silence They push the human race forward. Maybe they have to be crazy. How else can you stare at an empty canvas and see a work of art? Or sit in silence They push the human race forward. Maybe they have to be crazy. How else can you stare at an empty canvas and see a work of art? Or sit in silence

 

Last modified on Saturday, 03 July 2010 16:11