Flag Our Top Sportsbooks
50% BONUS Up To $1000
125% BONUS Up To $2500
50% BONUS Up To $1000

Terms Guide

Arrow Link

Full Matchup

Use the following markup to create an inline link with an arrow. In CKE Editor is under "Styles -> Base Arrow"

  <a href="#" class="base-arrow">Full Matchup</a>

 

Anchor Links

Follow the steps to create anchor links, that allow users to jump to specific lines in your content.

Step 1

Insert this markup into the line of content where you would like to create an anchor:

<a name="anchor"></a>

Create a unique tag that will be used to find this anchor when creating the link and insert it between the quotations ("anchor" is being used in this example).

Step 2

Link text to your anchor using the following markup:

<a href="#anchor">anchor links</a>

Clink the linked "anchor links" text at the beginning of this section to see an example of how this works.

Anchor example

Link Button

All

  <a href="#" class="link--button">All</a>

Arrow Right Link

Full Review

Follow the steps to create arrow right link.

Step 1

Insert this markup into the line of content where you would like to create an arrow right link:

<a href="[url]" class="link-arrow">Full Review</a>

Step 2

Add animation to your a tag using the following markup:

<a href="[url]" class="link-arrow">Full Review <span class="arrow-right"></span></a>

Hover on "Full Review" to see an example of how this works.

Volt Solid Button

Full Review

The volt button uses button--solid-volt or button--solid-play class

The markup looks like this:

<a href="[url]" class="button-solid-volt">See Matchup</a>

Hollow Primary Button

Full Review

The hollow primary button uses button--hollow-primary class

The markup looks like this:

<a href="[url]" class="button-hollow-primary">See Matchup</a>

 

Slanted div

The slanted elements will always stick to a 10 degree angle

 

<div class="slanted"></div>

 

<div class="slanted--reverse"></div>

 

<div class="slanted--both-side"></div>

Accordions

You can add an accordion (such as the one found in the FAQs). The accordion will start with all of it's sections collapsed, and whenever you open a section, it will close all other sections of the accordion. It takes an icon (an SVG) and has a section for a content (such as the star ratings) that will appear to the right of the title. You can create an accordion with the following markup:

<div class="accordion">
  <h3 class="accordion__block-bar">
    <span class="accordion__icon">*your SVG here*</span>
    <span class="accordion__title">*question one title*</span>
    <span class="accordion__title-addon">The addon. If you don't want one, leave this span empty</span>
  </h3>
  <div class="accordion_content">
    *the content of the accordion*
  </div>
  ...repeat the h3 and div above as necessary for all of your questions
</div>

 

an example accordion:

The first title An addon

The first content

The first title An addon

The first content

 

Page Title

<h1 class="page--title">Page Title</h1>

Headers

Header 1

<h1> = The standard header tag to be used in written content.

Header 2

<h2> = The standard header tag to be used in written content.

Header 2 alt-one

<h2 class=”alt-one”> = To be used to create a distinct “break”, e.g. at the beginning of an “Archived” article on the same page for written content that is “Stacked”. In CKE Editor first use standard h2 rules and then "Styles -> H2 ALT-1"

Header 3

<h3> = The standard sub-header to be used in written content. In CKE Editor is under "Styles -> Heading 3"

Special Body Copy

Special Body Copy

<p class="special-body-copy">special body copy</p>

Promotional Text

content-promo-text

<p class=”content-text-promo”> = Revive or Generic text ads, other sportsbook text ads. In CKE Editor is under "Styles -> Promo Text"

content-promo-text-alt-one

<p class=”content-text-promo”> = Other Promotional Text (e.g important related content). In CKE Editor is under "Styles -> Promo Text Alt-1"

 

<p class=”content-text-promo-add-info”> = Referencing Sportsbook Sources and Odds Dates in Lists Beneath the List Header. In CKE Editor is under "Styles -> Promo Text Add-Info"

Other Text

<p class=”os-content-blockquote”> = Citation, Quote. In CKE Editor is under "Styles -> Quote"

"This is an example of a quote from a sportsbook manager in an article."

Lists

Lists of odds content and betting trends are to be put into lists. To insert a list, you can use the list button.

 

This will bring up a popup:

 

 

It will ask you if you want an unordered or ordered list, and will have fields to include a title and a caption for the list (if left blank, those elements will not be included).

For reference, markup for an unordered list is as follows:

<div class="list-container">
  <figure class="figure-list figure-list--has-caption">
    <figcaption class="figure-list__caption">The Title</figcaption>
    <ul class="list">
      <li class="list__item">Item text</li>
       ...etc
    </ul>
    <div>
      <em class="figure-list__text">Caption text</em>
    </div>
  </figure>
