Text

Text

Text 2

Text 2

Text 3

Text 3

Text 4

Text 4

Typography

Heading 1

Example text for illustration.

Heading 2

Example text for illustration.

Heading 3

Example text for illustration.

Font: Calibri (Microsoft Office)
Fallback Font: Hind (Google Fonts)

Body Text

LeChuck? He's the guy that went to the Governor's for dinner and never wanted to leave. He fell for her in a big way, but she told him to drop dead. So he did. Then things really got ugly.

Here's a list:

  • Melee Island
  • Monkey Island
  • Scabb Island
  • Phatt Island
  • Booty Island
  • Dinky Island

Font: Cambria (Microsoft Office)
Fallback Font: Oranienbaum (Google Fonts)

CSS for WP Customizer:

/* Typography */

body.fl-heading {
font-family: "Calibri", "Hind", sans-serif;
}

body {
font-family: "Cambria", "Oranienbaum", serif;
}

Typography CSS:

/* Typography */

h1 {
font-variant: small-caps;
letter-spacing: 2px
}

p strong, ul strong, ol strong {
letter-spacing: 0.03em;
}

.last-p p:last-child { margin-bottom: 0; }

Color Palette

To Ange: Test note. [reminder for myself: good way to create palettes is to generate color at ColorMe, then palette at Paletton]

Base Colour

#2a3c6c

RGB: 42, 60, 108
Lightness: 29%

"Astronaut"
Menu backgrounds
Buttons

Darker A

#1b2746

RGB: 27, 39, 70
Lightness 19%

Brighter A

#384f8f

RGB: 56, 79, 143
Lightness 39%

Brighter B

#4663b4

RGB: 70, 99, 180
Lightness 49%

Brighter C

#6881c4

RGB: 34, 49, 88
Lightness 59%

Accent Colour

#D9B499

RGB: 217, 180, 153
Lightness: 72%

"Cameo"
Links: visited

Darker A

#bd7b4c

RGB: 189, 123, 76
Lightness 52%

Links: default

Darker B

#cb9772

RGB: 203, 151, 114
Lightness 62%

Brighter A

#dfc0a9

RGB: 223, 192, 169
Lightness 77%

Brighter B

#e6cebc

RGB: 230, 206, 188
Lightness 82%

Links: hover

Dark Gray

#151515

RGB: 21, 21, 21
Lightness: 8%

Heading Text

Medium Darker

#4d4d4d

RGB: 77, 77, 77
Lightness: 25%

Body Text

Medium Gray

#6a6a6a

RGB: 106, 106, 106
Lightness: 50%

Medium Brighter

#bfbfbf

RGB: 191, 191, 191
Lightness: 75%

Module: Separator

Bright Gray

#f5f5f5

RGB: 245, 245, 245
Lightness: 96%

Body Text (alt)

If not otherwise noted, we're using the Beaver Builder defaults.

Site Elements

Looks & Decoration

Decoration Character

  • Rightwards dashed arrow "⇢"
  • HTML code: ⇢
  • CSS code: 21E2

Lines & Frames:

  • Double lines, cf. elements described below
  • CSS can be complicated. :-/

Layout & Formatting

Rows:

  • Padding: 60px top & bottom

Images

  • In display box: size medium (300x300)

CSS for images:

.width180 img { max-width: 180px; }
.width200 img { max-width: 200px; }
.width300 img { max-width: 300px; }
.width400 img { max-width: 400px; }
.width500 img { max-width: 500px; }
.width600 img { max-width: 600px; }
.width700 img { max-width: 700px; }
.width800 img { max-width: 800px; }

/* Images in Display Box */

.displaybox-img img {
max-width: 150px;
border-radius: 50%;
border: 1px solid #000000;
}

.displaybox-img .fl-photo-content {
padding: 2px;
border-radius: 50%;
border: 2px solid #151515;
}

Body & Lists

Here's some body text with a link, followed by an unordered list.

