Editing the website's Less (CSS) styles

On top of the normal CSS, eCatholic utilizes something called "Less." What Less allows you to do is put one variable in multiple places and control all those places on a single line using a Less variable. Using Less enables you to change values in multiple places by merely editing one line of code.

For example, these 3 classes use the same Less variable, enabling you to change the color of all three with just one change to the bolded Less code.:

@specialColor: #660000;

.pageTitleFontColor {
      color: @specialColor;
  }
.moduleTitleFontColor {
      color: @specialColor;
  }
.sectionTitleFontColor {
     color: @specialColor;
  }

Where possible, we recommend using the built-in Less variables to make changes. They will be clumped together by type and will typically look like this (using the variable for the page title as an example):
@pageTitleFontColor:
@pageTitleFont:
@pageTitleFontSize:
@pageTitleFontWeight:
etc., etc, ...

Most of Less variables will mostly be towards the top of the Base and Theme tabs. You can search for the appropriate Less variable by going to the Base or Theme tab, clicking in the text area, and pressing Ctrl + F.

@logo and @logoOnly - variables for your logo
@siteName  - variables for your site's name in the header
@search - variables for the search box
@social - variables for the social media icons
@headerText - variables for the text in your header, if it is available on your theme
@quickLinks - variables for the 2 or 3 high-traffic links in the header, separate from the main navigation
@mainNav - controls all the formatting for the main navigation bar in your header

@slideshow - variables for the slideshow
@moduleTitle - variables for module titles
@siteFont - controls for how your site's font normally looks
@siteLink -variables for how normal links look throughout your site
@subModuleTitle - controls how titles of News and Events are formatted

There are many, many more variables that control the way your site looks, but here are a few that control the colors throughout your site that people often change:

    @primaryColor - controls the dominant color of your theme
    @secondaryColor - sets the secondary/accent color of your theme
    @neutralColor: - usually a gray for areas that call for a neutral color
    @wysiwygColor1 - a color option in the Text/HTML module that is typically set to the @primaryColor
    @wysiwygColor2 - option #2 in the Text/HTML module, typically set to the @secondaryColor
    @wysiwygColor3 - option #3 in the Text/HTML module, usually set to the @neutralColor
    @wysiwygColor4 - option #4 in the Text/HTML module, which is always set to a red: #BE1E2D

This is the tip of the iceberg, so to speak. If you have any further questions about editing the CSS/Less, please feel free to contact [email protected].