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