Welcome to the style guide for the Ecosystem. Use this as a guide for adding styles to your courses.
Click on category headings below to access more information.
The Clean Code section includes general guidelines that are applicable course-wide. Template sections show proper code for various course features.
- 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.
- Avoid adding space between elements or at the end of a content section. (No extraneous <p> or <p> </p>.
- Avoid using unless it's called for.
- Use <p> in place of <div> where a <div> is being used simply to create a new style.
- 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.
- 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.
- 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 />
- 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.
- 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).
- 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.
- 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 forward slash 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>).
(also Supplemental Reading and Concept Gallery)
(also Tell Us About It, Reading Review, and Reminder)
Try This, Self Tests, Self Checks
Box with a Left Justified Image Inside
(used in OER GIS courses to advertise)
<div class="imgleft"><img alt="Penn State logo" src="https://courseware.e-education.psu.edu/dutton_drupal_theme_images/logo-p..."></div>
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)
Data Table Header Top Row and Side Column
Data Table Header Side Only
Schedule Table (Syllabus 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
The class "image-left-unboxed" may be used here
Image Right (no caption or credit line, no border - very small decorative images generally)
The class "image-right-unboxed" may be used here
The class "img-bullet" may be used here
Precede each video with an accessibility-friendly statement:
Please watch the following video (2:30) entitled "Geology is Your Friend."
When a Caption is Needed under a video
<div class="video-wrapper">embed code</div>
List Type Templates
To create ordered lists using letters or Roman Numerals:
- 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
If you want to use syntax highlighter, there are instructions on this page.
Return to Top Link
Used for anchors to return to the top of the page, especially in the syllabus but possibly in other places.
Math Equation with a Figure Number
**Make sure 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
Toggler outside of an image or video caption
<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>
Final Ecosystem Checklist
Inline styles (<style, <font>, etc.) have been removed
Extraneous <p> tags and spaces ( ) have been removed
Headings have been reviewed, are sized appropriately, and are not styled to be bold
Boxes use appropriate Ecosystem templates
Videos use appropriate templates and each is preceded with an accessible-friendly statement like, "Please watch the following (2:31) video on Bison."
Bibliography text, block quotes, highlighted text, togglers, and math equations w/figure numbers use appropriate templates
Tables use appropriate templates for their function (“checklist table” vs. “data table top row only”)
All tables have captions and summaries
<p> tags inside tables have been removed. Use <br/> tags if you need more than one line of text
Target=”_blank” has been eliminated where links lead to outside pages
Meaningful text links (Penn State Libraries) have replaced url links (http://www.libraries) and are more accessible than: click here or here or any short, single-word
Broken links have been noted in the course’s corresponding spreadsheet, located in: Ecosystem Move Notes and Info
Images are less than 700 px and don’t include unnecessary white space around the edges
Images (unless purely decorative) have meaningful alt tags
Images w/captions and credits should use the img-center div; others should use img-left or img-right