• Skip to fullPage navigation
  • Skip to primary navigation
  • Skip to main content
Krolyn Studios

Krolyn Studios

Precoded Clips for WP Clips

  • Precoded Clips
  • Demos
    • Full-Window Genesis Responsive Slider
    • Genesis Responsive Slider Custom Classes
    • Genesis Responsive Slider V-Middle Excerpt
    • Genesis Simple Mega Menu
    • Genesis Alvaro Trigo fullPage
    • Genesis Bgrd Featured Image Effects
    • Genesis Isotope Filters
  • WP Clips

Genesis Background Featured Image Effects

v2.0 / Demo
Dwnlds614

This Clip adds a CSS filtered copy of the featured image (if present) to the background of Genesis single posts and pages. CSS filters and display conditions are customizable (default CSS filter = blur, display conditions = single posts and pages).

Category: Free Clips
  • Download
  • Setup
  • Comments
Requirements
WP Clips - download and install latest version

Genesis v2.2+ (by StudioPress) + most child themes


Installation / Updates
  1. Download the Precoded Clip zip file.
  2. clip-genesis-bg-featured-img-fx.2.0.zip

    Download Clip
  3. Go to Settings > Clips in WordPress admin and install via 'WP Clips Manager'; OR unzip and upload via FTP (or file manager) to the /wp-content/clips/precoded/ directory.

Credits / Sponsors
Clip authored by Jon Barratt / Krolyn

Description

USING THE CLIP

Set and forget.

OPTIONS

Background Effects –

By default, the Clip uses CSS filters with 10% blur. This can be adjusted by adding the following code to your custom Clip’s custom-style.css file (note: transform properties may also require adjusting to account for any blur on page edges) –

.genesis-bg-featured-img-fx {
    -webkit-filter: blur(10px); /* Adjust as required */
    filter: blur(10px); /* Adjust as required */
    -ms-transform:  scale(1.1); /* May require adjusting */
    -webkit-transform: scale(1.1); /* May require adjusting */
    transform: scale(1.1); /* May require adjusting */
}

Refer to the link below for additional filter options (i.e. none, blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia ) –
http://www.w3schools.com/cssref/css3_pr_filter.asp

Background Horizontal Flip –

The background can be flipped horizontally by adding the following code to your custom Clip’s custom-style.css file –

.genesis-bg-featured-img-fx {
    -ms-transform:  scale(-1.1,1.1);
    -webkit-transform: scale(-1.1,1.1);
    transform: scale(-1.1,1.1);
}

Conditions –

By default, the Clip adds the background to all single posts and pages (only when a featured-image is attached). However, conditions can be altered by adding the following filter code to your custom Clip’s custom-functions.php file –

add_filter( 'clip_genesis_bg_feat_img_fx_active', 'your_custom_filter' );
function your_custom_filter( $active ) {
    if( /* Add conditions here */ ) {
        return true;
    }
    return false; /* Or return $active for default */
}
NOTES

Backgrounds are active only when a featured image is present.

Reviews

There are no reviews yet.

Cancel reply

Your email address will not be published. Required fields are marked *

  • WP Clips
  • WP Clips Multisite
  • Krolyn’s ClipBank

© Copyright 2015 Krolyn Studios · Privacy Policy · Contact