Documentation of Complete Text Styles

Joomla Installation

Download Complete Text Styles.
In the Joomla control panel select: "Extensions" > "Extension Manager".
In the Upload Package File section click Browse and locate the plugin.
Then click Upload File & Install to upload the file and complete the installation.

How To Use

Below you can read the steps for applying a style (theme) to a title of an article.

Go to the "Plug-in Manager" and click "System - Complete Text Styles" to open it.
Make the following changes to the plugin.
1. Enable the plugin.
2. Open and enable "Style 1" (second parameter of the style).
3. Go below to the "Theme" parameter and select the theme you like. Below the list you can see some static samples. (You can't see the effects on these images. They are there just as a fast reminder of what you saw in the demo page.).
4. Go above to the "Shortcode (Simple User)" parameter and copy the line "{cts-style-1}your text{/cts-style-1}".
5. Save the changes and quit the plug-in administration.
Go to an article and paste the copied line. Replace the phrase "your text" with your title. Be careful not to include between the brackets and the title any half closed or half opened typography (bold, italics or other format). Save the article.
Go to the front-end website and refresh the page with the specific article. (Make sure the cache is not enabled. If yes, then clear it.)

Important notes:

If you change theme then any customization you have done will be lost and the next time you select the same theme you have to customize it again.

Video Tutorials

Maximize the videos and select high quality to watch them better.

Part 1: Styling the text in an article

Configuration

In order to configure Complete Text Styles go to the Joomla control panel and select: Extensions > Plugin Manager. Locate "System - Complete Text Styles" in the list and click it. You can see the parameters of the plugin as below:

You can click to the titles having the plus icon at the right edge in order to see more options.

Parameters

Complete Text Styles has the following parameters for each style:

Comment: Write a comment for the style (for example where you apply it).
Enabled: Set if the specific style is enabled or not.
Shortcode (Simple User): Use this shortcode to mark the text you want to be styled like "Style 1".
Class (Intermediate User): Add this class to the container element of the text you want to be styled like "Style 1".
CSS Selectors (Advanced User): The css selectors (type selectors, attribute selectors, ID selectors or pseudo-classes) to apply this style seperated by commas (,). Example: div.intro h1, p.title
Theme: Select the theme you want to apply to your text.
3D Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
Arc Text Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Shadow: Apply shadow to the text.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Radius: The curve of the arc text.
- Direction: The direction of the curve.
- Rotate Letters: Rotate letters in order to be vertical.
Drop Cap Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Shadow: Apply shadow to the capital letter.
- Flow Fix: Enable it when the paragraph is shorter than the drop cap.
Fire Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Animated: Add motion to the fire style.
Inset Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Bottom: The space around the text line.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
Jumble Theme Configuration
- Font Color 1: Create color variations using this color.
- Font Color 2: Create more color variations using this color. Leave it empty to use only variations of the font color 1.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Shadow: Apply shadow to the text.
- Letter Distance: The distance between the letters.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Saturation: Include saturation in the font colors.
- Animation: When enabled fonts change color.
LetterFx Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Shadow: Apply shadow to the text.
- Letter/Word Distance: The distance between the letters or the words.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Effect: The type of the effect.
- Repeat Delay: The delay before the effect is repeated.
- Word: Apply the effect to words instead of letters.
- Speed: The speed of the effect.
Lifted Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Shadow: Apply shadow to the text.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
Multi Layered Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- 2nd Layer Color: The text color in the second layer.
- 3nd Layer Color: The text color in the third layer.
- 4nd Layer Color: The text color in the fourth layer.
- Layer Distance: The distance between the text layers.
- Animated: Add motion to the text layers.
Retro Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Shadow: Apply shadow to the text.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Background Color: Fill in the color of the text background.
- Depth: The depth of the text shadow.
Rotating Text A Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Align: The align of the text line. It overrides the align of the editor.
- Text Shadow: Apply shadow to the text.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Effect: The type of the effect.
Rotating Text B Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Align: The align of the text line. It overrides the align of the editor.
- Text Shadow: Apply shadow to the text.
- Text Wrap: Enable or disable text wrap.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Effect: The type of the effect.
- Delay: The delay before the effect is repeated.
Stroke Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Stroke Color: The color of the text stroke.
Textillate Theme Configuration
- Font Color: The color of the fonts.
- Font Size: The size of the fons.
- Font Weight: The weight of the fonts.
- Line Height: The height of the text line.
- Padding: Top, Right, Bottom, Left: The space around the text line.
- Text Shadow: Apply shadow to the text.
- Google Fonts: The name of the Google font family to use instead the template's font family. Leave it empty to use the default fonts of the template.
- Start Effect: The starting effect type.
- Start Order: The order of the start effect.
- End Effect: The ending effect type.
- End Order: The order of the end effect.
- Display Time: The time to display the text still after the effect is finished.

Automatic Update

In order to be able to easily update the extension through the update system of Joomla, you need:

Your membership ID. This can be found in the email you received with the subscription information of this extension or in your profile in this website.
An active subscription of this extension. You can see your subscriptions in your profile as well.

Having the above fullfilled, do the following:

Select "Extensions > Plugins".
Locate in the list the line with name "Installer - Complete Text Styles" where the column 'Type' is equal to 'Installer' and click to it.
Fill in your membership id in the parameters, enable the plugin and save.

Now you will be able to update the extension through the Joomla update system. But if you want, you can do it manually by downloading the latest version from this website.

Uninstall from Joomla

Select "Extensions > Manage > Manage".
Locate in the list the line with name "Complete Text Styles" where the column 'Type' is equal to 'Package'.
Check the line and click "Uninstall". This will uninstall completely the extension.