gpEasy's Additional.CSS File Tutorial

Location
The additional.css file is located in the /include/css/ folder within your gpEasy installation.

What It Does
The /include/css/additional.css file contains certain styling elements that gpEasy CMS uses throughout your site such as styling for galleries, contact form, sitemap, message, etc.

You will be familiar with this file already if you read the gpEasy Hacks or the custom galleries tutorial.

How does gpEasy call this file?
This file is loaded within the header automatically. The file /include/tool/gpOutput.php calls it with the following code:
echo '<link rel="stylesheet" type="text/css" href="'.common::GetDir('/include/css/additional.css?v='.$GLOBALS['gpversion']).'" />';

Can I disable it?
Yes, you can delete or comment out the line of code mentioned above so it won't be called or delete the contents in the additional.css file you want to add to your theme; however, if you do then make certain that you have added all the necessary styling code to your theme's style sheet.

Advantages of disabling this file:
It's one less call to the server which always helps speed up your site. Furthermore, it will allow you to style those elements contained in the additional.css file without any interference from it. You won't have to worry about future changes in the additional.css file causing problems with your styling.

Disadvantages of disabling this file:
Since it's a core gpEasy CMS file you will have to disable it before each and every upgrade.

Considerations When Styling

The reason this is the first "tutorial" in the styling tutorials is because you need to be aware that certain elements of gpEasy are styled by this file, and in order to style those elements differently you have two choices.

First, you can leave this file alone and add new styling for the elements you wish to style differently to your theme's style sheet. The thing you need to be aware of when doing this is that you should style all aspects styled for in that element within the additional.css file. In other words, if the .gp_gallery has as width:100px; you will want to make sure that you also have a width definition for that class in your styling. This will guard against some changes in the additional.css file in the future; however, you will always need to double check your styling with new revisions of gpEasy because the developers might change some of the styling in the additional.css file that could alter your site's look especially the galleries and contact form if you restyled them.

Your second option is to remove/disable this file or it's contents that you want to style for; however, as previously noted you will need to ensure that you do this prior to every upgrade.

My Preference

Personally I leave this file alone now. I used to hack it and remove the gallery styling but that became a pain to do every upgrade especially since I tend to test the latest alpha and beta versions, thus I upgrade a lot. So, now I just write my css code to completely over-write the styling in the additional.css file. I make sure that I compensate for each and every style for the component I want to change, thus I just copy over all the gallery styling and alter it within my theme's style.css file. This way I make sure that I have every style element covered that was used in the additional.css file. It won't ward off major changes that the developers decide to make but I doubt most of these setting will change much with new revisions, at least I hope they wont.

 

gpEasy B2sq Theme by CS @True Acupuncture