Close
Phone (601) 264-6000
Home Chevron Right Example

HTML & CSS Examples

Overview

Your custom WordPress theme uses several open source frontend frameworks to simplify building a mobile responsive website. The primary frameworks are Bootstrap 4 and Font Awesome 5. So any CSS/HTML features within these frameworks should work on your website. We highly recommend familiarizing yourself with the bootstrap documentation.

On top of these frameworks are custom CSS classes that give a range of access to branding colors and other tools to maintain a consistent website. If you need help always remember that you can email support@fullmedia.com. Full Media support can always add additional custom CSS in the future.

H1 Title Tag

H2 Title Tag

H3 Title Tag

H4 Title Tag

H5 Title Tag
H6 Title Tag

Button Classes

Dark

Primary

Secondary

Grey Outline

White Outline

Color Classes

These color classes give you a quick way to change text color or background color of any elements.

c-primary

bg-primary

c-secondary

bg-secondary

c-white

bg-medium-grey

bg-light-grey

bg-lighter-grey

Specific Color Classes
c-dominant-teal

bg-dominant-teal

c-analogous-blue

bg-analogous-blue

c-analogous-light-blue

bg-analogous-light-blue

c-analogous-teal

bg-analogous-teal

c-secondary-yellow

bg-secondary-yellow

c-secondary-lime

bg-secondary-lime

c-secondary-green

bg-secondary-green

c-accent-pink

bg-accent-pink

c-accent-sky-blue

bg-accent-sky-blue

c-accent-purple

bg-accent-purple

c-accent-orange

bg-accent-orange

Boostrap Grid / Rows & Columns

You can use the boostrap grid for highly customized rows and columns to better position your content within larger sections.

Bootstrap 4 Grid

Two Column Row

Block

Block

Three Column Row

Block

Block

Block

Four Column Row

Block

Block

Block

Block

Boostrap Padding & Margins

Your site uses the standard padding (inner spacing) and marging (outer spacing) to better position elements and text.

Bootstrap Layout Utilities

Padding 5
Padding 4
Padding 3
Padding 2
Padding 1
Padding 0

Margin 5
Margin 4
Margin 3
Margin 2
Margin 1
Margin 0

Font Awesome 5 - Icon Set

Font Awesome 5 Docs

Connection Icons

Social Icons



Using Font Awesome in WordPress

One quick tip on Font Awesome. The Gutenberg and WYWISG editors in the site will disappear/strip your icons in visual mode that are "empty". FontAwesome website will give you this:


Always turn that into this:


The editors strip/remove empty tags. The "sr-only" class means "Screen Reader Only". So the text in the middle is visually hidden, but helps with readability for the visually impaired.
Clinic News Community Employee Recognition Health & Wellness In the Media

Lightbox Example

Back to Top