RotatingText

The RotatingText plugin adds the ability to create groups of text entries that can be displayed on the front end of a site by fading each of the entries in and out one at a time.

Content

  1. RotatingText Basics
  2. Groups
  3. Rotation Speed Settings
  4. Group Styles
  5. Entries
  6. Widget
  7. Shortcode
  8. RotatingText How-Tos
  9. How to use a font that is not listed as a a choice
  10. Google Fonts
  11. @font-face

RotatingText Basics

Groups

The first step in adding RotatingText to your site is to create a group to store the text entries in. The link to RotatingText in the WordPress admin area is in the DisplayBuddy section of the menu. When you click the RotatingText link it will direct you to the area where you can create a group. The only information requested to create a group is a name for that group. After you have created a group it will be added to a table that lists all of the existing groups and lists information about them.

Group Settings

The settings section will allow you to easily customize each group to fit your sites needs.

Rotation Speed Settings

This section of the settings will allow you to adjust the timing on how the fading transitions work for this group when it is rotating through text on your site. These options are fairly self explanatory since they are listed in the order that they occur.

  • Fade in duration - The amount of time that is spent fading the text in from being hidden.
  • Display text duration - The amount of time spent between fading the text in and when it will begin fading out.
  • Fade out duration - The amount of time that is spent fading the text out to where is hidden again.
  • Between animations - This is the amount of time spent between fading one text entry out and fading in the next text entry.

Group Styles

On the PluginBuddy team we try our best to make options for a wide variety of adjustments that people may want to make. Since there is a wide variety of places that you may want to display RotatingText on your site it was important to make it very flexible and easy to customize. The following style options were our attempt at doing just that.

  • Group Width
    • Auto width (optional)
  • Group Height
    • Auto height (optional)
  • Horizontal text alignment
  • Vertical text alignment
  • Background Color
  • Group Font Styles
    • Font-size
    • Font-family
    • Font-color

There was also a thought that users may want to style each text entry in the group individually so we added optional styling options for the font on each text entry.

Entries

Each entry created is one of the pieces of text that will be rotated through on the front end of the site. Once you have created a group you can then add entries to that group by selecting one of the groups from the groups table. The only information needed to create an entry is the text you would like to rotate. When creating an entry there are two optional fields that will allow you set a link for the text entry and an option for that link to open in a new tab or window when it is clicked.

After you create an entry it is added to a table that lists all of the created entries for that group and information about that entry. The order of the entries is determined by the order that they are listed in the entry table. To the right of each entry listed in the table there is a small image graphic that will allow you easily reorder entries by dragging them to the position in the list where you would like for then to occur, then after you have them placed in the order you like you can click the "Save order" button to save it.

Displaying RotatingText on Your Site.

RotatingText can be added to your site using two different methods, widgets or shortcode.

Widget

Navigate to the Widgets area under Appearance in the WordPress Admin area. Drag the RotatingText widget into the widget area that you would like for it to display in and select the group from the drop-down menu that you would like to display.

Shortcode

The groups table in RotatingText will display a shortcode for each different group that you have created. If you would like to add a RotatingText group to a post or page all you have to do is copy that shortcode and paste it the content of the page or post.

RotatingText How-Tos

How to make RotatingText bold and Italic.

Add the following at the end of active theme's style.css (WP dashboard -> Appearance -> Editor):

.rotatingtext {
    font-weight: bold;
    font-style: italic;
}

If you would like to restrict the above to only a specific group, then prepend the CSS selector with ID of the Rotating Text group (this can be easily obtained using Firebug ).

Ex.:

#it_rotatingtext-group-0 .rotatingtext {
    font-weight: bold;
    font-style: italic;
}

How to use a font that is not listed as a choice.

At present two popular methods to add fonts to any site are:

  • Google Fonts
  • @font-face

Google Fonts

 

1. Go to http://www.google.com/webfonts

2. Click on Quick-use for the selected font.

3. Scroll to the bottom and click on @import tab. Copy the code shown.

4. Paste the above code near the top of active theme's style.css (Appearance -> Editor), just below the commented area.

Ex.:

5. At the end of active theme's style.css (Appearance -> Editor), add CSS similar to:

.rotatingtext {
    font-family: 'Text Me One', sans-serif;
}

In the above change value of font-family to what's shown on Google fonts page for the slected font.

If you would like to restrict the above to only a specific group, then prepend the CSS selector with ID of the Rotating Text group (this can be easily obtained using Firebug ).

Ex.:

#it_rotatingtext-group-0 .rotatingtext {
    font-family: 'Text Me One', sans-serif;
}

@font-face

1. Generate the files needed for @font-face using this or this site from your desired font (.ttf file).

2. Extract the zip file to get a folder having files with different extensions. Upload .ttf, .eot, .svg, .woff files to active theme's directory using a FTP client or cPanel file manager.

3. Open stylesheet.css, copy all the code similar to the following and paste at the end of active theme's style.css (WP dashboard -> Appearance -> Editor):

Ex.:

@font-face {
    font-family: 'CorbelRegular';
    src: url('corbel-webfont.eot');
    src: url('corbel-webfont.eot?#iefix') format('embedded-opentype'),
             url('corbel-webfont.woff') format('woff'),
             url('corbel-webfont.ttf') format('truetype'),
             url('corbel-webfont.svg#CorbelRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

4. Open .html file in the extracted folder in a text editor and copy a line similar to

(for example)

font-family: 'CorbelRegular'; 

This will be found between <head> and </head> .

5. Now CorbelRegular font can be used just like any other font in your site.

Ex.:

At the end of active theme's style.css (Appearance -> Editor), add CSS similar to:

.rotatingtext {
    font-family: 'CorbelRegular';
}

If you would like to restrict the above to only a specific group, then prepend the CSS selector with ID of the Rotating Text group (this can be easily obtained using Firebug ).

Ex.:

#it_rotatingtext-group-0 .rotatingtext {
    font-family: 'CorbelRegular';
} 
Have more questions? Submit a request