Improve Hero section fullscreen setting

FameThemes · Nov 1, 2015 · 2373a84 · 2373a84
1 parent b0bc225
commit 2373a84
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -73,7 +73,7 @@
 } )();
 function res() {
     headerH = jQuery('.site-header').height();
-    jQuery('.hero-fullscreen-slideshow ').css('height',(w.outerHeight()-headerH+1)+'px');
+    jQuery('.hero-slideshow-fullscreen').css('height',(w.outerHeight()-headerH+1)+'px');
 }
 
 /**

diff --git a/assets/sass/_sections.scss b/assets/sass/_sections.scss
@@ -42,11 +42,20 @@
 		}
 	}
 }
+.help-message {
+	padding: 10px 20px;
+	background-color: #f8f9f9;
+	border-radius: 2px;
+	border-bottom: 1px solid #f2f2f2;
+	p {
+		margin-bottom: 0px;
+	}
+	margin-bottom: 20px;
+}
 
 /* Section: Hero
 ------------------------------*/
-.hero-fullscreen-slideshow {
-	height: 800px;
+.hero-slideshow-wrapper {
 	width: 100%;
 	position: relative;
 	background-color: #000000 !important;
@@ -61,6 +70,16 @@
 		display: block;
 		content: "";
 	}
+}
+.hero-slideshow-normal {
+	.container {
+		padding: 10% 0px;
+		position: relative;
+		z-index: 80;
+
+	}
+}
+.hero-slideshow-fullscreen {
 	.container {
 		z-index: 80;
 		position: relative;
@@ -70,6 +89,7 @@
 
 	}
 }
+
 /* Hero Text Style1. */
 .hero-content-style1 {
 	text-align: center;

diff --git a/inc/customizer.php b/inc/customizer.php
@@ -341,6 +341,54 @@ function onepress_customize_register( $wp_customize ) {
 				)
 			);
 