</div>

The title is contained within the "figcaption" element near the top, while the caption is contained within the "em" near the bottom. Either or both can be removed if not needed. If the title is removed, then "figure-list--has-caption" should be removed from the figure element as well.

Similarly, the markup for an ordered list is as follows:

<div class="list-container">
  <figure class="figure-list figure-list--has-caption">
    <figcaption class="figure-list__caption">The Title</figcaption>
    <ol class="list--ordered list">
      <li class="list--ordered__item list__item">Item text</li>
       ...etc
    </ol>
    <div>
      <em class="figure-list__text">Caption text</em>
    </div>
  </figure>
</div>

 

Shark Lists

  • First Item
  • Second Item
  • Third Item
Odds as of May 25 at Bovada

You can convert an unordered list into a "shark list" by selecting the ul element and adding the style

"Styles"->"Shark List"

 

Ordered Listings Styles

"Templates" -> Ordered Listing Style

Place Caption Here
Inital title
Place Content Here
Second Title
Text Content Here

 

Cards

 

Standard card

TITLE

BODY


Text hidden in "Read More"

 

To insert a card without an image

"Templates" -> "Card Style"

The contents of the blue box will be hidden by the "read more" button.

 

Card with an Image

TITLE

BODY


Text hidden in "read more"

 

You can create a card with an image by selecting

"Templates" -> "Card Horizontal Style"

If you double click on the placeholder image, it'll let you specify the URL of your image and set the alt-text.

You can also add a card with a small image:

TITLE

BODY


Text hidden in "Read More"

by selecting:

"Templates" -> "Card Horizontal with Small Image Style"

 

Right-aligned Cards

TITLE

BODY


Text hidden by the "Read More" button

 

To align a card with an image so that it's image aligns to the right of the text rather than the left, first press the "Component Wrapper" button, and then add:

card-wrapper,card-wrapper--right

to the provided class field. Once this is done, create your card inside of it.

 

Alternating the alignment of Card images

TITLE

BODY


Text hidden by the "Read More" button

TITLE

BODY


Text hidden by the "Read More" button

TITLE

BODY


Text hidden by the "Read More" button

 

To make a series of cards with images (either standard or small) alternate their alignment back and forth, press the "Component Wrapper" button and set the classes to:

card-wrapper,card-wrapper--right

and then insert your cards into the wrapper.

 

Secondary Card

TITLE

BODY

Link Name

 

To add a secondary-style card, use markup like the following:

<div class="card card--secondary">
<div class="card__content">
<h3 class="card__title">TITLE</h3>

<p class="card__body">BODY</p>
<a class="button button--solid-primary button--arrow-right" href="#">Link Name</a></div>
</div>

 

 

 

"Thumbnail" Listings

Oddss Shark Super Computer

Computers don’t lie and are not swayed by your fantasy-team man-crush on Tom Brady. Crunch the numbers, win bets. Computer's Picks

 

Highlight the content of the <p> tag  and select:

"Templates"  -> "Thumbnail + Content" 

It is advisable to then upload the image just inside the opening <p> tag after the step above.

<div>
  <figure class="thumbnail thumbnail--content">
    <figcaption class="thumbnail__title">
      <a class="thumbnail__title-link" href="/super-contest/oddsshark-super-computer">Odds Shark Super Computer</a>
    </figcaption>
      <img class="thumbnail__image" src="site/default/files/supercontest/os.jpg" />
    <p class="thumbnail__body">
      Computers don't lie and are not swayed by your fantasy-team man-crush on Tom Brady. Crunch the numbers, win bets.
    </p>
    <a class="thumbnail__more-link" href="/super-contest/oddsshark-super-computer">Computer's Picks</a>
  </figure>
</div>

 

Personality Styles Right Rail

"Templates" -> Personality Styles Right Rail

TITLE

BODY

 

Tables

To create a table like the following example:

Heading 1 Heading 2 Heading 3 Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4
row 5 cell 1 row 5 cell 2 row 5 cell 3 row 5 cell 4
row 6 cell 1 row 6 cell 2 row 6 cell 3 row 6 cell 4
row 7 cell 1 row 7 cell 2 row 7 cell 3 row 7 cell 4
row 8 cell 1 row 8 cell 2 row 8 cell 3 row 8 cell 4
row 9 cell 1 row 9 cell 2 row 9 cell 3 row 9 cell 4

you need the following markup:

