Variables
All Default Site Variables
--primary-color: #803232;
--secondary-color: #C8BEA6;
--primary-rgb: 128,50,50;
--secondary-rgb: 200,190,166;
--default-white: #ffffff;
--default-black: #000000;
--transparent: rgba(255,255,255,0);
--default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);
--swiper-box-shadow: var(--default-box-shadow);
--default-transition: all .2s ease-in-out;
--mt-fixed-height-desktop: 36vw;
--mt-background-image: url("/images/template/masstimes.jpg");
--mt-background-color: rgba(var(--primary-rgb),.8);
--mt-header-color: var(--default-white);
--mt-para-color: var(--secondary-color);
--mt-header-desktop: 2.5vw;
--mt-header-mobile: 2rem;
--mt-para-desktop: 1.1vw;
--mt-para-mobile: .9rem;
--ql-num-boxes: 4; /*USE FIRST ROW TO COUNT IF MORE THAN ONE ROW*/
--ql-flex: calc(100% / var(--ql-num-boxes));
--ql-bg-opacity: .6;
--ql-bg-hover-opacity: .8;
--ql-background-color: rgba(var(--primary-rgb),var(--ql-bg-opacity));
--ql-background-hover: rgba(var(--primary-rgb),var(--ql-bg-hover-opacity));
--ql-background-size-desktop: calc(var(--ql-icon-size-desktop) + 2vw);
--ql-background-size-mobile: calc(var(--ql-icon-size-mobile) + 3rem);
--ql-font-family: var(--title-font-family);
--ql-title-color: var(--primary-color);
--ql-title-hover: var(--secondary-color);
--ql-mobile-bg-color: rgba(var(--primary-rgb),.5);
--ql-mobile-bg-hover: rgba(var(--primary-rgb),.7);
--ql-mobile-title-color: var(--default-white);
--ql-box-shadow: var(--default-box-shadow);
--ql-font-size-desktop: 1.7vw;
--ql-font-size-mobile: 1.2rem;
--ql-bottom-border-size: 2px;
--ql-bottom-border-style: solid;
--ql-bottom-border-color: var(--default-white);
--ql-right-border-size: 1px;
--ql-right-border-style: solid;
--ql-right-border-color: var(--secondary-color);
--ql-top-border-size: 5px;
--ql-top-border-style: solid;
--ql-top-border-color: var(--secondary-color);
--ql-left-border-size: 1px;
--ql-left-border-style: solid;
--ql-left-border-color: var(--secondary-color);
--ql-border-radius: 0;
--ql-icon-size-desktop: 4vw;
--ql-icon-size-mobile: 4rem;
--ph-title-color: var(--primary-color);
--ph-title-hover: var(--secondary-color);
--ph-title-font: var(--title-font-family);
--ph-text-font: var(--body-font-family);
--ph-content-effect-bg-1: var(--default-white);
--ph-content-effect-bg-2: rgba(var(--primary-rgb),.1);
--ph-box-shadow: var(--default-box-shadow);
--ph-read-more-color: var(--primary-color);
--ph-read-more-background: var(--transparent);
--ph-border-bottom: 4px solid var(--secondary-color);
--ph-background-hover: rgba(var(--primary-rgb),.2);
--ph-pagination-background: var(--primary-color);
--ph-pagination-background-hover: var(--secondary-color);
--ph-title-font-size-desktop: 1.7vw;
--ph-text-font-size-desktop: 1.2rem;
--ph-title-font-size-mobile: 6vw;
--ph-text-font-size-mobile: 1.1rem;
--rok-mini-badge: var(--secondary-color);
--rok-mini-numbers: var(--default-white);
--rok-mini-text: var(--primary-color);
--rok-mini-timeline: var(--primary-color);
DO NOT EDIT VARIABLES IN THE PARTICLE.CSS FILE. THIS CAN EFFECT EACH SITE THESE VARIABLES ARE APPLIED TO. IF YOU NEED TO MAKE A CHANGE PLEASE UPDATE EACH SPECIFIC SITE INDIVIDUALLY.
Each site calls upon these variables by default. The way that you override for each individual site is by placing a variable override set to the body class of the template you are using.
EXAMPLE:
.parish-1 {
--primary-color: #238ae6;
--secondary-color: #7A7A7A;
--primary-rgb: 35,138,230;
--secondary-rgb: 122,122,122;
--title-font-family: 'Montserrat';
--body-font-family: 'Cinzel';
--default-white: #ffffff;
--default-black: #000000;
--transparent: rgba(255,255,255,0);
--default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);
--swiper-box-shadow: var(--default-box-shadow);
--default-transition: all .2s ease-in-out;
}
In this example the outline has been given the class "parish-1" to the body tag. Each of these variables will override the ones set in the particle.css file. Each particle is designed to pull almost all information from these twelve variables. The variables for each particle pull one of these twelve to create a new variable in order to make overriding each individual variable simple and not require any rewriting of the CSS.
EXAMPLE:
--rok-mini-badge: var(--default-white);
--rok-mini-numbers: var(--secondary-color);
--rok-mini-text: var(--secondary-color);
--rok-mini-timeline: var(--primary-color);
These variables are taken from the override.css file for Carmelite-Teresa. You will notice that 3 of the 4 variables do not match the default variables set in particle.css. This allows you to change the information for the badge, numbers, text, and timeline of the RokMiniEvents3 without having to write any CSS only entering the information you require. Each variable override does not require that you fill in a variable as the information. You can simply place in the hex code or rgba code and it will override the defaults.
You may come accross a site build where you have multiple Quicklink or Parish Headline Particles etc... If so you can simply specify the class of the particle in the site's override.css file.
EXAMPLE:
.ql-fa-toplinks {
--ql-background-color: rgba(var(--secondary-rgb),var(--ql-bg-opacity));
--ql-background-hover: rgba(var(--primary-rgb),var(--ql-bg-hover-opacity));
--ql-title-color: var(--secondary-color);
--ql-title-hover: var(--primary-color);
--ql-font-size-desktop: .9vw;
--ql-font-size-mobile: 1rem;
--ql-font-title-color: var(--secondary-color);
--ql-num-boxes: 3;
}
.ql-square-1 {
--ql-background-color: rgba(var(--secondary-rgb),var(--ql-bg-opacity));
--ql-background-hover: rgba(var(--secondary-rgb),var(--ql-bg-hover-opacity));
--ql-title-color: var(--default-white);
--ql-num-boxes: 4;
}
.ql-fa-bottom-links {
--ql-background-color: rgba(var(--secondary-rgb),var(--ql-bg-opacity));
--ql-background-hover: rgba(var(--secondary-rgb),var(--ql-bg-hover-opacity));
--ql-title-color: var(--default-white);
--ql-title-hover: var(--primary-color);
--ql-num-boxes: 3;
}
These lines of CSS variables can be found again within the override.css file for Carmelite-Teresa. Each of these classes are applied to Quicklinks calling on the same variables, but they each have different designs. By specifiying the class in the override.css file you can override each Quicklink variant separately. You also only need to bring in variables that need overridden for each particle.