Using the
Gravity Forms plugin for WordPress is a great way to build some awesome forms. I recently added some forms to a page with a dark background. I found some text hard to read. I was able to fix this by adding the below custom CSS code...
body .gfield_description {
color:#fff;
}
body .gf_step_label {
color:#fff;
font-size:20px;
font-weight:500;
line-height:1.4em;
}
body .validation_error {
color:#fff!important;
}
body .gfield_label {
color:#fff!important;
}
body .gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible {
color:#fff!important;
}
Finding that the text is white in the Divi email opt-in? Add this custom and edit with the colors you wish to use.
.et_pb_newsletter_form .et_pb_signup_custom_field_0 .input[type="checkbox"] + label {
font-family: 'Verdana',Helvetica,Arial,Lucida,sans-serif;
font-size: 10px;
color: #ffffff !important;
text-align: left;
text-shadow: 0em 0.1em 0.1em #ffffff;
}
By default, the DIVI theme by
Elegant Themes has a generous amount of padding. To reduce the amount of padding globally with CSS, just add this custom CSS code below:
.et_pb_row {
padding: 0 !important;
}
In a previous post, I demonstrated how to
center align your WordPress blockquote, if you are looking for some additional styling, take a look at this custom CSS:
blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
font-family: Helvetica Neue,Helvetica,sans-serif;
font-size: 22px;
color: #95a5a6;
background: #ccc;
}
With most of the content on your WordPress page or post being left aligned. Center aligning a blockquote is a great way to have them stand out.
To center align your WordPress blockquote, all you need to do is add this custom CSS code to the additional CSS box in your WordPress theme:
blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
}
If you would like to make menu centered on mobile only, add this css code in the custom css field of the theme options:
.et_mobile_menu li a {
text-align: center;
}
Looking to disable all animations within a Divi WordPress site, Globally?
There is an easy way to disable the animations with DIVI, just add this code to the Custom CSS area from Theme Options:
.et_pb_section .et_pb_module .et_pb_row {
animation-name: none!important;
-webkit-animation-name: none!important;
-moz-animation-name: none!important;
-ms-animation-name: none!important;
-o-animation-name: none!important;
opacity: 1!important;
transform: translate3d(0px, 0px, 0px)!important;
}
