Agency CSS Overwrites

This page defines the modification options the Oregon Department of Education available in the Agency.CSS overwrites.

NOTE: as usual, to view any of the full code used to generate this page, right click and View Source - then look for the area you want to view (Chrome - others search View Source and the browser for directions.

Agency CSS Font Size Mods

H1 and odeH1 class: This modifies the font to font-size:2.7rem; Example: <h1>My Header</h1> or <p class="odeH1">My P Looks Like a Header</p>
H2 and odeH2 class: This modifies the font to font-size:2.5rem; Example: <h2>My Header</h2> or <p class="odeH2">My P Looks Like a Header</p>
H3 and odeH3 class: This modifies the font to font-size:2.3rem; Example: <h3>My Header</h3> or <p class="odeH3">My P Looks Like a Header</p>
H4 and odeH4 class: This modifies the font to font-size:2.1rem; Example: <h4>My Header</h4> or <p class="odeH4">My P Looks Like a Header</p>
H5 and odeH5 class: This modifies the font to font-size:1.9rem; Example: <h5>My Header</h5> or <p class="odeH5">My P Looks Like a Header</p>
H6 and odeH6 class: This modifies the font to font-size:1.8rem; Example: <h6>My Header</h6> or <p class="odeH6">My P Looks Like a Header</p>
odeFontNormal class: This modifies the font to font-size:1.4rem (normal); <p class="odeFontNormal">My P Uses a font overwrite.</p>
odeFontNormal1 class: This modifies the font to font-size:1.3rem; <p class="odeFontNormal1">My P Uses a font overwrite.</p>
odeFontNormal2 class: This modifies the font to font-size:1.2rem; <p class="odeFontNormal2">My P Uses a font overwrite.</p>
odeFontNormal3 class: This modifies the font to font-size:1.1em; <p class="odeFontNormal3">My P Uses a font overwrite.</p>

This is a H1 Heading Example

This is a H2 Heading Example

This is a H3 Heading Example

This is a H4 Heading Example

This is a H5 Heading Example

This is a H6 Heading Example

That concludes our testing of the heading examples.

Bold Header Examples - Which is better?

This is a H1 Heading Example

This is a H2 Heading Example

This is a H3 Heading Example

This is a H4 Heading Example

This is a H5 Heading Example

This is a H6 Heading Example

That concludes our testing of the heading examples with BOLD.

UL / OL List Classes

No Bullet List

Hide a list's bullets.

<ul class="odeNoBul">

Bullet 1 is This
Something Else
Another Thing

No Bullet, No Indents List

Remove bullets and indents.

<ul class="list-unstyled">

Bullet 1 is This
Something Else
Another Thing

No Bullet, Buffer List

Remove bullet styles add buffer.

<ul class="list-unstyled odeListBuf5">

Bullet 1 is This
Something Else
Another Thing

Buffer Classes

These classes control how much buffer to add or remove from lists.

<ul class="odeListBuf0">

odeListBuf0 : buffer = 0
odeListBuf1 : buffer = 5
odeListBuf2 : buffer = 10
odeListBuf3 : buffer = 15
odeListBuf4 : buffer = 20
odeListBuf5 : buffer = 25

<ul class="odeListBuf2">

odeListBuf0 : buffer = 0
odeListBuf1 : buffer = 5
odeListBuf2 : buffer = 10
odeListBuf3 : buffer = 15
odeListBuf4 : buffer = 20
odeListBuf5 : buffer = 25

<ul class="odeListBuf5">

odeListBuf0 : buffer = 0
odeListBuf1 : buffer = 5
odeListBuf2 : buffer = 10
odeListBuf3 : buffer = 15
odeListBuf4 : buffer = 20
odeListBuf5 : buffer = 25

List Indents

These classes control how much to indent the bullets.

<ul class="odeListIndent0">

odeListIndent0 : left margin = 0
odeListIndent1 : left margin = larger than indent0
odeListIndent2 : left margin = larger than indent1
odeListIndent3 : left margin = larger than indent2
odeListIndent4 : left margin = larger than indent3
odeListIndent5 : left margin = larger than indent4

<ul class="odeListIndent3">

odeListIndent0 : left margin = 0
odeListIndent1 : left margin = larger than indent0
odeListIndent2 : left margin = larger than indent1
odeListIndent3 : left margin = larger than indent2
odeListIndent4 : left margin = larger than indent3
odeListIndent5 : left margin = larger than indent4

<ul class="odeListIndent5">

odeListIndent0 : left margin = 0
odeListIndent1 : left margin = larger than indent0
odeListIndent2 : left margin = larger than indent1
odeListIndent3 : left margin = larger than indent2
odeListIndent4 : left margin = larger than indent3
odeListIndent5 : left margin = larger than indent4

List Class Combination Example

The following shows a common request for a primary landing page that would contain links to other pages.

<ul class="odeListBuf6 odeListIndent0 odeNoBul odeH3">

With list-unstyled class instead of odeNoBul

<ul class="list-unstyled odeListBuf6 odeH3">

ODE Definition List (DL)

Definition Lists should ONLY be used if the content is a GLOSSARY

The odeDL* classes provide custom configurations for Definition Lists. The classes that follow display examples, showing them in action.

ODE Default DL Class: Use the odeDL class for <dl class="odeDL">

ODE the odeDL1 Class: Use the odeDL1 class for the display effect found in this data list.; <dl class="odeDL1">; Notice the bottom of the DD has 20px padding.
Easier to see when you add this second DT

ODE the odeDL2 Class: Use the odeDL2 class for the display effect found in this data list which includes a font larger than the odeDL1. <dl class="odeDL2">

ODE the odeDL3 Class: Use the odeDL3 class for the display effect found in this data list which includes a font larger than the odeDL2. <dl class="odeDL3">

ODE the odeDL0 Class: Use the odeDL0 class for the display effect found in this data list.; <dl class="odeDL0">; Notice the bottom of the DD has 0px padding.
Easier to see when you add this second DT

ODE the odeDL1multiDD Class: Use the odeDL1multiDD class to display the DL1 with DD padding effect found in this data list.; <dl class="odeDL1multiDD">; Notice the bottom of the DD has 20px padding.
Easier to see when you add this second DT

ODE the odeDL1indentmultiDD Class: Use the odeDL1indentmultiDD class to display the DL1 with DD padding and indent effect found in this data list.; <dl class="odeDL1indentmultiDD">; Notice the bottom of the DD has 20px padding and it is indented.
Easier to see when you add this second DT

DT Buffer Classes

The following classes add buffers to each DT, helping to more easily see the separations. This is useful when displaying topics emulating large sizes. Classes include: odeDTbuf1, odeDTbuf2, odeDTbuf3, odeDTbuf4, odeDTbuf5

Example with Default Buffer

<dl class="odeDL2">

Sample Category 1: Description would go here.; Description 2 would go here.
Sample Category 2: Description would go here.; Description 2 would go here.
Sample Category 3: Description would go here.; Description 2 would go here.

Sample Category 4: Description would go here.; Description 2 would go here.
Sample Category 5: Description would go here.; Description 2 would go here.
Sample Category 6: Description would go here.; Description 2 would go here.

Sample Category 6: Description would go here.; Description 2 would go here.
Sample Category 7: Description would go here.; Description 2 would go here.
Sample Category 8: Description would go here.; Description 2 would go here.

Example with odeDTbuf4 Class

<dl class="odeDL2 odeDTbuf4">

Sample Category 1: Description would go here.; Description 2 would go here.
Sample Category 2: Description would go here.; Description 2 would go here.
Sample Category 3: Description would go here.; Description 2 would go here.

Sample Category 4: Description would go here.; Description 2 would go here.
Sample Category 5: Description would go here.; Description 2 would go here.
Sample Category 6: Description would go here.; Description 2 would go here.

Sample Category 6: Description would go here.; Description 2 would go here.
Sample Category 7: Description would go here.; Description 2 would go here.
Sample Category 8: Description would go here.; Description 2 would go here.

Buttons

Button classes enable the link to look like a button. The role=button attribute is important here for accessibility.

Column classes contain trailing numbers, and each row is determined by adding those numbers up until you get to a total of 12. Here are some quick examples: if you want two columns equally distributed, you would use col-sm-6 in each; if you wanted three columns equal, you would use col-sm-4 in each; if you wanted the first column narrow, second big, and last between the two, you could use col-sm-2 in first, col-sm-6 in the second, and col-sm-4 in the 3rd (note: use caution when defining a small number as the text may go outside of the button if it is too small - always play with your browser size to make it large to small and see how your code reacts).

Three Column Example

<ul class="list-unstyled row odeListBuf1">
<li class="col-sm-4">
<a class="btn btn-default btn-block" role="button" href="myURL.com">Assessment Testing</a>
</li>
</ul>

Two Column Example

<ul class="list-unstyled row odeListBuf1">
<li class="col-sm-6">
<a class="btn btn-default btn-block" role="button" href="myURL.com">Assessment Testing</a>
</li>
</ul>

Mixed Column Example

row one = li class="col-sm-4" on each (4x3=12)
row two = li class="col-sm-6" on each (6x2=12)
row three = li class="col-sm-5" on first, and class="col-sm-7" on second (5+7=12)

3 Column Header List with Normal Font P Tag

Simple example to put big fonts on links, have them display horizontal, and have the default P text stay small.

Three Column Example

<ul class="list-unstyled row odeListBuf6 odeH2">
<li class="col-sm-4">
<a href="myURL.com">Test Column 1</a>
</li>

<li class="col-sm-4">
<a href="myURL.com">Column 2 Big with Text</a>
<p>
This is an example of text displayed in P tag with a default font size because of the big font listed in the UL class.
</p>
</li>

<li class="col-sm-4">
<a href="myURL.com">Final Column Link</a>
</li>
</ul>

Test Column 1
Column 2 Big with Text
This is an example of text displayed in P tag with a default font size because of the big font listed in the UL class.
Final Column Link

OL Inline List Violation

If you include a step-by-step numeric in the middle of a sentence, you must put that narrative inside an <OL> tag. Both of the following examples view the same to sighted users, but screen readers interpret the code in the Correct Example (see the code).

Violation Rule

The WCAG rule that was violated by not marking a numbered list with an <OL> is, Guideline 1.3.1 Info and Relationships (Level A); H48: Using OL, UL and DL for lists or groups of links.

Inline List Rule only applies to OL

Using sequential numbers on a list of items makes it clearly in need of an <OL>. Even if the content author said "Please purchase the following list of five fruits: apples, bananas, pears, peaches and strawberries," we wouldn't expect the author to use a <UL> tag. If the author wrote "Please purchase the following list of fruits: 1. apples, 2. bananas, 3. pears, 4. peaches and 5. strawberries," we would expect the author to use an <OL>.

— Peter Shikli, Access to Online - 12/5/2019

OL Violation Example

This example sentence has a bunch of text that shows you how to: 1) this is for first method; 2) this is the second method; 3) and this is the third method.

OL Violation Code

<p>This example sentence has a bunch of text that shows you how to: 1) this is for first method; 2) this is the second method; 3) and this is the third method.</p>

Correct Example

This example sentence has a bunch of text that shows you how to:

this is for first method;
this is the second method;
and this is the third method.

Correct Code

<p style="display:inline;">This example sentence has a bunch of text that shows you how to:</p>
<ol class="odeInlineCounter">
<li>this is for first method;</li>
<li>this is the second method;</li>
<li>and this is the third method.</li>
</ol>

Single List Item Grouping

Single List Item Grouping (Complex)

- Greater Extra Preferred Coastal Region
- Greater Interesting PDX Metro Region

Jump Links with Buffer

This example shows the code to put in for receiving links that need a buffer because a web page has a fixed header and without the buffer the first part of the text will be located beneath the page's header.

Send Code

This is just a standard link example, where you are linking to a location on a page.

<a href="#myExampleWithBuffer">Jump to Example with Buffer</a>

Receive Code

<h3 class="odeJumpBuffer" id="myExampleWithBuffer">Example with Buffer</h3>