How to Install and Use Xtypo Button Overview

How to Install and Use Xtypo Button
Overview
Xtypo Button is an additional plugin for Xtypo, a popular free typography plugin for Joomla,
developed by TemplatePlazza.
With Xtypo you can apply extra CSS styling to particular text on your joomla articles or custom
modules, without having a deep knowledge of CSS.
To add the CSS styling you need to wrap the target text with xtypo tags, for example :
{xtypo_info}This is text {/xtypo_info}.
But starting from the version 3.0, TemplatePlazza introduces the use of additional Xtypo Button
plugin to help you to apply Xtypo stylings directly from the TinyMCE editor.
With the help of this button, you no longer need to type the xtypo tags ( such as {xtypo_info},
{xtypo_warn}, etc) to apply Xtypo styling, but instead, you just need to select/highlight the text on
your TinyMCE editor then click the xtypo button that is located at the bottom side of TinyMCE
editor to apply the styling.
Installing Plugin
Installing Xtypo Button is easy. From your joomla backend go to Extensions > Extension
Manager. Choose the installation file and then click the Upload & Install button
How to Install and Use Xtypo Button
Page 1
Enabling Plugin
After it's installed please go to Extensions -> Plugin Manager (no 1, see img) then type xtypo in
the filter field to display Xtypo plugins only (no 2) then check out both of Button and Content Xtypo
plugin (no 3) then click Enable button.
How to Install and Use Xtypo Button
Page 2
Adding TinyMCE integration
Due to TinyMCE restriction, you need to add some code to a TinyMCE plugin parameter to make
Xtypo works properly with TinyMCE
Please go to Extensions -> Plug-in Manager -> Editor - TinyMce.
Click Basic Options tab then flll the Extended Valid Elements field with : span[class] (comma
separated if there's already filled with something) , click Save then close the Plugin.
How to Install and Use Xtypo Button
Page 3
Adding JCE Integration
If you are a JCE user, then you need to make a similar integration just like the TinyMCE.'s
Please go to Components -> JCE Editor -> Profiles then click the active profile. You will see the
field Extended Elements available in the Editor Parameters -> Advanced tab. Fill it with
span[class]
How to Install and Use Xtypo Button
Page 4
Adding editor.css to your default template
At this point, you should already be able to apply Xtypo styling but the styles will not visible in
TinyMCE/JCE until you toggle the editor into the HTML mode.
To enable the styling preview, open backend of Xtypo Content (go to Extensions -> Plug-in
manager -> Content - XTypo), then find the TinyMCE Integration section in the Details tab.
Right click on the editor.css link then save it to [joomla_root]/templates/
your_default_template/css folder.
If there's already editor.css in there, then simply combine the xtypo related css classes that exists
in the xtypo editor.css with your editor.css.
Additional Step for JCE user
If you're an JCE user, please go to Components -> JCE Editor -> Global Configuration, in the
section Formatting & Display change the Editor Style dropdown to Custom CSS Files and fill the
Custom CSS Fiels field with templates/$template/css/editor.css
Done! Now Xtypo Button has been installed on your Joomla and ready to be used
NOTE : Make sure you have cleared the all browser caches for this change to take effect.
Sometimes it even won't work until you really clear ALL cookies and caches on your
browser
How to Install and Use Xtypo Button
Page 5
Using Xtypo
Applying xtypo styling to your content is easy. Simply select/highlight any text in TinyMCE then
click XTypo Button at the bottom side of TinyMCE ediitor. A box with styling sets will popped out,
choose one available style by clicking on it.
How to Install and Use Xtypo Button
Page 6
Changing Xtypo Theme
Xtypo Button comes with 7 extra Xtypo Themes. Go to Extensions -> Plug-in Manager ->
Content - XTypo then open Basic Options tab.
Simply choose one that will suit your joomla template then click Save button.
How to Install and Use Xtypo Button
Page 7