This page documents all of the shortcodes and other content tools.

Page Formatting Type

Each edit page in the admin lets you choose between a “Simple Text Page” and a “Shortcode Formatted Page”. A “Simple Text Page” is just a convenience which wraps all of the content into a content-text shortcode block with automatic linebreak and paragraph handling and black text on a full-page white background. All of the below shortcodes are still usable on this type of page, but grids and banners will be constrained by the text width, and may not span the full browser window.

Grid Shortcodes

Grid Shortcodes create a row of items of equal width that span the entire browser window. The number of the grid shortcode (from 1 to 5) tells how many items are inside. On mobile, the items stack vertically. You should use the grid-item shortcode to create the items.

If you give the grid the header class, any title inside it will be embiggened

The Grid-Item Shortcode

The Grid-Item Shortcode takes optional bg and href parameters. bg should point to an image that will be used to fill the background of the item. All items in the same grid should have the same size bg images. If href is provided, the entire grid-item will be made into a link to the given url. Content in a grid-item is automatically centered vertically in the grid-item.

Content Shortcodes

Content Shortcodes also divide the screen, but unlike grids they will only fill the browser window up to a certain width, after which they will be centered in the window. Also unlike grids, the divisions need not be equal. The number of digits indicates the number of columns of content, and the value of each digit indicates the proportion of the content area the corresponding column will take up. So content111 has three equal columns, content121 has three columns with the middle column twice as wide as the sides (i.e. a 25%, 50%, 25% configuration)

Possible content column configurations are:
content : one column
content-text : one column, with black text on white background
content11 : 50/50
content12 : 33/66
content21 : 66/33
content111: 33/33/33
content121: 25/50/25
content112: 25/25/50
content211: 50/25/25
content13: 25/75
content31: 75/25

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

nestable! but mind the margins. this content111 is inside the left column of a content 31.
It’ll be a bit better if all your content has in an equal number of content-type parents to fix the margins until I can figure out a css-based solution.
You can also nest column content blocks, like this content13 inside of text content blocks to add some structure to blog posts and other text-heavy pages.

Universal Display Controls

There are a ton of classes that can be used on any shortcode, or any other html to control the color of the content.

There are 4 types of classes bg- text- shadow- and bigshadow- to control the background color, text color and text dropshadow color and size

Each of these classes are available in any of the following colors:

lightred red darkred
lightorange orange darkorange
lightyellow yellow darkyellow

lightsand sand darksand
lightearth earth darkearth
lightsea sea darksea
lightindigo indigo darkindigo
lightgray gray darkgray

black white

There are also several classes you can use to control item background images: bg-paper bg-sketch. These layer a semi-transparent repeating pattern on top of the provided bg-color class to create a colored patterned background. This can be used as a body class on the edit page, as well as a class on any shortcode or html element. I need to add a rule and regenerate the css whenever you want to add new bg or bg2 (see below) images.

This content21 has an indigo paper bg, lightsand text and a sea shadow.
This content13 has a darkred sketch bg, yellow text, and an indigo shadow.

Big text might look better with a big shadow

Background Class Names

Secondary Background Images

Secondary background images are only supported as body classes. You can also specify bg2-flowers1 bg2-flowers2 or bg2-flowers3 classes as a body class to add a secondary bg image to the whole page’s background (see the body class field of this page, and notice it in the background of the content areas). You can control the alignment of the secondary background image with the bg2-left, bg2-center and bg2-right classes.

Sneaky Background Images

Sneaky bgs take up a bunch of space on the right or left of a content area in a desktop window, but partially hide themselves in smaller windows to make space for mobile content. They should be 600x600px square and be centered horizontally in a png with a transparent background.

Scorpions are predatory arachnids of the order Scorpiones. They have eight legs[1] and are easily recognised by the pair of grasping pedipalps and the narrow, segmented tail, often carried in a characteristic forward curve over the back, ending with a venomous stinger. Scorpions range in size from 9 mm (Typhlochactas mitchelli) to 23 cm (Heterometrus swammerdami).[2]
Subzero (“Subbie”) (foaled 1988 in Australia)[1] was a Thoroughbred racehorse who won the 1992 Melbourne Cup.[2] Trained by Lee Freedman and ridden by veteran jockey Greg Hall, the four-year-old reveled in the rain-affected going to defeat the favourite Veandercross and the two-miler Castletown.[3] The win was to be Subzero’s last, but, as one of the few grey winners of the race in the post-War era, his fame was assured.

