Class Cheat Sheet

Particle Classes

grid-center
flush-block
flush-ads

hidden-phone
show-mobile

Hotfixes/Adjustments

Remove the Padding and Margins on The homepage to make layouts easier

.site-1-home #g-page-surround .g-content-array .g-content {
     padding: 0;
}
.site-1-home #g-page-surround .g-content {
     padding: 0;
}
.site-1-home #g-page-surround .g-array-item-text {
     margin: 0;
}

remove the p margin and add hover opacity in footers

.site-1 #g-footer p {
     margin: 0;
}

.site-1 #g-footer a:hover:not(:has(img)) {
     opacity: 0.75;
}

Ads on the Website

Make them layout better

.admod td {
     padding: 0 !important;
}

.admod table, .admod tr {
     gap: 0.5rem;
}

Make the home ads two columns on mobile

@media (max-width: 50.99rem) {
 .side-ads tbody {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
 }
}

Quicklinks

ql-inner-box

Make the aspect ratio easier to adjust

.ql-inner-box .g-content .g-blockcontent-subcontent-block-content {
     height: 100%;
     width: 100%;
}

.ql-inner-box .g-block.g-blockcontent-subcontent-block {
     aspect-ratio: 1/1;
}

Custom Scrollbar

Make the scrollbar look nicer:

/***********Custom Scrollbar****************/

/* Hide the default scrollbar */

::-webkit-scrollbar {
     width: .75rem;
}

::-webkit-scrollbar-track {
     background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {

background-color: #ccc;
     border-radius: 5px;
}

/* Style the scrollbar on hover */

::-webkit-scrollbar-thumb:hover {
     background-color: #bbbbbb;
}

/* Style the scrollbar when it's being dragged */

::-webkit-scrollbar-thumb:active {
     background-color: #8c8c8c;
}

@-moz-document url-prefix() {
     * {
     scrollbar-width: thin;
          scrollbar-color: #ccc #f5f5f5;
     }
}

Make the standard buttons more modern

Make sure to also add these to the editor css

a.button:not(.g-blockcontent-buttons a) {
     text-align: center;
     display: inline-block;
     background-color: var(--primary-color);
     padding: 1rem 2rem;
     border-radius: var(--site-border-radius);
     font-size: 1.1rem;
     transition: all 200ms ease-in;
     border: 3px solid var(--primary-color);
}

a.button:hover {
     transition: all 200ms ease-out;
     background-color: transparent;
     color: var(--primary-color);
}

a.secondary-button {
     text-align: center;
     display: inline-block;
     background-color: transparent;
     border: 3px solid var(--primary-color);
     color: var(--primary-color);
     padding: 1rem 2rem;
     border-radius: var(--site-border-radius);
     font-size: 1.1rem;
     transition: all 200ms ease-in;
}

a.secondary-button:hover {
     transition: all 200ms ease-out;
     background-color: var(--primary-color);
     color: var(--default-black);
}

Fix the Offcanvas Menu

Fix spacing issues, align arrows, and set a max width so stuff doesn't overlap. A good place to start if things are looking broken

@media (max-width: 50.99rem) {
 #g-offcanvas #g-mobilemenu-container {
 margin-left: 0 !important;
 }
 
 #g-mobilemenu-container {
 margin: 0 !important;
 }
 
 #g-offcanvas {
 padding-left: 0.5rem;
 }
 
 #g-offcanvas .g-menu-item-container > .g-menu-item-content {
 max-width: 80% !important;
 }
 
 #g-mobilemenu-container .g-toplevel li.g-parent .g-menu-parent-indicator {
 right: 0.75rem;
 }
 
 #g-offcanvas #g-mobilemenu-container ul>li.g-menu-item-link-parent>.g-menu-item-container>.g-menu-parent-indicator {
 padding: 0 !important;
 margin: 0 !important;
 }
 
 #g-offcanvas .g-social-items {
 padding-right: 0.5rem;
 margin-top: 1rem;
 }

 #g-offcanvas .g-content {
 margin: 0;
 padding: 0;
 }
}

Offcanvas Toggle Background

.g-offcanvas-toggle {
     background: var(--default-white);
     display: grid;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     color: var(--primary-color);
     box-shadow: 0px 0px 5px rgba(0,0,0,.5);
 }

.g-offcanvas-toggle .fa-fw {
     text-shadow: initial !important;
 }

Modern Alert Padding

@media (min-width: 50.99rem) {
 :is(.site-1-home, .site-2-home) #g-top .modern-alert .g-joomla-articles {
     padding: 0 3% !important;
 }
}