Chaos isn't a pit. Chaos is a ladder. Many who try to climb it fail and never get to try again. The fall breaks them. And some are given a chance to climb. They refuse, they cling to the realm or the gods or love. Illusions. Only the ladder is real. The climb is all there is.

  • The Hound
    • For killing Arya's friend Mycah, the butcher’s boy, on Joffrey’s orders on the Kingsroad back in season one.
    • This is just an excerpt of Aria's list, btw.
  • Meryn Trant
  • Cersei Lannister
  • Joffrey
  • Ilyn Payne

So they will not love. Love is the death of duty. If the day should ever come when your lord father was forced to choose between honor on the one hand and those he loves on the other, what would he do?

CSS for list items:

/* Bullets for list items */

.contains-list ul {
margin: 1em 0;
padding:0 20px;
list-style-type: none;
}

.contains-list ul li {
padding-left: 1.3em;
}

.contains-list ul li:before {
content: "229A"; /* CSS Code */
width: 1.3em;
margin-left: -1.3em;
display: inline-block;
}

Buttons

  • Background: Base Colour #2a3c6c
  • Bg hover: Brighter C #6881c4
  • Text (reg & hover): Bright Gray #f5f5f5
  • Style: Flat
  • Round Corners: 0
  • CSS Class: defbtn_dark

Button CSS:

/* Default Button */

a.fl-button {
color: #f5f5f5;
text-transform: uppercase;
font-family: "Calibri", "Hind", sans-serif;
line-height: 1em;
border: 1px solid #f5f5f5 !important;
position: relative;
}

a.fl-button:before {
content: "";
position: absolute;
z-index: 1;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
border: 2px solid #f5f5f5;
}

.defbtn_dark a.fl-button:before {
border: 2px solid #151515;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
}

