Complete Text Styles v.1.1.0

Full collection of styles and effects for text.

Make your titles more attractive.

Joomla! 3.x Plugin

Complete Text Styles Sample

LIVE DEMO    BUY

What is it?

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:
    1. Use the ready made styles (novice level).
    2. 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.

Demo 1 Demo 2

Read More

You don't have any active subscription.

  • Complete Text Styles

    Complete Text Styles

    Select this subscription in order to download Complete Text Styles.
    16€ 6 months of access to download. Unlimited installations. Support for a single website.
  • 1

Subscription Instructions

In order to download the extension you have to subscribe to the above subscription. The subscription process requires from you:

  1. To create an account or to login using an existing one if you already have.
  2. 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.

Read More

Joomla Installation

  1. Download Complete Text Styles.
  2. In the Joomla control panel select: "Extensions" > "Extension Manager".
  3. In the Upload Package File section click Browse and locate the plugin.
  4. 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.

  1. Go to the "Plug-in Manager" and click "System - Complete Text Styles" to open it.
  2. 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.
  3. 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.
  4. 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.

Joomla Plugin Parameters

Joomla Plugin Parameters

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:

  1. Select "Extensions > Plugins".
  2. Locate in the list the line with name "Installer - Complete Text Styles" where the column 'Type' is equal to 'Installer' and click to it.
  3. 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

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

Technical and compatibility information you should know about the plugin.

  • Extension version: 1.1.0
  • Extension type: Plugin
  • Extension technologies: PHP, CSS3, Javascript, jQuery 1.7+.
  • Compatible Joomla versions: 3.x.
  • Compatible browsers: Chrome, Firefox, Opera, Edge, IE10, IE9, Safari

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.

Read More
  • 1.1.0:
    • Auto update support.
  • 1.0.0:
    • First release of the Complete Text Styles plugin.
Read More