-
-
Save About2git/9614ebb89e474415c403 to your computer and use it in GitHub Desktop.
Full width Soliloquy slider in Genesis
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//* Do NOT include the opening php tag | |
//* Enqueue Google fonts | |
add_action( 'wp_enqueue_scripts', 'custom_google_fonts' ); | |
function custom_google_fonts() { | |
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Arvo:400', array(), CHILD_THEME_VERSION ); | |
} | |
//* Register Home Slider widget area | |
genesis_register_sidebar( array( | |
'id' => 'home-slider', | |
'name' => 'Home Slider', | |
'description' => 'This is the home slider section' | |
) ); | |
add_action( 'genesis_after_header', 'sk_home_featured' ); | |
/** | |
* Display Home Slider widget area's contents below Navigation on homepage. | |
* | |
* @author Sridhar Katakam | |
* @link http://sridharkatakam.com/full-width-soliloquy-slider-genesis/ | |
*/ | |
function sk_home_featured() { | |
if ( is_home() || is_front_page() ) { | |
genesis_widget_area( 'home-slider', array( | |
'before' => '<div class="home-slider widget-area">', | |
'after' => '</div>', | |
) ); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="slide-caption"><h2 class="slide-title">My first slide</h2> | |
<h4 class="slide-content">Quisque scelerisque nullam. In tincidunt lectus velit, in congue enim dignissim eu. Nam aliquam erat magna, sed ullamcorper augue sagittis in. Sed vitae purus eu mauris dapibus mollis.</h4> | |
<a href="#" class="button cta">Call to Action Text</a> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Full width Soliloquy slider | |
------------------------------------- */ | |
/* To get rid of -4px bottom margin for image links */ | |
a img { | |
margin-bottom: 0; | |
} | |
/* To avoid noticeable vertical movement for hover state of Soliloquy's Control Nav (typically circles) */ | |
.soliloquy-container .soliloquy-control-nav li a, | |
.soliloquy-theme-classic .soliloquy-pager-link { | |
-webkit-transition: none; | |
-moz-transition: none; | |
-ms-transition: none; | |
-o-transition: none; | |
transition: none; | |
} | |
/* To remove bottom border for Soliloquy controls */ | |
.entry-content .soliloquy-controls-direction a, .entry-content a.soliloquy-pager-link { | |
border-bottom: none; | |
} | |
.home-slider .soliloquy-container { | |
max-width: none !important; | |
max-height: 100% !important; | |
} | |
.home-slider .soliloquy-container .soliloquy-image { | |
width: 100% !important; | |
} | |
.home-slider .soliloquy-container .soliloquy-caption-inside { | |
padding: 30px; | |
} | |
.home-slider .soliloquy-container .slide-caption { | |
max-width: 960px; | |
margin: 0 auto; | |
} | |
h2.slide-title { | |
font-size: 25px; | |
color: #fff; | |
margin-bottom: 30px; | |
text-transform: uppercase; | |
font-family: 'Arvo', serif; | |
font-weight: normal; | |
letter-spacing: 2px; | |
} | |
h4.slide-content { | |
font-size: 21px; | |
color: #fff; | |
line-height: 1.5; | |
letter-spacing: 0.03em; | |
font-weight: normal; | |
} | |
.soliloquy-container a.button { | |
border-radius: 3px; | |
background: #39cccc; | |
color: #000; | |
padding: 16px 24px; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
margin-top: 30px; | |
font-family: 'Arvo', serif; | |
} | |
.soliloquy-container a.button:hover { | |
background: #3d9970; | |
color: #fff; | |
} | |
.home-slider .soliloquy-container .soliloquy-pager { | |
right: 10px; | |
bottom: 20px; | |
float: right; | |
width: auto; | |
} | |
@media only screen and (max-width: 600px) { | |
.home-slider .soliloquy-container .soliloquy-caption { | |
display: block; | |
position: static; | |
background: #999; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment