Complete Text Styles is a Joomla plugin that provides a full collection of styles and effects for titles and text.
Now, you can make your text much more attractive by applying to it different appearance than what the template can provide. Complete Text Styles brings together all the new styles and motion that appeared with the growth of CSS. Also, you can use Google fonts making the result even greater.
Complete Text Styles uses only CSS and Javascript (jQuery) to apply the styles and effects. No additional or transparent images are needed. Of course, the styled text can be also link.
No coding skills are required. Only the plugin and a simple content editor or the Joomla default editor. You are not going to use any tool from the toolbox of the editor. You can apply the style using only text (shortcode). So, wherever you have access to the editor (all articles and all custom html modules) you can apply easily the styles. Developers who have knowledge of CSS can apply the styles to the text of the tempate (like article and module titles) or to other Joomla extensions (like VirtueMart, Phoca Gallery etc.).
Features
Complete Text Styles plugin has many new features.
Use of jQuery for better compatibility with the new versions of Joomla.
Ready made styles (themes) for faster and easier use.
Improved administration with explanatory images.
Usability escalation. User has two options:
Use the ready made styles (novice level).
Modify the ready made styles according to his needs (intermediate level).
Demo of Complete Text Styles
Buy Complete Text Styles
Documentation of Complete Text Styles
Technical Information of Complete Text Styles
Change Log of Complete Text Styles
The buttons below will redirect you to another website displaying demos of the extension.
In order to download the extension you have to subscribe to the above subscription. The subscription process requires from you:
To create an account or to login using an existing one if you already have.
To be redirected to PayPal for the payment.
After you return to this website from PayPal, you will be already logged in and you will receive an email with information about your subscription.
Being logged in with your account you will be able to download the extension a) through the page of the extension or in the 'Downloads' area or from your account by selecting 'My Downloads'.
As long as the subscription is active, you will be able to log in and download any possible updates of the extension from this website.
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.
Enable the plugin.
Open and enable "Style 1" (second parameter of the style).
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.).
Go above to the "Shortcode (Simple User)" parameter and copy the line "{cts-style-1}your text{/cts-style-1}".
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.
This plugin has been tested with the latest versions of Joomla 2.5.x and Joomla 3.x, VirtueMart, K2, Phoca Gallery using the default Joomla template and the Gantry framework.