<table class="table">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
      <th>Heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell 1</td>
      <td>row 1 cell 2</td>
      <td>row 1 cell 3</td>
      <td>row 1 cell 4</td>
    </tr>
    <tr>
      <td>row 2 cell 1</td>
      <td>row 2 cell 2</td>
      <td>row 2 cell 3</td>
      <td>row 2 cell 4</td>
    </tr>
    <tr>
      <td>row 3 cell 1</td>
      <td>row 3 cell 2</td>
      <td>row 3 cell 3</td>
      <td>row 3 cell 4</td>
    </tr>
  </tbody>
</table>

 

Table with a Caption

You can add a caption like the following to a table

A caption for this table
Heading 1 Heading 2 Heading 3 Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4
row 5 cell 1 row 5 cell 2 row 5 cell 3 row 5 cell 4
row 6 cell 1 row 6 cell 2 row 6 cell 3 row 6 cell 4
row 7 cell 1 row 7 cell 2 row 7 cell 3 row 7 cell 4
row 8 cell 1 row 8 cell 2 row 8 cell 3 row 8 cell 4
row 9 cell 1 row 9 cell 2 row 9 cell 3 row 9 cell 4

By adding <caption>your caption goes here</caption> after the <table> opening tag.

 

Table with Stripes

You can create a table with alternating stripes

Heading 1 Heading 2 Heading 3 Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4
row 5 cell 1 row 5 cell 2 row 5 cell 3 row 5 cell 4
row 6 cell 1 row 6 cell 2 row 6 cell 3 row 6 cell 4
row 7 cell 1 row 7 cell 2 row 7 cell 3 row 7 cell 4
row 8 cell 1 row 8 cell 2 row 8 cell 3 row 8 cell 4
row 9 cell 1 row 9 cell 2 row 9 cell 3 row 9 cell 4

By adding "table--striped" after "table" in the <table>'s classes.

 

Table with Double Stripes

You can make a table double-striped:

Heading 1 Heading 2 Heading 3 Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4
row 5 cell 1 row 5 cell 2 row 5 cell 3 row 5 cell 4
row 6 cell 1 row 6 cell 2 row 6 cell 3 row 6 cell 4
row 7 cell 1 row 7 cell 2 row 7 cell 3 row 7 cell 4
row 8 cell 1 row 8 cell 2 row 8 cell 3 row 8 cell 4
row 9 cell 1 row 9 cell 2 row 9 cell 3 row 9 cell 4

by adding table--table-double-striped to the <table>'s classes.

 

Tables with a Middle Stripe

You can create a table with a middle stripe:

Left Side 1 Stat 1 Name Right Side 1
Left Side 2 Stat 2 Name Right Side 2
Left Side 3 Stat 3 Name Right Side 3

with the markup such as the following:

<table class="table table--middle-stripe">
  <tbody>
    <tr>
      <td>Left Side 1</td>
      <th>Stat 1 Name</th>
      <td>Right Side 1</td>
    </tr>
    <tr>
      <td>Left Side 2</td>
      <th>Stat 2 Name</th>
      <td>Right Side 2</td>
    </tr>
    <tr>
      <td>Left Side 2</td>
      <th>Stat 2 Name</th>
      <td>Right Side 2</td>
    </tr>
  </tbody>
</table>

 

Sortable Tables

To make a table sortable

Heading 1 Heading 2 Heading 3 Heading 4
5 600 5.4 30
20 100 3.2 30.5
10 300 6.1 29

Add "table--sortable" after "table" in the table's classes.

 

Tables with a Fixed Column

To create a table with a fixed column and overflow:

Fixed Column Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9
Fixed cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4 row 1 cell 5 row 1 cell 6 row 1 cell 7 row 1 cell 8 row 1 cell 9
Fixed cell 2 row 2 cell 2 row 2 cell 3 row 2 cell 4 row 2 cell 5 row 2 cell 6 row 2 cell 7 row 2 cell 8 row 2 cell 9
Fixed cell 3 row 3 cell 2 row 3 cell 3 row 3 cell 4 row 2 cell 5 row 2 cell 6 row 2 cell 7 row 2 cell 8 row 2 cell 9

Add table--fixed-column to the <table>'s classes.

 

Table with Reduced Padding

You can reduce a table's padding:

Heading 1 Heading 2 Heading 3 Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4
row 5 cell 1 row 5 cell 2 row 5 cell 3 row 5 cell 4
row 6 cell 1 row 6 cell 2 row 6 cell 3 row 6 cell 4
row 7 cell 1 row 7 cell 2 row 7 cell 3 row 7 cell 4
row 8 cell 1 row 8 cell 2 row 8 cell 3 row 8 cell 4
row 9 cell 1 row 9 cell 2 row 9 cell 3 row 9 cell 4

By adding table--reduced-padding to the <table>'s classes.

 

Table with no Padding

