Adding style to your Extra Story Elements is as easy is setting your options in the Add SNO Story Element dialog window. You're able to choose from multiple options. Depending on the element, these may include: Alignment, Border, Background, and Shadow.
__________________________________
How to Edit Styles After Adding an Element
If you've already added your Extra Story Element and its respective Styling Elements, but want to change individual Style Elements for those items, you can do so manually with following the steps below by editing the shortcodes.
Embeddable Files (i.e. Video, Audio, Infographic)
After you insert any embeddable file into a story, you will see a bit of shortcode that looks something like this:
[ video credit=”Videographer’s Name” align=”right” border=”left”]<iframe width=”560″ height=”315″ src=”http://www.websiteyouraregettingthisfrom.com” frameborder=”0″ allowfullscreen></iframe>[/video ]
By adding a bit of code inside these brackets you can stylize your embeddable file in a variety of different ways. Simply go between the brackets and type in the code for the attributes you would like to change using the options below. For example, if you would like your embeddable file to be centered on the page with a border all around the new code would look like this:
[ video credit=”Videographer’s Name” align=”center” border=”all”]<iframe width=”560″ height=”315″ src=”http://www.websiteyouraregettingthisfrom.com” frameborder=”0″ allowfullscreen></iframe>[/video ]
- align=”left” – – Choices for inside the quotes: left, right, center
- border=”left” – – Choices for inside the quotes: left, right, top, bottom, all, off
- shadow=”off” – – Choices for inside the quotes: off, on
- background=”off” – – Choices for inside the quotes: off, on
Related Stories
After you insert related stories on a story page, you will see a bit of shortcode that looks something like this:
[related title=”Read Next” stories=”453,235,2765” align=”left”].
By adding a bit of code inside these brackets you can stylize your related stories box in a variety of different ways. Simply go between the brackets and type in the code for the attributes you would like to change using the options below. For example, if you would like your box to be centered on the page with a border all around without a background the new code would look like this:
[related title=”Read Next” stories=”453,235,2765” align=”center” border=”all” background=”off”]
- align=”left” – – Choices for inside the quotes: left, right, center
- border=”left” – – Choices for inside the quotes: left, right, top, bottom, all, off
- shadow=”off” – – Choices for inside the quotes: off, on
- background=”off” – – Choices for inside the quotes: off, on
Pull Quotes
After you insert a pull quote into a story, you will see a bit of shortcode that looks something like this:
[pullquote align=”left” speaker=”Speaker of the Quote”]This is an amazing quote![/pullquote].
By adding a bit of code inside these brackets you can stylize your pull quote in a variety of different ways. Simply go between the brackets and type in the code for the attributes you would like to change using the options below. For example, if you would like your pull quote to be centered on the page with a border all around without a background the new code would look like this:
[pullquote align=”centered” speaker=”Speaker of the Quote” border=”all” background=”off”]This is an amazing quote![/pullquote]
- align=”left” – – Choices for inside the quotes: left, right, center
- border=”left” – – Choices for inside the quotes: left, right, top, bottom, all, off
- shadow=”on” – – Choices for inside the quotes: off, on
- background=”on” – – Choices for inside the quotes: off, on
Reader Polls
After you insert a poll into a story, you will see a bit of shortcode that looks something like this:
[poll id=”3”].
By adding a bit of code inside these brackets you can stylize your poll in a variety of different ways. Simply go between the brackets and type in the code for the attributes you would like to change using the options below. For example, if you would like your poll to be centered on the page with a border all around without a background the new code would look like this:
[poll id=”3” align=”center” border=”all” background=”off”]
- align=”left” – – Choices for inside the quotes: left, right, center
- border=”left” – – Choices for inside the quotes: left, right, top, bottom, all, off
- shadow=”off” – – Choices for inside the quotes: off, on
- background=”off” – – Choices for inside the quotes: off, on