Skip to content

Instantly share code, notes, and snippets.

@diggeddy
diggeddy / Elementor - Check Radio button by default
Created January 2, 2018 00:08
Make a Elementor form radio button checked by default
/*---- JavaScript Check radio button ------*/
/*---- change ElementID to match the ------*/
<script type="text/javascript">
window.onload = function check() {
document.getElementById("form-field-LABEL-#").checked = true;
}
</script>
@diggeddy
diggeddy / Elementor - Slider Zoom Box
Created January 2, 2018 00:55
Change a single slide elementor slider into a zoom box
/*---- convert a slider widget into a zoom box ---*/
.db-slider-reveal .elementor-slide-description,
.db-slider-reveal .elementor-slide-button,
.db-slider-reveal .slick-slide-inner .elementor-background-overlay {
transition: all 1000ms ease-in-out;
}
.db-slider-reveal:not(:hover) .elementor-slide-description,
.db-slider-reveal:not(:hover) .elementor-slide-button,
.db-slider-reveal:not(:hover) .slick-slide-inner .elementor-background-overlay
@diggeddy
diggeddy / Elementor - Block quote class for p tag
Created January 2, 2018 01:20
Simple CSS class for adding block quotes to p tag elements.
/*---- creating a block quote class for p tag ----*/
.db-quote p:before {
content: '\f10d';
}
.db-quote p::after {
content: '\f10e';
}
.db-quote p:before , .db-quote p:after {
font-family: FontAwesome;
@diggeddy
diggeddy / Elementor UI OnionSkin Hack
Created January 2, 2018 02:49
Providing that little extra accessibility in the elementor editor
/*---- Elementor UI Onion Skin Hack ----*/
.elementor-editor-active .elementor:hover .elementor-section:not(:hover) {
opacity: 0.3;
z-index: 0;
}
.elementor-editor-active .elementor-section:hover {
z-index: 1 !important;
}
@diggeddy
diggeddy / Elementor - Slide Outs
Created January 2, 2018 03:01
Simple slide out on hover CSS
/*--- create simple slide out on hover ----*/
.db-hover-scale , .db-hover-slideout {
transition: all 0.35s ease-in-out !important;
}
.db-hover-box:hover .db-hover-scale {
transform: scale(1.02);
box-shadow: 0px 10px 10px 15px rgba(0,0,0,0.3);
}
@diggeddy
diggeddy / GP + Elementor - Sticky Navigation
Created January 2, 2018 17:11
Add content to GeneratePress navigation hook. Demonstrating Elementor content
/*---- Hook shortcode (elementor template) into GP navigation ----*/
add_action( 'generate_inside_navigation','db_add_shortcode' );
function db_add_shortcode() {
echo do_shortcode('[SHORT-CODE]');
}
@diggeddy
diggeddy / Elementor - Accordion Toggle Icons
Created January 3, 2018 18:38
Changing icons in the Elementor accordion and toggle widgets
/*----- Toggle Widget - change icons -----*/
.elementor-toggle .elementor-tab-title .elementor-toggle-icon .fa:before {
content: "\f067";
}
.elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon .fa:before {
content: "\f068";
}
@diggeddy
diggeddy / Elementor - UI Widget Panel Hack
Created January 8, 2018 18:49
Elementor UI Widget Panel - make it a flex and make those icons smaller
add_action( 'elementor/editor/after_enqueue_styles', function() {
echo '<style type="text/css">
.elementor-panel .panel-elements-category-items {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
@diggeddy
diggeddy / Elementor - Image Carousel Diamond Images
Created January 14, 2018 01:23
Create diamond CSS mask for images in Elementor Carousel Widget
@diggeddy
diggeddy / GeneratePress Default Custom Fields
Created January 18, 2018 23:12
Add custom fields to new pages and posts by default
add_action('wp_insert_post', 'set_default_custom_fields');
function set_default_custom_fields($post_id){
if ( $_GET['post_type'] == 'page' ) {
add_post_meta($post_id, 'page_header_cta', '', true);
add_post_meta($post_id, 'page_header_cta_label', '', true);
}
return true;
}