You can remove the cells' padding entirely:

Heading 1 Heading 2 Heading 3 Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4
row 5 cell 1 row 5 cell 2 row 5 cell 3 row 5 cell 4
row 6 cell 1 row 6 cell 2 row 6 cell 3 row 6 cell 4
row 7 cell 1 row 7 cell 2 row 7 cell 3 row 7 cell 4
row 8 cell 1 row 8 cell 2 row 8 cell 3 row 8 cell 4
row 9 cell 1 row 9 cell 2 row 9 cell 3 row 9 cell 4

By adding table--no-padding to the <table>'s classes.

 

Table with Large Text

You can give the table large text

Heading 1 Heading 2 Heading 3 Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4
row 5 cell 1 row 5 cell 2 row 5 cell 3 row 5 cell 4
row 6 cell 1 row 6 cell 2 row 6 cell 3 row 6 cell 4
row 7 cell 1 row 7 cell 2 row 7 cell 3 row 7 cell 4
row 8 cell 1 row 8 cell 2 row 8 cell 3 row 8 cell 4
row 9 cell 1 row 9 cell 2 row 9 cell 3 row 9 cell 4

By adding table--large-text to the <table>'s classes.

 

Basic Rules & Guidelines

Paragraphs

Each paragraph should be wrapped in <p> tags.

Breaks or <br /> tags should not be used to create the visual appearance of paragraphs. They may be used in rare circumstance where a line break is warranted.

Example

Incorrect:  <p>The Chicago Blackhawks managed to … on Wednesday.<br /><br />
Chicago edged Nashville 5-4 as a -157 …  totals bettors.</p>

Correct: <p>The Chicago Blackhawks managed to … on Wednesday.</p>
<p>Chicago edged Nashville 5-4 as a -157 …  totals bettors.</p>

Inline Styles and Incorrect Classes

All html elements including but not limited to paragraphs, links, tables and lists should not contain inline styles or CSS classes that do not conform to the Odds Shark “base” or “written content” guidelines.

Examples

Incorrect:  <p style=”font-size: 12px; margin: 25px;” align=”left”>The Chicago Blackhawks managed to … on Wednesday.</p>

Correct:  <p>The Chicago Blackhawks managed to … on Wednesday.</p>

Incorrect:  <table border=”0” cellspacing=”0” class=”base-table” cols=”4” frame=”void” rules=”none”>…</table>

Correct:  <table class=”base-table”>…</table>

Camel Case

Camel Case is to be used for Titles; e.g. first letter of each word should be a capital letter.

Exceptions

Minor words such as “on”, “a”, “the” should remain lower case.

Words and acronyms which make sense to be all Upper-Case can be e.g. “MVP”, “MLB”, “NASCAR”.

vs and versus

Use “vs” rather than the proper word “versus” and the version with a period “vs.” in titles.

Examples

Incorrect:  Bruins have trouble scoring vs. Capitals
Correct:  Bruins Have Trouble Scoring vs Capitals

Incorrect:  Cubs open season at home versus Cardinals
Correct:  Cubs Open Season at Home vs Cardinals

Images

Main Images (at top of content)

Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Starting October 2015, Images are to be 800x492 pixels.
*Images must be either 585x360 or 610x375 pixels.

Images within Content

Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Starting October 2015, Images are to be 800x492 pixels.
*Images must be either 585 or 610 pixels wide.

Video

In Content

For video to be displayed within an article (not where image usually is), copy the full embed code from Youtube and use the video embed button in the CKEditor.

Odds Content

Displaying Odds

Positive “American” odds line values must have a “+” in front of them.

Example

Incorrect:  Blue Jays are 250 underdogs in this game.
Correct:  Blue Jays are +250 underdogs in this game.

NFL Img Tokens

Enclose in Square Brackets:

nfl:ari
nfl:atl
nfl:bal
nfl:buf
nfl:car
nfl:chi
nfl:cin
nfl:cle
nfl:dal
nfl:den
nfl:det
nfl:gb
nfl:hou
nfl:ind
nfl:jax
nfl:kc
nfl:mia
nfl:min
nfl:ne
nfl:no
nfl:nyg
nfl:nyj
nfl:oak
nfl:phi
nfl:pit
nfl:sd
nfl:sea
nfl:sf
nfl:stl
nfl:tam
nfl:ten
nfl:was

The following has been inserted by using the betonline token found Here as shown in the following code block. (You must be logged in to view the page)

Sportsbook Example:
featured-sportsbook:BetOnline]

In addition to the link to the token replacements above there is also a link on each edit page where they are available found just under the Text Format in the bulleted list that reads "For a list of Featured Operator replacements."

Upcoming Events