Tipsy - Revision history

Bes: Added "New Lines - Line Breaks" and /* HTML Code */ sections

2011-11-21T23:48:43Z

Added "New Lines - Line Breaks" and - HTML Code: sections

Bes: Added /* Display iframe inside Tipsy Shortcode */ section

2011-11-16T20:12:03Z

Added - Display iframe inside Tipsy Shortcode: section

Bes: Added /* Change position of the Tipsy box */ sub-section

2011-10-19T19:43:33Z

Added - Change position of the Tipsy box: sub-section

Bes: Changed /* Change color of the arrow in Default layout */ to be a sub-section of its own, instead of an entry inside the other sub-section.

2011-10-19T19:33:46Z

Changed - Change color of the arrow in Default layout: to be a sub-section of its own, instead of an entry inside the other sub-section.

Bes: Added /* Change color of the arrow in Default layout */ sub-section

2011-10-19T19:31:00Z

Added - Change color of the arrow in Default layout: sub-section

Bes: Added /* Special Characters */ section

2011-10-17T17:47:45Z

Added - Special Characters: section

Bes: Added info that editing default layouts means the changes will be lost with any Tipsy upgrades. /* Customize Tipsy */

2011-10-13T17:11:10Z

Added info that editing default layouts means the changes will be lost with any Tipsy upgrades. - Customize Tipsy

Dustin: spelling

2011-10-13T17:03:26Z

spelling

Bes: Created /* Customize Tipsy */ section, "Extra Customizations Policies" and "Edit and/or Create More Layouts" sub-sections, and linked directly to Tipsy forums in "Additional Resources" section.

2011-10-13T16:57:19Z

Created - Customize Tipsy: section, "Extra Customizations Policies" and "Edit and/or Create More Layouts" sub-sections, and linked directly to Tipsy forums in "Additional Resources" section.

Bes: Forgot to link to the sample shortcode txt file http://bes.internal.ithemes.com/tipsy-media-shortcode.txt

2011-10-13T02:43:09Z

Forgot to link to the sample shortcode txt file http://bes.internal.ithemes.com/tipsy-media-shortcode.txt

