Print

GiBi AddCSS quick start guide

GiBi AddCSS is an extension for Joomla that you can use to quickly modify the style of your site.

It is created as a module so you can assign a style to some pages only (more about that later).

There exists a free version and a pro version with advanced features and support.

This quick start guide will help you understand the basic concepts and procedures.

Module creation and assignment

This extension will install as any other Joomla module; the installation process will create an empty instance of the module.

You may create as many instances of AddCSS as you want: this allows you to quickly set different styles for each page.

To assign the module, you can use Joomla module assignment system or any third-party extension.

We use and suggest Advanced Module Manager, from NoNumber, which gives you a lot of matching criteria to assign your module to.

Module configuration

The configuration options should be quite self-explanatory: let's see them anyway in details.

Basic options

This section are related to the very basic features around which AddCSS was created.

  • CSS filename. This option includes an additional CSS file which must be placed in the "css" folder of your active template.
  • Style. This option is even quicker: just add some css style to be included in your page. 
  • [PRO only] JS filename. This option includes an addtional JS file which must be placed in the "js" folder of your active template.
  • [PRO only] Script. This option is even quicker: just add som js code, without adding the <script> and </script> tags.

Quick style

This section is about making easy and quick for you to do some of the most common style changes.

  • Background. This lets you choose an image which will be used as page background. The chosen image will be set at 100% width so be careful about what image you select (more about that later).
  • [Pro only] Body font. This option lets you set the font for the "body" element of your page. Please note that this may be overriden by other CSS files in your template.
  • [Pro only] Headings font. This option lets you set the font for the "h1"..."h6" elements of your page. Please note that this may be overriden by other CSS files in your template.

The "Body font" and "Headings font" are a quicker way to set fonts without writing the corresponding CSS rule(s). You can combine it with the Google Fonts option (see below).

Inception

The options in this area are only enabled for the PRO version, and let you bring into your document additional power :-)

  • [Pro only] Bootstrap. You should already know about Twitter Bootstrap framework. If not, browse on the internet as soon as you can. This option includes an hosted version of Bootstrap into you page (thanks to http://www.bootstrapcdn.com).
  • [Pro only] Google Font #1, #2 and #3. These options lets you include up to three Google Web Font by their name. Technically, there is no reason to stop at 3 fonts; but it's not reccomended to have more than 3 fonts in your document anyway.

An additional note about Google Fonts.

As the name implies, they are a bunch of freely available web fonts offered by Google. You can go to http://www.google.com/fonts to see them and pick the one(s) you like; with AddCSS, you just have to remember the font name, without any additional code.

But rememeber that including them in your document does not mean they will automatically be used. Once you've included them, you have to do one of these things:

  • use the font name(s) in the "Body font" and "Heading font" options;
  • write the corresponding CSS rules in the "Style" option or in the CSS file included by "CSS filename".

Tips, tricks and traps

There a few things you need to know to avoid frustration in using this extension.

CSS priority

If you use basic "style inclusion" option, you need to know what CSS priority is.

Depending on the way you write a rule, it may get ignored because there is another, more specific rule in some other place in your site. 

We usually get around it by writing very specific rule with lots of element IDs, and/or by using the !important directive.

What we really want you to understand is that a CSS rule may be ignored, but this does not mean that AddCSS is broken.

If you get the PRO version you may ask for support in the support ticket system and we will be happy to give suggestions.

But please do your homework before.

Additional css and fonts files

Adding more fonts and css files will probably make your site slower, because it has to download additional files.

AddCSS is a nice thing to have because it helps you add them only on the pages that really need them (we wrote a blog article about that).

But even with AddCSS, always use these options carefully. 

  • usually, you will use AddCSS only for some pages and/or for quick testing different styles
  • if you use additional styles / fonts everywhere and always in your site, it may be worth considering a modification of your template
  • do not add many additional fonts unless it's really necessary
  • remember that you can use different AddCSS modules for different pages, so don't load everything within a single module 

Support

Apart from this quick start guide, users with an active subscription can request support via our support system.

For any other information, like commercial requests, you may contact us from our contact page.