Customization Instructions: Style
The Slide can be customized to match the style of your site. If you want to change The Slide's functionality (rather than its look and feel), please click here.
This document is intended for users who have at least a basic knowledge of HTML and Cascading Style Sheets (CSS). The CSS selectors listed below are add-ons to the standard style of The Slide. When a new style is created, it should be tested on all browsers to ensure that everything is functioning properly. The Slide uses CSS transitions for animation, so be sure you understand the implications of CSS animations cross-browser before making any changes to the animation classes.
The Slide consists of a set of default styles and a set of configurable styles. In order to add your own look and feel to The Slide, you must ensure that all user specified (that's you) style settings for The Slide have the !important property attached to them in order to override the default settings. These style settings can only be done as an external Cascading Stylesheet (CSS) file URL in The Slide initializer code. Inline CSS will not work. The only way for the CSS to be passed to the iframe is through The Slide initializer code. All CSS selectors are in #blue and preceded with a # sign. All CSS classes are in .green and preceded with a . (period). All HTML markup is in orange.
| Selector | Example | Description |
|---|---|---|
| #simplereach-slide-element | font-family: Arial, Helvetica, sans-serif !important; |
The outer most div surrounding the slide. All the global settings for the slide are put in this section. This includes things like the font styles, Slide dimensions, colors, and shadows. |
| #simplereach-slide-element.slide-in | -webkit-transition: right 500ms ease, right 500ms ease !important; |
The slide-in class is for The Slide animation. When The Slide is out and is going to slide back in, this is the set of CSS transitions that will be used to slide back in. |
| #simplereach-slide-element.close | -moz-transition: width 500ms ease, height 500ms ease !important; |
The close class is for The Slide animation. When The Slide is out and is going to slide back in, this is the set of CSS transitions that will be used to close after it has slid back in. |
| #simplereach-slide-element.open | -transition: width 500ms ease, height 500ms ease !important; |
The open class is for The Slide animation. When The Slide is closed and is going to slide out, this is the set of CSS transitions that will be used to open The Slide. |
| #simplereach-slide-element.help | -transition: width 500ms ease, height 500ms ease !important; |
The help class is for The Slide animation. When The Slide is open or closed and the user clicks on the help menu, this is the set of CSS transitions that will bring out the menu. |
| #simplereach-slide-header | font-size: 10px !important; |
The Slide header is the containing div for the header text on both The Slide recommendation and The Slide settings section. |
| #simplereach-slide-title | line-height: 10px !important; |
The Slide title is the div that contains the header text for The Slide recommendation section. |
| #simplereach-slide-help-header | height: 10px !important; |
The Slide title is the div that contains the header text for The Slide help section. |
| #simplereach-slide-menu | height: 10px !important; |
When The Slide is rendered, the #simplereach-slide-menu refers to the items in the upper right hand corner of The Slide. This includes the help and close buttons. |
| #simplereach-slide-open | line-height: 14px !important; |
The open button is only visible when The Slide is closed. It refers to the + sign. |
| #simplereach-slide-close | margin-left: 5px !important; |
The close button is only visible when The Slide is open or the settings page is open. It refers to the X. |
| #simplereach-slide-help-button | border: 1px solid #eeeeee !important; |
The help button is always visible. It refers to the ?. |
| #simplereach-slide-close | font-size: 17px !important; |
The help button is always visible. It refers to the ?. |
| #simplereach-slide-content | min-height: 45px !important; |
The #simplereach-slide-content div is the div that contains the content headline recommendation. It is also the containing div for the thumbnail if one is available and set to be displayed. |
| #simplereach-slide-image | width: 45px !important; height: 45px !important; |
If a thumbnail is available and set to be displayed, then it will be contained in this div. All thumbnails are stored by SimpleReach in PNG format as a 45x45 image. |
| #simplereach-slide-help | line-height: 13px !important; |
The #simplereach-slide-help div is the containing div for the help section. All changes made in this selector will filter down into the rest of the help section. |
| #simplereach-slide-help-text | margin:0 0 10px 0 !important; |
The #simplereach-slide-help-text div is the area of text describing what is available on this help form. |
| #simplereach-slide-help label | height: 35px !important; |
The label is for the area of the help section to the right side of the radio buttons or the text describing what each radio button is for. |
| #simplereach-slide-help input | width: 14px !important; height: 14px !important; |
The input markup is for setting up the radio boxes on the help form. |
| #simplereach-slide-help button | font-size: 12px !important; |
The button markup is for saving the settings specified in the form. |
| #simplereach-slide-link | color: #FE3F10 !important; |
All styles surrounding the recommendation link should be set here. This includes everything from link color to link decoration. |
| #simplereach-slide-footer | height: 30px !important; |
The #simplereach-slide-footer is where The Slide logo and the social widgets go. The order of the social widgets from left to right if they are all enabled are: Google Plus One, Facebook Like, Twitter Share. To choose which sharing widgets The Slide should display, please go to the Manage Account section of the portal. |
| #simplereach-slide-google | float: right !important; |
If Google Plus One is enabled as a widget for The Slide, these are the style settings that are applied to it. |
| #simplereach-slide-facebook | float: right !important; |
If the Facebook Like button is enabled as a widget for The Slide, these are the style settings that are applied to it. |
| #simplereach-slide-twitter | float: right !important; |
If the Twitter sharing widget is enabled as a widget for The Slide, these are the style settings that are applied to it. |
All style settings are optional and the default settings will be used if nothing else is specified. If there is no <style></style> block, then the CSS stylesheet can be specified as in the example below.