Documentation

Below you will find documentation on how to use our software. This contains easy-to-use steps by step guides with helpful screenshots on how to configure and get the best results.
 

Categories

Content Styling

CSS is a core technology, we use for building pages. While HTML provides the structure of your page, CSS works to provide the visual styling. Content editors are fantastic as they will do all the hard work for you but before we get on to that, lets have a quick look at how this all fits together.

Here is an example of a (paragraph) p container, with a class applied to it.

<p class="alert-info"> This is a sample tooltip style. Lorem ipsum.</p>

Notice that the class="alert-info" has been applied to the start of the p container <p . This works by looking for a class in something we call a stylesheet. This will then reference and use the styles as defined in that class and would look something like this:

.alert-info {
    background-image: url("pdf.png");
    background-color: #FAFAFA;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 28px auto;
    border-bottom: 1px dotted #C8C8C8;
    border-top: 1px dotted #C8C8C8;
    margin: 10px 0;
    padding: 7px 10px 7px 35px;
    font-size: 14px;
    text-shadow: 1px 1px 1px #FFFFFF;
    display: block;
    
}

This explains how your p container should look, by defining it's background-image, background-color and other styling stuff. When rendered out in your browser, it will look like this:

This is a sample tooltip style. Lorem ipsum.

Applying styles with wysiwyg editors

The quickest and easiest way of doing this is to get the editor to do all the hard work! The editor can do this by reading from your typography stylesheet which allows you to bring your content in line with your templates look and feel. The goal is to do exactly this and bring the styles used for text editing, into the editors editing area and available at your fingertips.

To do this, start by placing your mouse on a text element, then select a style from the editor's, ‘Styles’ dropdown box.

You may want to switch to 'Elements' mode as it helps you to see where your container starts and ends.

Here are a few examples:

This is a sample tooltip style. Lorem ipsum.

This is a sample tooltip style. Lorem ipsum.

This is a sample tooltip style. Lorem ipsum.

WebxSolution Ltd is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Copyright © 2009 - 2016 WebxSolution Ltd
Powered by JoomlaWired