Editing Stylesheets

File Manager

Editing Media | Editing Stylesheets | Editing Templates

Overview

This article outlines how to edit stylesheet (LESS/CSS) files within the CSiDonate File Manager.

When editing a stylesheet, you can update the following properties:

File Name: Choose a new name for the file. You cannot edit the file extension – it is automatically generated.
Cache Lifetime: See the section on Caching in File Manager.

Additionally, you will see a LESS code editor that takes up the majority of the screen.

The Main Stylesheet

CSiDonate requires that you specify a single stylesheet as the "Primary" stylesheet. This will be the default stylesheet for all donation forms.

You can update the primary stylesheet by navigating to System Settings > Styling > Primary Stylesheet.

Stylesheet Formats

There are two "formats" of stylesheets in CSiDonate, full and partial stylesheets.

Full stylesheets contain ALL of the necessary code to produce a fully-working donation form.

Partial stylesheets are just that – partial styles that may only adjust one or two things on the page (such as a logo or button color), and are meant to be used in addition to a full stylesheet.

See the next section, "Editing LESS Code," to find out how to create and identify the difference between a Full and Partial stylesheet.

Consider the options that are available on the template editor:

And the following matrix:

Primary Stylesheet Loaded

Alternate Stylesheet Loaded

Alternate Stylesheet
Only Load Alternate Stylesheet

YES

Stylesheet should be: Full

NO

Alternate Stylesheet
Only Load Alternate Stylesheet

YES

Stylesheet should be: Full

YES

Stylesheet should be: Partial

Alternate Stylesheet
Only Load Alternate Stylesheet

NO

YES

Stylesheet should be: Full

As you can see, depending on where the stylesheet is used, and whether or not it is loaded on top of the primary stylesheet, or by itself, will determine if it should be a full or partial stylesheet.

Editing

For information about the LESS preprocessor language itself, please visit: http://lesscss.org

You can include any arbitrary LESS or CSS inside the editor, and CSiDonate will compile and use it.

However, we offer some includes that will provide some required base styling for the product. You should use these only if you are writing a full stylesheet, and not a partial stylesheet.

You can use these includes by reading the default template that appears when creating a new stylesheet:

CSS

/* To create a 'full' CSiDonate style, include the base CSiDonate layout information by uncommenting these @import lines.
   Otherwise, if you are just creating an 'override' or add-on style, just add your code below. */

/* @import '/CSiDonate/css/layout.less'; */
/* @import '/CSiDonate/css/base-mixins.less'; */

/* Write your custom LESS code here.
   Learn more about LESS CSS here: http://lesscss.org/features/ */

On lines 4 and 5:

To create a Full stylesheet, uncomment these lines (remove the // from each line, or the /* ... */ surrounding each line).
To create a Partial stylesheet, leave these lines commented out or remove them.

Transpiling / Compiling Your LESS Code

The LESS code you type into the editor is transpiled automatically as you type.

You can see the status of the compilation briefly if you make a change to the source file:

If you make a mistake, a red error icon will appear:

You can switch to the Compiled CSS tab to view the error:

The error will tell you the exact line number where the issue occurred.

You cannot save the file until all compilation errors are resolved.

Inserting Images Into Your LESS Code

To insert, for example, a background image that you have uploaded to the Media tab of the File Manager, follow these steps:

If you have not already uploaded your image to the Media tab, upload it
View the details of the image file you want to use
Select the Copy Path to Clipboard button:
Paste the image into any CSS property that accepts a URL, such as background-image. For example:
The resulting code should look like this:

Absolute URL Warning

Do not include absolute paths (links containing your domain, e.g. give.example.org or testgive.example.org) in your CSS code, otherwise images that you use in live may not work in test, etc. You could inadvertently end up with a test URL pointed to live, or vice versa, for example if a test refresh is performed.

Your asset URLs should always begin with a forward slash (/) and never https://.