Updated 8/19/2008 - We hope this area will help you make use of the new platform! These documents will grow as we incorporate user-feedback and implement additional CSS/XHTML changes. It's all a work in progress, so thanks for your patience ;)

Welcome to the SB Nation FanPost compose screen! This guide should help get you started. For more detailed info, check out the full FanPost Help Guide.

1. The Creative Basics

The compose screen includes fields for your the Title and body of your entry. Since SB Nation 2.0 blogs use a narrower column on the front page, consider using the Intro Paragraph as a teaser, and extend longer posts into the Entry Body area. Many blogs and news sites have found that this makes your front page more scannable and pulls readers into the community.

You can switch between WYSIWYG (what you see is what you get) and HTML editors, explained in further detail below. The auto-save function will save your progress as you compose or edit. Use the bottom row of blue buttons to manually Save your entry, to Preview the final look of the entry, and to Publish to the live site. When editing an existing entry, use Publish to push updates to the world.

2. All Sorts of Inserts

Use these toolbar buttons to insert images, videos, and files into your entry. You can upload these assets from your local machine, or pull them in from elsewhere on the web.

To insert images, click the picture button on the toolbar. In the blue modal window, type or paste in a URL to an image in the field labeled 'URL', and click the 'Import' button. You may see a progress bar as your image is imported and resized. Once the window closes you'll see your image displayed at the current cursor location.

To add a link, highlight the words that you'd like linked, and click the link button. Type or paste a URL into the small popup window to create the link. Easy as cake!

Widgets are packaged objects that contain statistics, text, or special markup. Press the shuttlecock icon to add a sports data widget to your entry. To insert custom widgets, try the gear icon.

We encourage you to click around and this toolbar to try out different inserts, and check out the results. There's a lot of cool functionality for you to discover and put to use.

3. Good Formatting

Use the toolbar buttons to apply and remove formatting to text you've highlighted with your cursor—you can even apply multiple styles at once. As you move your cursor around, buttons will light up to show what styles are applied. Use toolbar buttons to create lists, to indent a paragraph, or to make text bold or italicized.

When you quote from another source, press the " quotation button to use blockquote formatting. You can highlight text before hitting this button to wrap a whole passage in a blockquote.

4. Get Your Posts Connected

Use the Tags and Links fields to the right of the editor to connect your post to other entries & info within your blog, to articles elsewhere SB Nation, or to pages anywhere on the web. Attach an existing poll to your entry, or create a new one—you can even choose to share it, so other users can attach it to their own posts.

When appropriate, attach related Teams, Players, and Events to your post. You'll find that doing this promotes your FanPost on the sidebar of other posts, as well as on special event and player pages. This gives you free promotion, and makes it easy for you and your readers to connect to SB Nation's regularly updated stats.

Once an entry has been published, changes to these related fields will be reflected on the live site as soon as the post is saved (through auto-save or a click of the Save button).

5. Easy Editing

In WYSIWYG mode, the editor allows you to edit your entry as it will generally look when published. To see exactly how it will look, use the blue Preview button below.

By default, this editor will add two line breaks (a new paragraph) when you hit the Return key. Should you only want a single line break, use Shift+Return.

Markup created through either HTML or WYSIWYG view will be formatted and checked for errors once saved into the system. In some rare cases you may encounter strange behavior when switching views. Using valid markup as described in the XHTML tab will help prevent this.

More Info

For more detailed help, check out the full FanPost Help Guide.

Updated 8/19/2008.

Raising Standards in HTML View

If you view the source of an SB Nation 2.0 blog, you'll see that we're now using the "XHTML 1.0 Strict" document type. XHTML is a markup standard very similar to HTML, incorporating some qualities of XML and a few changes to tags and usage. We've summarized the three most important differences below, but you can learn more from W3 Schools.

This all makes our new platform more flexible and efficient. For you, it may mean learning new practices. In time, posting will be easier than ever, and life will be crazy delicious.

1. Call 'Em Like You See 'Em

Whenever possible, wrap content in tags that describe the content. Writing a paragraph? Wrap it with <p> </p> tags. Quoting a source? Wrap the quote in <blockquote> </blockquote> tags. For a subtitle, use heading tag like <h3> or <h4>. Use <ul> and <li> tags for unordered lists. Use a <table> for tabular data, not for layout tricks.

The toolbar buttons give you easy access to these descriptive tags. Through use of valid and semantic markup, your content will be better understood by Google, by sight-impaired people using screen readers, and by folks browsing with cell phones. Everyone wins!

2. Finish What You Start

To ensure your entries look across browsers, keep your tags properly nested and be sure to close every tag you open—even <br /> and <img /> tags. The editor will do this for you in WYSIWYG mode. We also want to make sure to use lowercase tags, and to wrap attributes in quotes.

The old way:

<P>Morbi tempus ultricies quam.

<P>Rhoncus viverra, enim lorem tempor nunc.

  <IMG src=/images/filename.jpg alt=image>

  <UL>

    <li>item

    <LI>another item  

    <li>third item

  </UL>

<p>Viverra, enim lorem tempor nunc.<BR>  

  Ultricies quam!
      

The new way:

<p>Morbi tempus ultricies quam.</p>

<p>Rhoncus viverra, enim lorem tempor nunc.</p>

<img src="images/filename.jpg" alt="image" />

  <ul>

    <li>item</li>

    <li>another item</li>  

    <li>a third item</li>

  </ul>

  <p>Viverra, enim lorem tempor nunc.<br /> 

  Ultricies quam!</p>
      

The old lazy ways may work, but results will vary. Rules make the game better.

3. Letting Go of Old Tags

You'll no longer be needing <center>, <small>, <big>, <font>,  <b>, <u>,  and <s> tags. Many of these simply won't work anymore in some browsers. Instead, we'll use CSS (cascading style sheets) to control presentation.

We've set up a number of class attributes that you can apply to paragraphs, images, tables and divs to make this easy. Check out the Style Guide tab to learn what styles we currently have available and how to implement them.

Updated 8/19/2008. This guide and class list is a work in progress, so check back for new styles and improved examples.

The Elements of Style

We're developing a versatile set of CSS classes that you can add to images, tables, paragraphs and divs in HTML view. We want you to be able to control the coloring, sizing, and layout of your content with little hassle. With testing and feedback, we'll build out some great options. To learn more from the W3 Schools CSS tutorial.

Stay Classy

Here's a list of the classes currently available to you. Adding them to your markup is easy—we've included examples below this table.

Adding classes to elements is easy. You can use one class, or string several together with a space between each:

<p class="m10">

  This has a 10px margin on each side.

</p>



<p class="center-c text9">

  This contains centered, 9px text.

</p>
       

More classes, examples and markup snippets to come as we expand this guide! Thanks for reading.