_styles

This page illustrates the various styles available to you as you update SoftChalk.com.

Please note that there are special classes assigned to headers and text in certain sections of the site — for instance, the homepage, webinar calendar, and innovators pages. Because of the special layout of these pages, the normal styling didn’t appear right and we adjusted accordingly. Additional classes can be added if needed.

An unordered list:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Duis aliquet dictum ultricies. Etiam varius ante sit amet dui dictum eu lacinia sapien malesuada.
  • Vivamus ullamcorper dolor id quam dapibus ut porta est consequat.
    • Praesent adipiscing imperdiet urna vitae bibendum.
    • Etiam vel lorem non arcu porttitor mollis in eu sem.
    • Etiam a sem mauris, nec hendrerit ligula.
  • Nullam tincidunt cursus augue, vitae suscipit lacus elementum ut. Nulla facilisi.
  • Aenean vulputate sodales fermentum.

An ordered list:

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Duis aliquet dictum ultricies. Etiam varius ante sit amet dui dictum eu lacinia sapien malesuada.
  3. Vivamus ullamcorper dolor id quam dapibus ut porta est consequat.
    1. Praesent adipiscing imperdiet urna vitae bibendum.
    2. Etiam vel lorem non arcu porttitor mollis in eu sem.
    3. Etiam a sem mauris, nec hendrerit ligula.
  4. Nullam tincidunt cursus augue, vitae suscipit lacus elementum ut. Nulla facilisi.
  5. Aenean vulputate sodales fermentum.

This is an H1 tag

Duis consequat tristique consequat. Aliquam sem massa, accumsan at sollicitudin eu, laoreet quis lacus. In ultricies arcu sed odio ultrices id tincidunt risus vulputate. Maecenas neque massa, iaculis sit amet facilisis at, aliquet blandit justo.

This is an H2 tag

Maecenas neque massa, iaculis sit amet facilisis at, aliquet blandit justo. Fusce in risus neque, eget facilisis eros. Cras sed lorem orci. Cras ultrices ullamcorper lobortis. Pellentesque feugiat leo ut eros posuere pretium. Duis vel lacus tortor. Pellentesque mattis faucibus augue, vitae euismod enim auctor ut. Integer pharetra volutpat elementum. Maecenas mollis bibendum euismod.

Maecenas neque massa, iaculis sit amet facilisis at, aliquet blandit justo. Fusce in risus neque, eget facilisis eros. Cras sed lorem orci. Cras ultrices ullamcorper lobortis. Pellentesque feugiat leo ut eros posuere pretium. Duis vel lacus tortor. Pellentesque mattis faucibus augue, vitae euismod enim auctor ut. Integer pharetra volutpat elementum. Maecenas mollis bibendum euismod.

Maecenas neque massa, iaculis sit amet facilisis at, aliquet blandit justo. Fusce in risus neque, eget facilisis eros. Cras sed lorem orci. Cras ultrices ullamcorper lobortis. Pellentesque feugiat leo ut eros posuere pretium. Duis vel lacus tortor. Pellentesque mattis faucibus augue, vitae euismod enim auctor ut. Integer pharetra volutpat elementum. Maecenas mollis bibendum euismod.

– Speaker of the Quote

Maecenas neque massa, iaculis sit amet facilisis at, aliquet blandit justo. Fusce in risus neque, eget facilisis eros. Cras sed lorem orci. Cras ultrices ullamcorper lobortis. Pellentesque feugiat leo ut eros posuere pretium. Duis vel lacus tortor. Pellentesque mattis faucibus augue, vitae euismod enim auctor ut. Integer pharetra volutpat elementum. Maecenas mollis bibendum euismod.

This is an H3 tag

