Skip to content

Instantly share code, notes, and snippets.

View agirlandhermac's full-sized avatar

agirlandhermac

2 followers · 0 following
View GitHub Profile
@agirlandhermac
agirlandhermac / divi-and-woo-single-product.css
Last active May 13, 2020 16:59
Use Divi builder on WooCommerce single product pages.
/**************************************************/
/*** MAIN CODE TO MAKE SINGLE PRODUCT FULLWIDTH ***/
/**************************************************/
.woocommerce .woocommerce-breadcrumb {
display: none; /* hides Woo breadcrumbs */
}
.single-product .clearfix {
display: flex;
flex-direction: column;
justify-content: center;
@agirlandhermac
agirlandhermac / color-block-blog-grid-divi-ifttt
Last active May 14, 2017 17:35
Color block blog grid for Divi similar to IFTTT - Masonry & Equal Height
/*** FEATURED IMAGE STUFF ***/
.et_pb_image_container {
margin: 0;
}
.et_pb_blog_grid .et_pb_image_container img {
min-width: 100px;
max-width: 100px;
height: 100px;
border-radius: 10px;
object-fit: cover;
@agirlandhermac
agirlandhermac / gravity-forms-material-design.css
Last active November 1, 2023 10:43
Styling Gravity Forms with Material Design Look
/*** MAIN WRAPPER ***/
.gform_wrapper {
background: #6000AA;
padding: 5%;
}
/*** REMOVE LABEL FOR PLACEHOLDER ONLY ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
display: none;
@agirlandhermac
agirlandhermac / gravity-forms-etfont.css
Last active February 19, 2017 01:58
Gravity Forms Styling for Divi with Background Image and ET Font
/*** MAIN FORM WRAPPER ***/
.gform_wrapper {
background: rgba(255, 255, 255, 0.95);
padding: 5%;
}
/*** GRAVITY FIELDS ***/
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper textarea.medium,
.gform_wrapper textarea.large {
@agirlandhermac
agirlandhermac / caldera-colored-opaque.css
Last active May 10, 2018 19:21
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;
@agirlandhermac
agirlandhermac / caldera-material-design.css
Last active November 15, 2019 13:44
Caldera Forms with Material Design Style
/*** MAIN FORM CONTAINER ***/
.caldera-grid {
background: #691a99;
padding: 30px 25px 15px 25px;
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .1);
border-radius: 4px;
}
/*** FIELD STYLING ***/
.caldera-grid .form-control {
color: #fff !important;
@agirlandhermac
agirlandhermac / transparent-caldera.css
Last active February 14, 2017 01:13
Transparent Caldera Forms with Font Awesome Radio and Checkbox Buttons
.caldera-grid .form-control:focus {
border-color: #fff;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075), 0 0 8px rgba(255, 255, 255, .6);
/*** CHANGES THE BLUE COLOR WHEN A FIELD IS CLICKED ***/
}
.caldera-grid label,
.caldera-grid .help-block {
color: #fff;
/*** LABEL AND DESCRIPTION TEXT COLOR ***/
}
@agirlandhermac
agirlandhermac / fontawesome.php
Created February 13, 2017 20:40
Add Font Awesome Icons to Caldera Forms
//* Add Font Awesome Support
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
@agirlandhermac
agirlandhermac / background.css
Last active March 6, 2017 22:32
Finding a Page ID in Genesis to Use for Caldera Forms
/*** YOU WILL NEED TO REPLACE 80 WITH YOUR SPECIFIC PAGE NUMBER ***/
article.post-80.page.type-page.status-publish.entry {
background: transparent;
}
/*** THIS MAKES THE FORM BACKGROUND TRANSPARENT AND OTHER STUFFS ***/
.caldera-grid .form-control {
border-width: 3px;
color: #fff;
background: transparent;
height: auto;