Full Credits

Stats & Data

February 26, 2015

Normal article with all native functionality, image slideshow, image slider, lists, drop cap, embedded content, tables

Example of a Heading!

Here’s an image with a caption attached

Example of a quote, followed by more quote, which is followed by more quote.

— A very quotable quote

This is a native list!

  • List item one
  • List item two
  • List item three
  • Etc

This is a list with a sub-list inside of it. No CSS required.

  • List item one
  • List item two with subitems:
    • Subitem 1
    • Subitem 2
  • Final list item

This is a definiton list. That means the sub-item (labeled dd) will be indented/offset below the dt item. No CSS required.

Black hot drink
White cold drink
This one is bold
And this one is italic
This one has an underline
This one has a strike through it/crossed out

This is a numbered list. No CSS required.

  1. List item one
  2. Final list item

This is a list with no dots next to it, no padding/margins, and CSS styling targeting specific list items.

  • List item one
  • Second list item
  • Third list item
  • Final list item

Very basic CSS and jQuery Slideshow

Images should be uniformly sized. Each image goes within the "slides12345" div. The left/right icons can be replaced with images if so desired. Responsive styling/works on mobile.

iFrame Slideshow

The code for this is located in fod>code>SVG Slider. In order to get it to work you need to upload it to the server and put it in an iframe. The files used in this article are on the server pandw>code>SVGslider. The images within the slideshow should be the same dimensions. To add/edit images use the index file. Be sure to add in the new images, but also the nav circles at the bottom. There is no special mobile code for this, the code works across all devices.

This is a drop cap (it’s just CSS)

This is a drop cap, IT’S ALL DONE IN CSS. To make the drop cap CSS target EVERY FIRST LETTER of EVERY BLOCK OF TEXT within your article, change take part of the code:

.dropcap p:first-child:first-letter

And replace it with this:

.article-text-block p:first-child:first-letter

Another (safer, non-global) option is to click the gear on your text block, add a custom class name, and target that class instead of targeting .article-text-block.