A bit less space between the above and below paragraphs than the H2, as well as a bit smaller. Nulla malesuada, enim eu ultricies rutrum, magna eros lacinia nisi, sed mollis risus velit vel libero. Morbi vitae arcu sed nisl tincidunt porttitor eu vel tortor. Nam sed eros sem. Aliquam ut orci est, sagittis commodo quam. Integer vel odio id felis ultricies egestas in a est. In eu eros felis, ut iaculis orci. Praesent ultricies blandit luctus. Vivamus sed nisi vel nulla fermentum imperdiet.

This is an H4 tag

Smaller size de-emphasizes this header while it’s still larger than the body text, and the green color helps it stand out. Fusce pharetra purus nec ipsum ullamcorper porttitor. Nunc cursus aliquet felis sodales consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam id ipsum eu turpis pulvinar volutpat ut et orci. Sed id nunc sit amet libero lacinia interdum. Vivamus lacus magna, tempor non fermentum et, convallis et metus. Curabitur posuere lobortis risus vitae tristique. Sed bibendum libero eu neque pulvinar lacinia. Aliquam erat volutpat.

This is an H5 tag

This is gray and all caps. Morbi non sapien nibh. Morbi non nisl in massa ultricies eleifend sit amet nec ante. Sed tempus tortor eu mi iaculis tincidunt. In ut lacus justo, nec posuere felis. Nullam tortor risus, suscipit eu semper quis, suscipit fermentum tellus.

This is an H1 tag…

with a slogan!

The slogan jumps up to appear directly underneath an H1. It can be added at the top of any page by adding the class=”slogan” to the H2. It must appear underneath an H1. Morbi non sapien nibh. Morbi non nisl in massa ultricies eleifend sit amet nec ante. Sed tempus tortor eu mi iaculis tincidunt. In ut lacus justo, nec posuere felis. Nullam tortor risus, suscipit eu semper quis, suscipit fermentum tellus.

This is an H2 tag…

with a subtitle (that’s an H3)!

The subtitle is an H3 jumps up to appear directly underneath an H2. It can be added underneath an H2 by adding the class=”subtitle” to the H3. It must appear underneath an H2. Morbi non sapien nibh. Morbi non nisl in massa ultricies eleifend sit amet nec ante. Sed tempus tortor eu mi iaculis tincidunt. In ut lacus justo, nec posuere felis. Nullam tortor risus, suscipit eu semper quis, suscipit fermentum tellus.

Right align with caption (left styled identically, but floated to the left).

Right aligned with caption and link. (Left aligned is identical, but floated to left).

All image styles + captions will be generated by the WordPress interface.

Nullam at enim nec leo posuere iaculis a id dui. Pellentesque egestas nisi vulputate quam mattis a tempor magna placerat. Maecenas at lorem eu massa vehicula tristique consequat eget nulla. Sed eget sem metus, eget dignissim urna. Pellentesque laoreet, quam non lobortis adipiscing, lorem nulla malesuada risus, sed venenatis sapien sem non velit. Donec pharetra, turpis ac viverra dignissim, sapien tellus scelerisque diam, venenatis dignissim sem mauris sed lorem. Fusce sed risus vel tellus egestas auctor. Ut a lectus in sem pretium elementum a ac ante. Nam pellentesque gravida lectus at posuere. Nullam augue sem, euismod ut fringilla ac, dignissim eu nulla. Curabitur pellentesque felis aliquet sapien molestie tempus a nec orci. Phasellus consequat mollis nunc, elementum ultricies eros luctus et. Nam sit amet tempor nisl. Cras blandit magna nec tortor venenatis cursus. Curabitur turpis elit, scelerisque in ornare in, rhoncus at mi. Nulla dapibus lectus non quam congue vulputate. Phasellus sapien libero, ornare eget pretium non, sodales sed neque.

Center with caption and link.

