Green Per Square Foot

Style Guide July 21st, 2014

Text, words etc!

Using WordPress’s Rich Text Editor

Formatting text in a WYSIWYG editor can sometimes be finicky. If you’re trying to copy/paste in content from somewhere else, be mindful of the source. Is it a webpage? You may copy over all the unseen HTML tags from that page. Is it a Word Doc or PDF? You may paste in even worse formatting code that can cause things to look weird.

There’s a ‘paste as text’ button you can use to remove styling on pasted in content.

Screen Shot 2014-08-20 at 2.57.45 PM

Trouble is, you now need to reformat in WordPress. WP claims that they will clean up unwanted styles when pasting from Word, but just be mindful it may not work completely. Look closely at your copy before publishing to make sure things don’t look weird.

Page Headings

This is a Heading 2

This is a Heading 3

This is a Heading 4

And this is plain paragraph text.

It’s best to format your pages with an easy to skim, hierarchy of content. Use h2s for main sections, h3s for subsections within those sections, and so on. This is because, on “the internet”, people tend to not read every article word for word. We skim the page, look for sections that are interesting, then dive deeper.

I’m sure there’s been a study somewhere that proves this. If only there was a tool that would let me search for a specific thing using a few simple phrases.

Anyway, headings. You’ll notice there is also a Heading 1 option, and you may have also noticed that I’ve left it out above. You are very perceptive and do a good job at noticing. You deserve a treat. This is because Heading 1 is reserved for the Post Title, which displays at the very top of the page. There should only be one Heading 1 per page. This syncs up with SEO best practice, the design of the site, and Highlander rules.


 

Images

Full Width Image

Full width placeholder image

The full width placeholder should be 730px wide. Height can vary depending on subject matter, but should be at least 250-300px. Set alignment to ‘none.’

Image aligned left

left align placeholder imageLeft and right aligned images are no wider than 300 px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel urna ullamcorper, rutrum arcu sit amet, condimentum tortor. Nulla eget elit et purus facilisis sollicitudin. Sed adipiscing metus augue, at feugiat felis pharetra a. Ut consectetur cursus dui id posuere. Ut pharetra libero nibh.

Sed gravida rhoncus tincidunt. Mauris felis justo, pellentesque nec pulvinar nec, tincidunt at nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sagittis lectus vel facilisis ultrices. Nulla eget sollicitudin mi. Praesent in sem non elit mollis gravida. Vestibulum dolor purus, feugiat ut magna sit amet, adipiscing tincidunt tortor.

Image aligned right

Because of the way HTML documents flow, right aligned images need to be inserted at the beginning of the paragraph that you want the image to be paired with.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel urna ullamcorper, rutrum arcu sit amet, condimentum tortor. Nulla eget elit et purus facilisis sollicitudin. Sed adipiscing metus augue, at feugiat felis pharetra a. Ut consectetur cursus dui id posuere. Ut pharetra libero nibh. Sed gravida rhoncus tincidunt.

Mauris felis justo, pellentesque nec pulvinar nec, tincidunt at nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sagittis lectus vel facilisis ultrices.

Nulla eget sollicitudin mi. Praesent in sem non elit mollis gravida. Vestibulum dolor purus, feugiat ut magna sit amet, adipiscing tincidunt tortor.

Important note on aligned images: in WordPress, the width of the WYSIWYG window can be wider than design of the live post or page, so text and images will appear to wrap differently. If you think you need to enter a bunch of spaces to get the next line of text to clear, preview the post first. For an example on how odd it can be, here’s what it looked like when setting up the images above:


Tables

tablepress linkThe Knowledge Center uses a great plugin called TablePress, which allows you to create tables simply without needing to use HTML. Click the TablePress button in the left nav when logged into WordPress to create a new table, then in your post, click the insert table icon: insert table icon

You can toggle on/off interactions like sorting on columns, filtering via search input, & pagination of rows. Find these options underĀ Features of the DataTables Javascript Library.

Simple Table

Date
Chrome
Internet Explorer
Firefox
Safari
July 201336.29%20.27%16.60%11.37%
June 201335.82%21.35%16.79%10.83%
May 201335.66%23.67%16.87%10.55%
April 201333.71%25.58%17.27%10.65%

Table with Sorting & Filtering

Date
Chrome
Internet Explorer
Firefox
Safari
July 201336.29%20.27%16.60%11.37%
June 201335.82%21.35%16.79%10.83%
May 201335.66%23.67%16.87%10.55%
April 201333.71%25.58%17.27%10.65%

Table with Pagination

Date
Chrome
Internet Explorer
Firefox
Safari
July 201336.29%20.27%16.60%11.37%
June 201335.82%21.35%16.79%10.83%
May 201335.66%23.67%16.87%10.55%
April 201333.71%25.58%17.27%10.65%
March 201332.88%25.08%17.86%11.18%
February 201331.96%25.54%18.28%11.26%
January 201331.51%26.37%18.39%10.76%
July 201336.29%20.27%16.60%11.37%
July 201336.29%20.27%16.60%11.37%
July 201336.29%20.27%16.60%11.37%
June 201335.82%21.35%16.79%10.83%
June 201335.82%21.35%16.79%10.83%
June 201335.82%21.35%16.79%10.83%
May 201335.66%23.67%16.87%10.55%
May 201335.66%23.67%16.87%10.55%
May 201335.66%23.67%16.87%10.55%
April 201333.71%25.58%17.27%10.65%
April 201333.71%25.58%17.27%10.65%
April 201333.71%25.58%17.27%10.65%
March 201332.88%25.08%17.86%11.18%
March 201332.88%25.08%17.86%11.18%
March 201332.88%25.08%17.86%11.18%
February 201331.96%25.54%18.28%11.26%
February 201331.96%25.54%18.28%11.26%
February 201331.96%25.54%18.28%11.26%
January 201331.51%26.37%18.39%10.76%
January 201331.51%26.37%18.39%10.76%
January 201331.51%26.37%18.39%10.76%

Posted by in Uncategorized