Ecosystem Style Guide

1. Remove inline styles. Any time you see <style= it should be removed and if there's something important styled there it should be sent to Carl to include in a style guide (and move to an external css style sheet.) This includes all style= and <font> tags.
2. Avoid adding space between elements or at the end of a content section. (No extraneous <p> or <p>&nbsp;</p>.
3. Avoid using &nbsp; unless it's called for.
4. Use <p> in place of <div> where a <div> is being used simply to create a new style.
5. Where possible, try not to put spaces inside tags. For example, use <strong>Title Here</strong> not <strong>Title Here </strong> with a space after "Here". This is important if we decide to apply background coloring to certain items.
6. If you come across code that has been commented out - usually with a <-- and a --> - leave the comments but edit the content like you would any other code.
7. Tables
   • Tables should have captions and summaries.
   • Avoid using <p> tags to style in tables. If you need more than one line of text, separate with two breaks <br /><br />
8. Headings
   • H3 is reserved for the largest, first heading in the content area. H4 and H5 for sub-heads. 
   • Do not add <b> or <strong> to headings - this styling will be done via the CSS.
9. Links
   • By default, all non e-ed links will open in a new window and all e-ed links will open in the same window. Therefore, delete all target="_blank" unless there is a compelling reason to leave it. For example, you want an assignment page to open in a new window.
   • Linked text should, where possible, include a meaningful link text instead of a URL. 
   • Check links to make sure they open correctly (especially internal links).
10. Images
    • Maximum size of an image should be 700px. 
    • Crop any whitespace around the image.
    • Images should have meaningful alt tags.  If the image is purely decorative an alt=" " will suffice.
11. A note on dollar signs ($):   If the MathJax module is turned on in a course, the dollar sign acts as some sort of marker to start displaying MathML. This means that anytime you use a dollar sign in a sentence or a table, etc. (but not as part of an equation) the page thinks it is time to start displaying MathML. To force the dollar sign to render properly, either add a backslash before the dollar sign (\$) in the wysiwyg editor (not in the html code) or add a span tag around the dollar sign in the code (<span>$</span>).

Optional Reading

(also Supplemental Reading and Concept Gallery)

Try This, Self Tests, Self Checks

Box with a Left Justified Image Inside

(rarely used)

PSU Advert

(used in OER GIS courses to advertise)

Generic Box for Exceptions

Remember to remove all the cellpadding, cellspacing, width, height, and border elements to all tables.

Checklist Table (Road Map and Assignment Tables)

Data Table Header Top Row Only (will have zebra striping)

Syllabus Letter Grade Table & Short Data Table Cells Centered (will have zebra striping)

Data Table Header Top Row and Side Column

Data Table Header Side Only

Image Center (caption and/or credit lines appear with this style)

The classes "image-center," "image-caption," and "image-credit" may also be used here

Image Left (no caption or credit line)

The class "image-left" may also be used here

Image Right (no caption or credit line)

The class "image-right" may also be used here

Formatting the text around a Floating Image

If you have an image that is floating right or left and you have text around it but need to do a hard break so the next line or section starts below the image, not next to it, then use this code:

 <div style="clear:both;"></div>

Notes For Accessibility:

• Precede each video with an accessibility-friendly statement that includes title and length of video
• All videos should have a transcript
• To eliminate suggested videos, add ?rel=0 at the end of the url. 
• Verify that the toggler module has been turned on.

Video Code

<div class="img-center">
<div class="video-wrapper">
<iframe allowfullscreen="" frameborder="0" height="315" src=""></iframe> </div>
<div class="img-caption">Caption
<div aria-label="expand content" class="toggler">Click here for a transcript of the [name of video].</div>
<div aria-label="additional content"><p>Insert transcript here</p></div>
<div class="img-credit">Credit: </div>
</div>
</div>

To create ordered lists using letters or Roman Numerals: Note: You won't be able to see the roman numerals or alphabet until AFTER you save your work. It will appear as a regular numbered list before the work is saved.

• Alpha Lower case, <ol class="list-alpha-lower">
• Alpha Upper case, <ol class="list-alpha-upper">
• Roman Numerals Lower case, <ol class="list-roman-lower">
• Roman Numerals Upper case, <ol class="list-roman-upper">

PRE formatted text

**Verify that the toggler module is turned on in the course: In the black menu bar, click Modules. In the box, filter for js. Choose custom js library>configuration and check the Toggler box. Note that if custom js library is not enabled, you will have to enable it (check the box) in order to get the configuration option.**

NOTE: Toggler code is not yet fully accessible. You can continue to use this code for now but it will evenutally need to be updated.

Self-Check using Toggler

<div class="box-activity-optional">
  <h4>Title of box</h4>
  <p>Question1</p>
  <p><textarea aria-hidden="true" cols="100" rows="5"></textarea></p>
  <div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
  <div aria-label="answer"><p>ANSWER:text</p></div>
  
  <p>Question2</p>
  <p><textarea aria-hidden="true" cols="100" rows="5"></textarea></p>
  <div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
  <div aria-label="answer"><p>ANSWER:text</p></div>
   
  <p>Question3</p>
  <p><textarea aria-hidden="true" cols="100" rows="5"></textarea></p>
  <div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
  <div aria-label="answer"><p>ANSWER:text</p></div>
</div>

Toggler outside of an image or video caption

This is most relevant for audio files.
<div aria-label="expand content" class="toggler">
  <strong>Click for text description.</strong> This will expand to provide more information.
</div>
<div aria-label="additional content">
  Add text description here
</div>

Toggler code for text descriptions of images and transcripts has been moved to the image and video sections.

** Again, a reminder to verify that the toggler module is turned on in the course: In the black menu bar, click Modules. In the box, filter for js. Choose custom js library>configuration and check the Toggler box. Note that if custom js library is not enabled, you will have to enable it (check the box) in order to get the configuration option.