Skip to content

Instantly share code, notes, and snippets.

@diggeddy
diggeddy / gist:3ce9edc636d79538397251fa96bcafd2
Created Aug 2, 2017
LOGO BUILDING - HTML AND CSS EFFECT
View gist:3ce9edc636d79538397251fa96bcafd2
/* ------------ MARK-UP BELOW -------*/
<div class="db-container">
<div class="db-a">A</div>
<div class="db-b">B</div>
<div class="db-c">C</div>
<div class="db-d">D</div>
</div>
/* ----------- CSS BELOW ---------- */
@diggeddy
diggeddy / EL-CSS-HACK-1
Last active Dec 20, 2017
ELEMENTOR CSS HACK - RESPONSIVE GALLERY WIDGET
View EL-CSS-HACK-1
/* CSS Elementor flexible gallaery */
.db-grid-flex .elementor-widget-container .elementor-image-gallery .gallery {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
justify-content: center;
flex-flow: row wrap;
}
View Fixed variable height footer in GeneratePress
@diggeddy
diggeddy / Elementor - Aligning elements within columns
Created Dec 20, 2017
A Flex and Grid option for vertically aligning elements within a column
View Elementor - Aligning elements within columns
/* Elementor - Auto aligning elements within a column */
/*Option 1 - Flex Container Fix*/
.db-flex-column .elementor-widget-wrap {
height: 100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
@diggeddy
diggeddy / Elementor - Double button using Icon List widget
Created Dec 20, 2017
Using the Icon List widget to create double (multiple) buttons
View Elementor - Double button using Icon List widget
/* Elementor - create a double button with Icon List widget */
.db-list-button .elementor-icon-list-items {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
}
.db-list-button .elementor-icon-list-item a {
@diggeddy
diggeddy / Elementor - Transfrom position of colums x 4
Last active Feb 12, 2018
Simple use of CSS Transform:Translate and Transition for intro animations on hover
View Elementor - Transfrom position of colums x 4
/* Elementor - transform position for animated columns x 4 */
.db-enter-left ,
.db-enter-right ,
.db-enter-top,
.db-enter-bottom {
transition: all 0.75s ease-in-out;
}
.db-window2:not(:hover) .db-enter-left {
@diggeddy
diggeddy / Elementor - Masonry on Gallery Widget
Created Dec 20, 2017
Add Masonry to Elementor Gallery Widget
View Elementor - Masonry on Gallery Widget
@diggeddy
diggeddy / Elementor - Additional content on Form Widget
Created Dec 20, 2017
Using Pseudo elements to add additional content to Elementor Form Widget
View Elementor - Additional content on Form Widget
/* Elementor - additional content on Form Widget */
/* Basic code to add text content via Pseudo elements */
.elementor-form-fields-wrapper >div:nth-child(1) {
display: flex;
flex-flow: column;
align-items: left;
}
.elementor-form-fields-wrapper >div:nth-child(1):before {
content: "PUT YOUR TEXT CONTENT HERE";
@diggeddy
diggeddy / Elementor - Portfolio Filter Bar Hacks
Created Dec 22, 2017
Change the All filter title and re-order the filter bar
View Elementor - Portfolio Filter Bar Hacks
/* Elementor Portfolio Filter Bar Hacks */
/* Hack 1 - Change or hide the 'All' filter */
/* Hide the Elements visibility */
.elementor-portfolio__filters li:nth-child(1) {
visibility: hidden;
}
/* Add a different title in place of ALL */
@diggeddy
diggeddy / Post Thumbnail Shortcode
Created Dec 27, 2017
Add post thumbnail with short code
View Post Thumbnail Shortcode
/* Post thumbnail shortcode */
add_shortcode('featured_img', 'fi_in_content');
function fi_in_content($atts) {
global $post;
return get_the_post_thumbnail($post->ID);
}