+			// Show hero full screen
+			$wp_customize->add_setting( 'onepress_hero_fullscreen',
+				array(
+					'sanitize_callback' => 'onepress_sanitize_checkbox',
+					'default'           => '',
+				)
+			);
+			$wp_customize->add_control( 'onepress_hero_fullscreen',
+				array(
+					'type'        => 'checkbox',
+					'label'       => __('Make hero section full screen', 'onepress'),
+					'section'     => 'onepress_hero_settings',
+					'description' => esc_html__('Check this box to make hero section full screen.', 'onepress'),
+				)
+			);
+
+			// Hero content padding top
+			$wp_customize->add_setting( 'onepress_hero_pdtop',
+				array(
+					'sanitize_callback' => 'onepress_sanitize_text',
+					'default'           => __('10', 'onepress'),
+				)
+			);
+			$wp_customize->add_control( 'onepress_hero_pdtop',
+				array(
+					'label'           => __('Padding Top:', 'onepress'),
+					'section'         => 'onepress_hero_settings',
+					'description'     => 'The hero content padding top in percent (%).',
+					'active_callback' => 'onepress_hero_fullscreen_callback'
+				)
+			);
+
+			// Hero content padding bottom
+			$wp_customize->add_setting( 'onepress_hero_pdbotom',
+				array(
+					'sanitize_callback' => 'onepress_sanitize_text',
+					'default'           => __('10', 'onepress'),
+				)
+			);
+			$wp_customize->add_control( 'onepress_hero_pdbotom',
+				array(
+					'label'           => __('Padding Bottom:', 'onepress'),
+					'section'         => 'onepress_hero_settings',
+					'description'     => 'The hero content padding bottom in percent (%).',
+					'active_callback' => 'onepress_hero_fullscreen_callback'
+				)
+			);
+
 		$wp_customize->add_section( 'onepress_hero_images' ,
 			array(
 				'priority'    => 6,
@@ -1403,6 +1451,14 @@ function onepress_sanitize_file_url( $file_url ) {
 	return $output;
 }
 
+function onepress_hero_fullscreen_callback ( $control ) {
+	if ( $control->manager->get_setting('onepress_hero_fullscreen')->value() == '' ) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
 function onepress_sanitize_number( $input ) {
     return force_balance_tags( $input );
 }

diff --git a/section-parts/section-about.php b/section-parts/section-about.php
@@ -12,7 +12,7 @@
 			<?php if ( $onepress_about_subtitle != '' ) echo '<h5 class="section-subtitle">' . esc_html( $onepress_about_subtitle ) . '</h5>'; ?>
 			<?php if ( $onepress_about_title != '' ) echo '<h2 class="section-title">' . esc_html( $onepress_about_title ) . '</h2>'; ?>
 		</div>
-		
+
 		<div class="grid-row">
 		<?php if ( ! is_active_sidebar( 'section_about' ) ) { ?>
 			<div class="grid-sm-4 wow slideInUp">

diff --git a/section-parts/section-contact.php b/section-parts/section-contact.php
@@ -30,7 +30,7 @@
 					</div>
 				<?php } else { ?>
 				<div class="contact-form grid-sm-6 wow slideInUp">
-					<small><i>You can install <a target="_blank" href="<?php echo esc_url('https://wordpress.org/plugins/contact-form-7/'); ?>">Contact Form 7</a> plugin and go to <br><strong>Customizer &rarr; Section: Contact &rarr; Section Content</strong> to show a working contact form here.</i></small>
+					<small><i>You can install <a target="_blank" href="<?php echo esc_url('https://wordpress.org/plugins/contact-form-7/'); ?>">Contact Form 7</a> plugin and go to <strong>Customizer &rarr; Section: Contact &rarr; Section Content</strong> to show a working contact form here.</i></small>
 				</div>
 				<?php } ?>
 			<?php endif; ?>

diff --git a/section-parts/section-hero.php b/section-parts/section-hero.php
@@ -1,23 +1,31 @@
 <?php
-$onepress_hero_id        = get_theme_mod( 'onepress_hero_id', __('hero', 'onepress') );
-$onepress_hero_disable   = get_theme_mod( 'onepress_hero_disable' );
-$onepress_hero_image1    = get_theme_mod( 'onepress_hero_image1', get_template_directory_uri() . '/assets/images/hero1.jpg' );
-$onepress_hero_image2    = get_theme_mod( 'onepress_hero_image2', get_template_directory_uri() . '/assets/images/hero2.jpg' );
-$onepress_hero_image3    = get_theme_mod( 'onepress_hero_image3', get_template_directory_uri() . '/assets/images/hero3.jpg' );
-$onepress_hero_image4    = get_theme_mod( 'onepress_hero_image4', get_template_directory_uri() . '/assets/images/hero4.jpg' );
-$onepress_hcl1_enable    = get_theme_mod( 'onepress_hcl1_enable', 1 );
-$onepress_hcl1_largetext = get_theme_mod( 'onepress_hcl1_largetext', __('We are <span class="js-rotating">OnePress | One Page | Responsive | Perfection</span>', 'onepress' ));
-$onepress_hcl1_smalltext = get_theme_mod( 'onepress_hcl1_smalltext', __('An independent digital design studio in <strong>New York City.</strong> <br>We bring creativity and intelligence to the most beloved brands.', 'onepress' ));
-$onepress_hcl1_btn1_text = get_theme_mod( 'onepress_hcl1_btn1_text', __('More About Us', 'onepress') );
-$onepress_hcl1_btn1_link = get_theme_mod( 'onepress_hcl1_btn1_link', esc_url( home_url( '/' )).__('#about', 'onepress') );
-$onepress_hcl1_btn2_text = get_theme_mod( 'onepress_hcl1_btn2_text', __('See Our Works', 'onepress') );
-$onepress_hcl1_btn2_link = get_theme_mod( 'onepress_hcl1_btn2_link', esc_url( home_url( '/' )).__('#projects', 'onepress') );
+$onepress_hero_id         = get_theme_mod( 'onepress_hero_id', __('hero', 'onepress') );
+$onepress_hero_disable    = get_theme_mod( 'onepress_hero_disable' );
+$onepress_hero_fullscreen = get_theme_mod( 'onepress_hero_fullscreen' );
+$onepress_hero_pdtop      = get_theme_mod( 'onepress_hero_pdtop', '10' );
+$onepress_hero_pdbotom    = get_theme_mod( 'onepress_hero_pdbotom', '10' );
+$onepress_hero_image1     = get_theme_mod( 'onepress_hero_image1', get_template_directory_uri() . '/assets/images/hero1.jpg' );
+$onepress_hero_image2     = get_theme_mod( 'onepress_hero_image2', get_template_directory_uri() . '/assets/images/hero2.jpg' );
+$onepress_hero_image3     = get_theme_mod( 'onepress_hero_image3', get_template_directory_uri() . '/assets/images/hero3.jpg' );
+$onepress_hero_image4     = get_theme_mod( 'onepress_hero_image4', get_template_directory_uri() . '/assets/images/hero4.jpg' );
+$onepress_hcl1_enable     = get_theme_mod( 'onepress_hcl1_enable', 1 );
+$onepress_hcl1_largetext  = get_theme_mod( 'onepress_hcl1_largetext', __('We are <span class="js-rotating">OnePress | One Page | Responsive | Perfection</span>', 'onepress' ));
+$onepress_hcl1_smalltext  = get_theme_mod( 'onepress_hcl1_smalltext', __('An independent digital design studio in <strong>New York City.</strong> <br>We bring creativity and intelligence to the most beloved brands.', 'onepress' ));
+$onepress_hcl1_btn1_text  = get_theme_mod( 'onepress_hcl1_btn1_text', __('More About Us', 'onepress') );
+$onepress_hcl1_btn1_link  = get_theme_mod( 'onepress_hcl1_btn1_link', esc_url( home_url( '/' )).__('#about', 'onepress') );
+$onepress_hcl1_btn2_text  = get_theme_mod( 'onepress_hcl1_btn2_text', __('See Our Works', 'onepress') );
+$onepress_hcl1_btn2_link  = get_theme_mod( 'onepress_hcl1_btn2_link', esc_url( home_url( '/' )).__('#projects', 'onepress') );
+
+$hero_content_style = '';
+if ( $onepress_hero_fullscreen != '1' ) {
+	$hero_content_style = ' style="padding-top: '. $onepress_hero_pdtop .'%; padding-bottom: '. $onepress_hero_pdbotom .'%;"';
+}
 ?>
 
 <?php if ( $onepress_hero_disable != '1' ) : ?>
-<section id="<?php if ( $onepress_hero_id != '' ) echo $onepress_hero_id; ?>" class="hero-fullscreen-slideshow">
+<section id="<?php if ( $onepress_hero_id != '' ) echo $onepress_hero_id; ?>" class="hero-slideshow-wrapper <?php if ( $onepress_hero_fullscreen == 1 ) { echo 'hero-slideshow-fullscreen'; } else { echo 'hero-slideshow-normal'; } ?>">
 	<?php if ( $onepress_hcl1_enable == '1' ) : ?>
-	<div class="container">
+	<div class="container"<?php echo $hero_content_style; ?>>
 		<div class="hero-content-style1">
 			<?php if ( $onepress_hcl1_largetext != '' ) echo '<h2 class="hero-large-text">' . wp_kses_post( $onepress_hcl1_largetext ) . '</h2>'; ?>
 			<?php if ( $onepress_hcl1_smalltext != '' ) echo '<p> ' . wp_kses_post( $onepress_hcl1_smalltext ) . '</p>' ?>
@@ -28,7 +36,7 @@
 	<?php endif; ?>
 	<script>
 	jQuery(document).ready(function() {
-		jQuery('.hero-fullscreen-slideshow').backstretch([
+		jQuery('.hero-slideshow-wrapper').backstretch([
 				"<?php echo get_template_directory_uri() . '/assets/images/hero5.jpg' ?>",
 				"<?php echo $onepress_hero_image1; ?>",
 				"<?php echo $onepress_hero_image2; ?>",

diff --git a/style.css b/style.css
@@ -2104,16 +2104,26 @@ input[type="radio"], input[type="checkbox"] {
   }
 }
 
+.help-message {
+  padding: 10px 20px;
+  background-color: #f8f9f9;
+  border-radius: 2px;
+  border-bottom: 1px solid #f2f2f2;
+  margin-bottom: 20px;
+}
+.help-message p {
+  margin-bottom: 0px;
+}
+
 /* Section: Hero
 ------------------------------*/
-.hero-fullscreen-slideshow {
-  height: 800px;
+.hero-slideshow-wrapper {
   width: 100%;
   position: relative;
   background-color: #000000 !important;
   overflow: hidden;
 }
-.hero-fullscreen-slideshow:after {
+.hero-slideshow-wrapper:after {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -2123,7 +2133,14 @@ input[type="radio"], input[type="checkbox"] {
   display: block;
   content: "";
 }
-.hero-fullscreen-slideshow .container {
+
+.hero-slideshow-normal .container {
+  padding: 10% 0px;
+  position: relative;
+  z-index: 80;
+}
+
+.hero-slideshow-fullscreen .container {
   z-index: 80;
   position: relative;
   top: 50%;