RotatingText - Revision history

Sridhar: Added === How to use a font that is not listed as a choice ===

2013-01-30T07:24:18Z

Added === How to use a font that is not listed as a choice ===

Skylermoore at 20:15, June 17, 2011

2011-06-17T20:15:22Z

Skylermoore at 20:04, June 17, 2011

2011-06-17T20:04:52Z

Skylermoore at 19:01, June 17, 2011

2011-06-17T19:01:49Z

Dustin: Created page with 'Part of the DisplayBuddy series. This page is waiting on Skyler Moore. ==Additional Resources== # [http://pluginbuddy.com/free-wordpress-plugins/ Free Plugins by PluginBuddy] ...'

2010-08-25T18:56:40Z

Created page with 'Part of the DisplayBuddy series. This page is waiting on Skyler Moore. ==Additional Resources== # [http://pluginbuddy.com/free-wordpress-plugins/ Free Plugins by PluginBuddy] ...'

New page

Part of the DisplayBuddy series.

This page is waiting on Skyler Moore.

==Additional Resources==
# [http://pluginbuddy.com/free-wordpress-plugins/ Free Plugins by PluginBuddy]
# [http://pluginbuddy.com/tutorials/ PluginBuddy Tutorials]
# [http://pluginbuddy.com/ PluginBuddy.com]
# [http://pluginbuddy.com/support/ Support Forums]

[[Category:PluginBuddy]]

← Older revision		Revision as of 07:24, January 30, 2013
Line 54:		Line 54:

	[[Category:PluginBuddy]]		[[Category:PluginBuddy]]
		+
		+	== How Tos ==
		+
		+	=== How to make Rotating Text bold and italic ===
		+
		+	Add the following at the end of active theme's style.css (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush:css;">
		+	.rotatingtext {
		+	font-weight: bold;
		+	font-style: italic;
		+	}
		+	</pre>
		+
		+	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 [http://ithemes.com/codex/page/CSS#Firebug_Tutorials Firebug]).
		+
		+	Ex.:
		+
		+	<pre class="brush:css;">
		+	#it_rotatingtext-group-0 .rotatingtext {
		+	font-weight: bold;
		+	font-style: italic;
		+	}
		+	</pre>
		+
		+	=== 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 ====
		+
		+	[[File:2013-01-30 11-32-43.png\|215px\|none]]
		+
		+	'''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.
		+
		+	[[File:Screen Shot 2013-01-30 at 11.26.53 AM.png\|519px\|none]]
		+
		+	'''4.''' Paste the above code near the top of active theme's style.css (Appearance -> Editor), just below the commented area.
		+
		+	Ex.:
		+
		+	[[File:Screen Shot 2013-01-30 at 11.29.34 AM.png\|705px\|none]]
		+
		+	'''5.''' At the end of active theme's style.css (Appearance -> Editor), add CSS similar to:
		+
		+	<pre class="brush:css;">
		+	.rotatingtext {
		+	font-family: 'Text Me One', sans-serif;
		+	}
		+	</pre>
		+
		+	In the above change value of <code>font-family</code> to what's shown on Google fonts page for the selected font.
		+
		+	[[File:Screen Shot 2013-01-30 at 11.27.05 AM.png\|330px\|thumb\|none]]
		+
		+	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 [http://ithemes.com/codex/page/CSS#Firebug_Tutorials Firebug]).
		+
		+	Ex.:
		+
		+	<pre class="brush:css;">
		+	#it_rotatingtext-group-0 .rotatingtext {
		+	font-family: 'Text Me One', sans-serif;
		+	}
		+	</pre>
		+
		+	==== @font-face ====
		+
		+	'''1.''' Generate the files needed for @font-face using [http://www.fontsquirrel.com/fontface/generator/ this] or [http://fontface.codeandmore.com/ 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.
		+
		+	[[File:2012-07-10 18-52-12.png\|667px\|none]]
		+
		+	'''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.:
		+
		+	<pre class="brush:css;">
		+	@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;
		+	}
		+	</pre>
		+
		+	'''4.''' Open .html file in the extracted folder in a text editor and copy a line similar to
		+
		+	(for example)
		+
		+	<pre class="brush:css;">
		+	font-family: 'CorbelRegular';
		+	</pre>
		+
		+	This will be found between <code><head></code> and <code></head></code>.
		+
		+	'''5.''' Now <code>CorbelRegular</code> 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:
		+
		+	<pre class="brush:css;">
		+	.rotatingtext {
		+	font-family: 'CorbelRegular';
		+	}
		+	</pre>
		+
		+	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 [http://ithemes.com/codex/page/CSS#Firebug_Tutorials Firebug]).
		+
		+	Ex.:
		+
		+	<pre class="brush:css;">
		+	#it_rotatingtext-group-0 .rotatingtext {
		+	font-family: 'CorbelRegular';
		+	}
		+	</pre>

@@ Line 11: / Line 11: @@
 ==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.

← Older revision		Revision as of 20:04, June 17, 2011
Line 36:		Line 36:
	** Font-color		** 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.		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.
		+
		+
		+	==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.

← Older revision		Revision as of 19:01, June 17, 2011
Line 1:		Line 1:
−	~~Part of the~~ DisplayBuddy ~~series.~~	+	{{#ev:vimeo\|14868041\|400\|right}}
		+	'''Series:''' [[DisplayBuddy]]

		+	==Description==
		+	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.
		+
		+	==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.
		+
		+
		+	==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.
		+
		+
		+	==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
		+	** (optional) Auto width
		+	* Group Height
		+	** (optional) Auto height
		+	* 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.

−	~~This page is waiting on Skyler Moore.~~

	==Additional Resources==		==Additional Resources==