Full Credits

Stats & Data

2Funny
0Die
863
Views
February 26, 2015
Published
Description

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.

Coffee
Black hot drink
Milk
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.

Advertisement
Advertisement