Buttons

By default, buttons are a bright Call-To-Action red. You can add a button-$color class (note, you still need the button class) for any of the color names to make less in-your-face buttons. Buttons inside a button-block div will be centered.

You can also use text-$color and shadow-$color classes on buttons if you find a combination that is not hideous.

Banners

Banners are big display text items that span the entire window width.

Testimonials

There are two testimonial shortcodes, testimonial-l and testimonial-r where l or r indicates which side of the screen the testimonial text is on.

By default, if an image needs to be cropped to fill the available space, its center is kept stable and the top and bottom are cropped. There are two helper classes that change this behavior: img-focus-top and img-focus-bot which will preserve the top or bottom of the image, respectively .

I am a testimonial-r with img-focus-top

This testimonial-l has its text on the left and img-focus-bottom

Wells

Wells are content areas with a special layout. Their content has top and bottom margins, its own page background image, and a special illustration area controlled by the shortcode. The class attr controls the background and pattern of the well, using the standard bg classes. The contentclass param controls the background, pattern, and text color using the same standard classes. Once you figure out how you’ll want to use these things I’ll figure out how to make them more sensible to manage, including allowing all the other content features inside them, rather than just a single paragraph as they work now.

Sweep the leg

You can also use the bg attribute to specify an arbitrary tiled background image.

You can put whatever text you want in a well, including the univseral text color classes but make sure it’s all in a single <p> tag

Carousels: Images

Carousels can rotate through any number of images. Set ‘autoplay=”true”‘ to hide the buttons and automatically scroll through the items. Set ‘fade=”true”‘ to make the transition effect a crossfade rather than a scroll.

Carousel-items have a src parameter to make image carousels easy:

Carousels: Content

Carousels can rotate any content, and should be able to go inside any layout shortcode (contentXXX, gridX, etc). There may be layout problems with some combinations, let me know what you want to do and I’ll fix layout issues as required.

Content carousels support the same autoplay and fade settings.

Ryu

Having premiered in the first Street Fighter in 1987, Ryu appears as the lead character in the game, along with his best friend Ken Masters.

Headers

Headers use the standard html <h1> – <h6> tags. You can also add h1-h6 class to any tag to get these font size/weight combinations. For example <span class=”h5″>Hello</span>

For SEO reasons, you should use h1-h6 tags whenever you’re actually delineating content sub-sections, and h1-h6 classes when you’re just trying to highlight something visually.

These are true h1-h6 tags

h1 : 50px bold

h2 : 50px normal

h3 : 38px bold

h4 : 38px normal

h5 : 24px bold
h6 : 24px normal

These are divs with h1-h6 classes

h1 : 50px bold
h2 : 50px normal
h3 : 38px bold
h4 : 38px normal
h5 : 24px bold
h6 : 24px normal

You can override the font of any item by adding one of the following font classes display-font, big-display-font, title-font, serif-font, or sans-serif-font. You should add this as the last class in a list of classes to make sure it overrides fonts specified by any of the previous classes.


Titles

Titles are a quick way to put some big text centered in a block with optional subtitle text smaller centered beneath it.

This is a title in the middle of a content121 and this is its subtitle

Notice it defaults very small… the size of normal paragraph text. You can give them h1-h6 classes to control the size of the title and the subtitle will be automatically resized appropriately

This is an h1 title and this is its subtitle
This is an h2 title and this is its subtitle
This is an h3 title and this is its subtitle
This is an h4 title and this is its subtitle
This is an h5 title and this is its subtitle
This is an h6 title and this is its subtitle

Captioned Images

Old blog entries’ captions have had the rounded corners and borders removed. New blog entries should use the caption shortcode. You can use the normal text formatting classes.

Before & After: Watercolor Paintings in 2015

My First and Last Watercolor Portraits of 2015

Before & After: Watercolor Paintings in 2015

My First and Last Watercolor Portraits of 2015

Before & After: Watercolor Paintings in 2015

My First and Last Watercolor Portraits of 2015