Vivamus eros elit, cursus in aliquam vitae, dapibus eget neque. Ut cursus congue felis, ut faucibus est viverra et. Suspendisse non dolor tempus velit auctor rhoncus. Quisque arcu lacus, facilisis vel condimentum vitae, rhoncus et arcu. Pellentesque in cursus elit. Pellentesque tristique, dolor ut varius feugiat, nulla orci vestibulum magna, tempus iaculis odio orci ut ligula. Vestibulum id dui risus. Aliquam erat volutpat. Proin sapien libero, aliquam congue malesuada vitae, cursus scelerisque metus. Cras egestas, nisl non sodales fringilla, augue quam volutpat ipsum, sit amet blandit tortor mauris vel purus. Sed metus quam, tincidunt sed sodales in, dictum eu nibh. Praesent eget dui non nunc rutrum lacinia vitae ut enim.

The picture to the left has no caption, but is floated left. No-captioned photos aligned right and center will appear the same way, without formatting. Maecenas imperdiet tellus aliquam libero tincidunt faucibus. Nam eget mi eget massa convallis tempor in quis ante. Ut venenatis leo orci. Aenean nec dui turpis, et imperdiet orci. Vestibulum imperdiet tincidunt est, vitae porttitor dolor fermentum id. Sed tempor dolor et turpis tincidunt viverra. Integer ut pretium turpis. Quisque condimentum eleifend aliquet. In dictum vehicula viverra. In vitae eros id nisl rutrum cursus. Duis a mauris lacus, sit amet porta mauris. Cras sed faucibus augue. Sed varius euismod ultricies. Maecenas turpis diam, condimentum lobortis aliquam non, blandit porttitor quam. Proin iaculis turpis eget elit accumsan semper.

The picture to the right has a class=”border” assignment creating a soft gray border. To add this class to an image, add this “border” class to any img code, like so:

Please note that class=”border” is the only image formatting that will not be automatically generated by the WordPress WYSIWYG. Additionally, multiple classes can be assigned per image, separated by a space, as in the example above..

Links

Here is an example of a link within a paragraph. All links (with the exception of navigation) will appear green with a gray underline. Header tags that are made into links do not have an underline except on hover.

You can turn links into buttons like this (button image is followed by code to make it):

ANY TEXT YOU WANT

ANY TEXT YOU WANT

Get Your FREE 30-Day Trial

Get Your FREE 30-Day Trial

Go Back

Takes a user back to the previous page they visited (to go back to a specific page, replace the “href” element with the specific url).

Go Back

Return to Top

Pops the page back to the top.

Return to Top

Sidebar

Use the following code to generate a styled sidebar box within your sidebar:

Example (image):

Code:

Anchor Menu

Example:

Each hashtag will correspond to a link in the text with the same name:

/

Custom Homepage Sidebar Boxes

Use the following blocks of code to build custom advertising/announcement areas on the home page sidebar.

Linked image with no border (image 284px wide):

Linked image with border (image 274px wide):

Linked header (h3), paragraph text and paragraph link without border:

Header Text

Paragraph text with links.

Linked header (h3), paragraph text and paragraph link with border:

Authoring Content
Hardware
Memory 1 Gigabyte RAM recommended
Software
Operating System Windows 7, VISTA, Windows XP(SoftChalk 6 might work with Windows 98 SE, ME and 2000, but these operating systems are no longer officially supported.)Macintosh OS X 10.4.11 or higher
Adobe Flash Player Adobe Flash Player 10 or higher
Java Windows 7, VISTA: Java Runtime 6 (1.6.0_02) or higher
Windows XP:Java Runtime 1.5 or higherMacintoshOS X 10.4.11 or higher: Java 5.0 or higher(Note: Macintosh OS X less than 10.4.11 will NOT work as these lower versions do not run Java 5.)
Browsers Windows: IE 5.5 or above, Netscape 6.x or above, Mozilla/Firefox
Apple: Safari 1.2 or higher, Firefox
Supported Media Types Images: gif, jpg, png
Audio: wav, au, mp3, mp4, aiff, ram
Video:avi, mov, mpgOther: PowerPoint, Excel, Word, Flash—most files can be linked into a lesson.