.dark_example { background-color: #ffffff; }

(Contact) Forms

Please enter your name.
Please enter a message.
Please check the captcha to verify you are not a robot.

Contact form:

  • Regular BB "Contact Form" module
  • E-Mail subject: ServImm: Contact Form Submission!
  • Button: default as above

Contact Form CSS:

/* Contact Form */

.fl-contact-form input[type="text"],
.fl-contact-form input[type="email"],
.fl-contact-form input[type="url"],
.fl-contact-form input[type="password"],
.fl-contact-form input[type="search"],
.fl-contact-form input[type="tel"],
.fl-contact-form input[type="number"],
.fl-contact-form textarea,
.fl-contact-form select {
color: #f5f5f5;
background-color: #4d4d4d;
border-color: #bfbfbf;
border-style: double;
border-width: 4px;
}

.fl-contact-form input:-webkit-autofill,
.fl-contact-form textarea:-webkit-autofill,
.fl-contact-form select:-webkit-autofill {
background-color: #f5f5f5;
background-image: none;
color: #151515;
}

.fl-contact-form .fl-button-wrap {
margin: 20px 4px;
}

.fl-contact-form label { margin-top: 10px; }

.fl-contact-form label {
margin-bottom: 5px;
margin-top: 5px;
}

Display Box

CSS Classes:

.displaybox
.displaybox_bright

(assign to column)
Column padding: 20px x4

CSS for Display Box:

/* Display Box (assign to column) */

.displaybox {
border: 2px solid #151515;
padding: 3px;
}

.displaybox > .fl-col-content { border: 1px solid #151515; }

.displaybox_bright {
border: 2px solid #f5f5f5;
padding: 3px;
}

.displaybox_bright > .fl-col-content { border: 1px solid #f5f5f5; }

/* Images in Display Box */

.displaybox-img img {
max-width: 150px;
border-radius: 50%;
border: 1px solid #000000;
}

.displaybox-img .fl-photo-content {
padding: 2px;
border-radius: 50%;
border: 2px solid #151515;
}

Fancy Header

Heading Module

  • Use H1 tag in heading module
  • Top padding: adjust, e.g. 5 px
  • Add fancyheader_bright CSS class for dark backgrounds

CSS for Fancy Header:

/* Fancy Header (assign to Heading module) */

.fancyheader { text-align:center; }

.fancyheader h1 {
text-transform: uppercase;
}

.fancyheader > div {
display: inline-block;
border-top: 1px solid #D9B499;
padding-top: 10px;
}

.fancyheader_bright > div { border-top: 1px solid #D9B499; }

Footer

%copy% %current_year% ServImm <span style="color:#d9b499">&#8674;</span> Designed &amp; developed by <a href="https://www.brandartery.com">Brand Artery</a> <span style="color:#d9b499">&#8674;</span> <a href="#">Privacy &amp; Terms</a>

Additional Global Styles

Color boxes on this page

/* Assign to div that contains color */

.colorbox {
height: 150px;
width: 150px;
border: 1px solid #151515;
border-radius: 50%;
margin: 0 auto 20px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-size:0.9em;
}

.fl-node-5a5a8c47a52dd .fl-col-small,
.fl-node-5a5a91d23ab3d .fl-col-small,
.fl-node-5a5b752fa4f47 .fl-col-small {
min-width: 160px;
}

Menu Styling

/* Menu Styling */

.main-navigation .navigation-logo img { padding: 13px !important; }

Annotation Boxes

/* Annotations for client */

.annotation .fl-module-content {
padding: 20px;
background-color: #ade1b7;
border: 1px solid #2d7c3c;
color: #151515 !important;
}

.annotation a {
color: #4d4d4d;
text-decoration: underline;
}

.annotation p:last-child {
margin-bottom: 0;
}

BB's @media Rules

@media (max-width: 768px) {
.fl-row[data-node] .fl-row-content-wrap { padding-right: 0; }
}
@media (max-width: 992px) { }

Calendar from YDLV

HTML for form

<div class="contact_form_box">

<p><span class="required">Obligatoire</span> Mon nom est&nbsp:<br />
[text* your-name placeholder "Dites-nous votre nom ;-)"] </p>

<p><span class="required">Obligatoire</span> Mon courriel est&nbsp;:<br />
[email* your-email placeholder "nom@courriel.ca"] </p>

<p><span class="required">Obligatoire</span> Mon courriel, une autre fois&nbsp;:<br />
[email* your-email2 placeholder "Svp confirmez votre courriel."] </p>

<p><span class="required">Bonne idée</span> Mon numéro de téléphone est&nbsp;:<br />
[tel tel-462 placeholder "XXX-XXX-XXXX"] </p>

<p>Je suis intéressé(e) à&nbsp;:<br />
[select* your-interests "Classes de yoga" "Atelier ou conférence" "Formation professionnelle de yoga" "Session de naturotherapie" "Flow ou yoga danse" "Retraite" "Méditation à la pleine lune" "Programme de renaissance/prénatal" "Perte de poids et detox" "Deuil & mort" "Dire bonjour! (Autre sujet)"]</p>

<p>Mon message:<br />
[textarea your-message] </p>

<p style="margin:0;">[submit "ALLONS-Y!"]</p>

</div>

Mail settings

Subject: 

Yoga de la Vie: Intéressé(e) à [your-interests]!

Body:

<strong>De:</strong> [your-name]
<strong>Courriel:</strong> [your-email]
<strong>Courriel (confirmation):</strong> [your-email2]
<strong>Téléphone:</strong> [tel-462]

<strong>Sujet:</strong> [your-interests]

<strong>[your-name] a écrit:</strong>

[your-message]

--
This e-mail was sent from a contact form on Yoga of Life · Montreal&#039;s Spiritual Guide for Crisis and Transformation (https://www.celinegingras.com)

CSS for contact form:

span.required {
color: #FFDFC6;
background-color: #ed6c06;
font-size: 0.8em;
padding: 5px;
border: 1px solid #ffdfc6;
margin-bottom: 5px;
display: inline-block;
}