← Older revision		Revision as of 23:48, November 21, 2011
Line 58:		Line 58:

	If you want to show special characters in your Tipsy, like " @ & % $ and others, simply replace them with their [http://www.utexas.edu/learn/html/spchar.html HTML counterpart ]		If you want to show special characters in your Tipsy, like " @ & % $ and others, simply replace them with their [http://www.utexas.edu/learn/html/spchar.html HTML counterpart ]
		+
		+	===New Lines - Line Breaks===
		+
		+	If you want to have a line break in Tipsy, simply put the line break (ENTER key) inside the Tipsy content instead of using any html code.
		+
		+	Example of a line break:
		+
		+	<pre brush="html">[tipsy content="Actual content Actual content
		+
		+	NEW NEW LINE WITHOUT HTML" group="0" ]Testing 1[/tipsy]</pre>
		+
		+
		+	===HTML Code===
		+
		+	Simply putting in html code inside the Tipsy shortcode should work.
		+
		+	Example of html inside Tipsy:
		+
		+	<pre brush="html">[tipsy content="Actual content Actual content <ul><li>abc</li></ul>" group="0" ]Testing 1[/tipsy]</pre>

	==Template Tag==		==Template Tag==

← Older revision		Revision as of 20:12, November 16, 2011
Line 38:		Line 38:

	<code>[tipsy content='<img src="http://pluginbuddy.com/files/2011/10/Tipsy-copy-150x150.png">' group="0" ]content that the tip applies to[/tipsy]</code>		<code>[tipsy content='<img src="http://pluginbuddy.com/files/2011/10/Tipsy-copy-150x150.png">' group="0" ]content that the tip applies to[/tipsy]</code>
		+
		+	===Display iframe inside Tipsy Shortcode===
		+
		+	Use the following format to show any kind of an iframe inside the Tipsy tooltip in the HTML Mode editor. Change the link and width/height dimensions to your needs:
		+
		+	<code>[tipsy content='<iframe src="http://www.ithemes.com" frameborder="0" width="200" height="110"></iframe>' group="2" ]testing iframes[/tipsy]</code>
		+
		+	*Related link
		+	**http://ithemes.com/forum/index.php?/topic/20204-using-tipsy-to-display-iframe-content/
		+

	===SAMPLE Shortcode Text File===		===SAMPLE Shortcode Text File===

@@ Line 162: / Line 162: @@
 **[http://www.w3.org/TR/css3-color/ Info on CSS3 colors and their RGB codes]
 **[http://www.google.com/#hl=en&sugexp=gsihc&cp=8&gs_id=r&xhr=t&q=color+rgb Google search for RGB values of colors]
 ==Additional Resources==

@@ Line 143: / Line 143: @@
 **2 : If you edit any existing default Tipsy layout instead of creating a new Tipsy layout, all your changes will be lost when you upgrade to a newer version. Upgrading results in all the default files, including the default templates, to be overwritten also. You will have to redo the changes again if you choose this route. Better option would be to create a new layout as explained above.
-=====Change color of the arrow in Default layout=====
+===Change color of the arrow in Default layout===
 To change the color of the arrow in the Default layout, you want to style the <code>#tiptip_holder.tip_right #tiptip_arrow_inner</code> property.

@@ Line 142: / Line 142: @@
 **1 : Each image shown in Tipsy Group Settings page corresponds to the folder order list in the wp-content/plugins/tipsy/layouts folder. So if you click on the 4th image on your Tipsy Group Settings page, you are basically choosing the 4th folder, listed alphabetically, in the wp-content/plugins/tipsy/layouts folder.
 **2 : If you edit any existing default Tipsy layout instead of creating a new Tipsy layout, all your changes will be lost when you upgrade to a newer version. Upgrading results in all the default files, including the default templates, to be overwritten also. You will have to redo the changes again if you choose this route. Better option would be to create a new layout as explained above.
 ==Additional Resources==

← Older revision		Revision as of 17:47, October 17, 2011
Line 44:		Line 44:

	http://bes.internal.ithemes.com/tipsy-media-shortcode.txt		http://bes.internal.ithemes.com/tipsy-media-shortcode.txt
		+
		+	===Special Characters===
		+
		+	If you want to show special characters in your Tipsy, like " @ & % $ and others, simply replace them with their [http://www.utexas.edu/learn/html/spchar.html HTML counterpart ]

	==Template Tag==		==Template Tag==

@@ Line 110: / Line 110: @@
 Make a [http://pluginbuddy.com/purchase/backupbuddy/ BackupBuddy backup of everything before you proceed], or at least download the existing styles to your computer as a backup. You can also always download the latest Tipsy from your [http://ithemes.com/member/member.php Member's Area], unzip it on your computer and upload only the wp-content/plugins/tipsy/layouts in case you want to restore the default layouts (in case you accidentally mess up something that you want to undo).
 =====Edit Existing Layout=====
@@ Line 117: / Line 119: @@
 **Edit the style.css file in that folder to your liking.
 **Save. Your Tipsy will now be shown according to your styling changes in the style.css file.
 =====Create New Layout=====
@@ Line 131: / Line 135: @@
 After you edit any existing layout OR create a new Tipsy layout, simply go into any Tipsy Group Settings and choose the appropriate Layout image for the styling you just worked on in the new folder.
-*Remember: each image shown in Tipsy Group Settings page corresponds to the folder order list in the wp-content/plugins/tipsy/layouts folder. So if you click on the 4th image on your Tipsy Group Settings page, you are basically choosing the 4th folder, listed alphabetically, in the wp-content/plugins/tipsy/layouts folder.
+*Remember:
+**1 : Each image shown in Tipsy Group Settings page corresponds to the folder order list in the wp-content/plugins/tipsy/layouts folder. So if you click on the 4th image on your Tipsy Group Settings page, you are basically choosing the 4th folder, listed alphabetically, in the wp-content/plugins/tipsy/layouts folder.
+**2 : If you edit any existing default Tipsy layout instead of creating a new Tipsy layout, all your changes will be lost when you upgrade to a newer version. Upgrading results in all the default files, including the default templates, to be overwritten also. You will have to redo the changes again if you choose this route. Better option would be to create a new layout as explained above.
 ==Additional Resources==

@@ Line 104: / Line 104: @@
 ===Extra Customizations Policies===
-[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check our the official policy and details on any Extra Customizations]
+[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check out the official policy and details on any Extra Customizations]
 ===Edit and/or Create More Layouts===

@@ Line 100: / Line 100: @@
 '''Tip Content''' - Default content that goes inside the tooltip itself.
@@ Line 106: / Line 139: @@
 # [http://pluginbuddy.com/tutorials/ PluginBuddy Tutorials]
 # [http://pluginbuddy.com/ PluginBuddy.com]
-# [http://pluginbuddy.com/support/ Support Forums]
+# [http://ithemes.com/forum/tipsy/ Tipsy Support Forums]
 [[Category:PluginBuddy]]

← Older revision		Revision as of 02:43, October 13, 2011
Line 42:		Line 42:

	If you are having trouble copy pasting the above code OR not getting it to work, here is a sample TEXT file that you can copy paste from. Simply copy paste the contents into your Page or Post editor, in HTML Mode, test that it works, and then change the links accordingly.		If you are having trouble copy pasting the above code OR not getting it to work, here is a sample TEXT file that you can copy paste from. Simply copy paste the contents into your Page or Post editor, in HTML Mode, test that it works, and then change the links accordingly.
		+
		+	http://bes.internal.ithemes.com/tipsy-media-shortcode.txt

	==Template Tag==		==Template Tag==