GabrielSoft - How to access your site's CSS

Customize your eCatholic website beyond its current theme by modifying your site's CSS. Here's how you can access it.
Note: All our free and custom-designed themes are styled with CSS (Cascading Style Sheets) which you can modify if you feel comfortable doing so.

1

Log in and go to the Design Studio

Log in to your website and click the  Design button in the white Admin Toolbar.

NOTE: Only Admins have access to the Design Studio.

2

Click on Explore Themes to create a Custom Theme Design

Once the Design Studio opens:

1. Click the Explore Themes button in the bottom left corner of the Design Toolbar to open your current theme or to switch to a new one.
   Note: If you are already using a custom theme, move ahead to Step 3.
   

2. Create a custom theme based on your current theme and confirm by clicking the green  Create Theme button. Your CSS editor will then open.
   

3

Access your Custom Theme Design 

You can access your custom theme design within the  Design Studio Theme center by clicking on the pencil icon (pictured below) to open the CSS editor.

4

Edit your site's CSS

You can now modify your site's CSS within the Draft section you wish. Just remember to Save your changes!

You can only edit the Draft tab so that any and all changes you make will always be found there. Any matching commands from any other tabs will be overwritten by anything you add to the Draft tab.

The Base, Theme, and Style tabs are mainly there for reference.

NOTE: Commonly Updated Variables. Below are samples of the most commonly updated variables. All available variables can be found in the "Base" tab above under the "Site Variables" section.

Colors
@primaryColor: #444444;
@secondaryColor: #888888;
@neutralColor: #333333;
@linksColor: @secondaryColor;
@linksHoverColor: #111111;
@siteBackgroundColor: #000000;
@siteFontColor: #2e2e2e;
@siteNameFontColor1: @primaryColor;
@siteNameFontColor2: @secondaryColor;
@moduleTitleFontColor: @primaryColor;
@pageTitleFontColor: @primaryColor;

Images

@siteBackground: url(filepath/file.png) repeat-x center top;
@headerBackground: url(filepath/file.png) no-repeat center top;

Fonts

@siteFont: Helvetica, Arial, sans-serif;
@siteFontSize: 14px;
@siteNameFontSize: 36px;
@moduleTitleFontSize: (@siteFontSize * 2);
@pageTitleFontSize: (@siteFontSize * 2.5)