Skip to content

Instantly share code, notes, and snippets.

@agirlandhermac
Last active May 10, 2018 19:21
Show Gist options
  • Save agirlandhermac/a098250e8167c87eeb784075b6d43e35 to your computer and use it in GitHub Desktop.
Save agirlandhermac/a098250e8167c87eeb784075b6d43e35 to your computer and use it in GitHub Desktop.
Styling Caldera Forms with a Colored Opaque Background
/*** MAIN FORM CONTAINER ***/
.caldera-grid {
background: rgba(127, 156, 150, 0.95);
padding: 40px 40px 10px 40px;
}
/*** HEADER FONT ***/
.caldera-grid h2 {
color: #DCE0D9;
font-weight: 700;
text-shadow: 2px 2px 0 #666;
}
/*** BODY FONT ***/
.caldera-grid p,
.caldera-grid label {
color: #f5f5f5;
}
/*** ADDS EXTRA SPACE BELOW HORIZONTAL RULE ***/
.caldera-grid .row {
margin-bottom: 20px;
}
/*** HORIZONTAL RULE ***/
.caldera-grid hr {
border-top: 5px solid #DCE0D9;
}
/*** FIELD STYLING ***/
.caldera-grid .form-control {
background: rgba(0, 0, 0, 0.2);
border: none;
border-radius: 0;
color: #f5f5f5;
}
/*** FIELD STYLING WHEN IN FOCUS ***/
.caldera-grid .form-control:focus {
color: #f5f5f5;
background: rgba(0, 0, 0, 0.4);
box-shadow: none;
}
/*** BUTTON STYLING ***/
.caldera-grid input[type=submit] {
font-weight: 700;
padding: 10px 12px;
border-radius: 0;
background: #555;
color: #f5f5f5;
border: none;
transition: -moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
/*** BUTTON HOVER STYLING ***/
.caldera-grid input[type=submit]:hover {
background: #444;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment