[bluebird]

In case this helps anyone else in a similar situation, I have found the solution to my issue(s) above:

I'm working on a new site locally with the Parallax Pro theme and with the latest version of Genesis, I encountered the same issue(s) when trying to create two custom pages.

The solution is simply just to not use any of these functions in my custom page templates:

<?php genesis_before_content_sidebar_wrap(); ?>

<?php genesis_before_content(); ?>

<?php genesis_before_loop(); ?>

<?php genesis_loop(); ?>

<?php genesis_after_content(); ?>

<?php genesis_after_content_sidebar_wrap(); ?>

The whole process is now actually a lot more simple (yay!).

Here is an example on how to create a custom page with Genesis 3+:

<?php
/*
Template Name: media page template
*/

//* Add custom body class

add_filter( 'body_class', 'childthemeprefix_media_body_class' );
function childthemeprefix_media_body_class( $classes ) {
	$classes[] = 'media-page';
	return $classes;
}

 ?>

<!-- genesis(); -->
<?php get_header(); ?>

<div id="content-sidebar-wrap">

<div id="content" class="hfeed">

<?php add_action( 'genesis_post_title', 'genesis_do_post_title' ); ?>

....custom HTML here.....

</div><!-- end #content -->

</div><!-- end #content-sidebar-wrap -->

<script type="text/javascript">
....custom JS
</script>

<?php get_footer(); ?>

Hope that this helps someone else:-)

[bluebird]

Hello? Is there anyone out there who can help me?

I have rolled back to Genesis V 2.6.1 for now, but this is not a permanent solution.

Thanks:-)

[bluebird]

Hi Andrea,

Thank you so much for the clarifications and for the tips on how to get help. Every forum is different and I obviously was unaware of the posting guidelines, so my apologies for that.

I will keep all of this in mind for the future and bookmark the links that you and Aryan have provided.

I'm glad that I've got this all cleared up because I was seriously scratching my head after not having tried to post here for over a year:-)

Thanks again and Happy Sunday,

Juliette

[bluebird]

Thank you @Aryan Raj!

[bluebird]

My topic was this:

Centric Pro background images not showing in iPhone 7

How would that get me flagged as either spam or being off topic?

Also, I have never misused this forum and I have never posted anything off topic (ie., I have never post anything not related to Genesis themes). The only thing that I can think of is that I tried to contribute/help other people in the forums here when I first joined a little over a year ago, but I would reckon that that's what this forum is all about (...helping one another).

I simply have no explanation for it and it appears that there is no one that I can contact to remedy this:(

I paid a lot of $$ to be here.

Thanks again for taking the time to respond to me.

With regards the the Sass media queries, they're just like regular media queries...the syntax is just a bit different, but the outcome is the same. One is for tablets and the other is for phones:-)

[bluebird]

Last try...lol.. firebugmusic.com

[bluebird]

I'm using a Sass compiler (sorry, I should have mentioned that) so my media queries are customized (the syntax, I mean..).

This compiles to a media query for smaller tablets:

@include bp(tabletMobile2nd)

...and this compiles to a regular CSS query for most mobile phones:

@include bp(mobile_large)

Cheers:-)

Juliette

[bluebird]

There is nothing wrong with my url. Its https and it's just not posting here. Not to be a pain, but being that I am unable to post it here...all that you have to do is Google firebugmusic (it comes up first via Google) to see what I mean. Someone must have blocked my posts for some reason unbeknownst to me (or at least that's how it appears).

[bluebird]

My url is https secure:

Home

[bluebird]

Let me try to post the link again...

firebugmusic.com

[bluebird]

I just tried to post the url for the site that I'm referring to and (again) my post did not show up. Are we not allowed to post urls here? It's kind of difficult to display my issue if I can't post the url to the site that is using the theme...

Another issue that I've been having is that every time I click on my profile there is no option for me to upload an avatar image so that everyone can see that I am not a bot.

Thanks again.

[bluebird]

Here is the url for the website that I'm referring to:

http://www.firebugmusic.com

Cheers:-)

[bluebird]

Hi AnitaC,

I just tried to post here (again) and it did not go through...Let me try again.

My issue is with background images not showing up in iOS Apple iPhone7. The theme that I'm using is Centric Pro.

Thanks for responding:-)

Hi,

I have 2 background images (the 2nd image is set to appear on page scroll) set on the body property of the home page and everything appears to be working as expected, EXCEPT for on my iPhone 7.

Has anyone else ever experienced this issue and if so, is there a solution?

Here is my CSS for the background images:

body.custom-background.page,
body.custom-background.post {
	background-position: top center;
        background-attachment: fixed;
	position:relative;
	top:20;
	max-width: 100%;
	height:auto;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('images/firebugneworleans1700w.jpg');

		@include bp(tabletMobile2nd){
		 background-image: url('images/juliette-desert-700w.jpg');
		 background-position: right;
                 background-position-y: 70px;
		 max-width: 100%;
		 background-attachment: none;

                  }
              @include bp(mobile_large){
                         background-image: url('images/juliette-desert-300w.jpg');
			 background-position: center;
			 background-attachment: none;
			 max-width: 100%;

		 }
}

body.custom-background.page:hover,
body.custom-background.post:hover{
        background-image: url('images/juliette-desert.jpg');
	max-width: 100%;

               @include bp(tabletMobile2nd){
			background-image: url('images/juliettesideshot700w.jpg');
			background-position: center;
                        background-position-y: 70px;
			max-width: 100%;
			background-attachment: none;

	 }

}

body.custom-background.scrolled {
            background-image:url('images/firebuglive.jpg');
	    max-width: 100%;

                @include bp(tabletMobile2nd){
		     background-image: url('images/firebuglive-700w.jpg');
		}

                 @include bp(mobile_large){
                     background-image: url('images/firebuglive-450w.jpg');

                }
}

body.custom-background.scrolled:hover {
    background-image:url('images/firebuglive.jpg');

}

[bluebird]

Thanks AnitaC!

The issue that I'm having is with Centric Pro.

Here is my post that never made it to the forum:

Hi,

I have 2 background images (the 2nd image is set to appear on page scroll) set on the body property of the home page and everything appears to be working as expected, EXCEPT for on my iPhone 7.

Has anyone else ever experienced this issue and if so, is there a solution?

Here is my CSS for the background images:

body.custom-background.page,
body.custom-background.post {
	background-position: top center;
        background-attachment: fixed;
	position:relative;
	top:20;
	max-width: 100%;
	height:auto;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('images/firebugneworleans1700w.jpg');

		@include bp(tabletMobile2nd){
		 background-image: url('images/juliette-desert-700w.jpg');
		 background-position: right;
                 background-position-y: 70px;
		 max-width: 100%;
		 background-attachment: none;

                  }
              @include bp(mobile_large){
                         background-image: url('images/juliette-desert-300w.jpg');
			 background-position: center;
			 background-attachment: none;
			 max-width: 100%;

		 }
}

body.custom-background.page:hover,
body.custom-background.post:hover{
        background-image: url('images/juliette-desert.jpg');
	max-width: 100%;

               @include bp(tabletMobile2nd){
			background-image: url('images/juliettesideshot700w.jpg');
			background-position: center;
                        background-position-y: 70px;
			max-width: 100%;
			background-attachment: none;

	 }

}

body.custom-background.scrolled {
            background-image:url('images/firebuglive.jpg');
	    max-width: 100%;

                @include bp(tabletMobile2nd){
		     background-image: url('images/firebuglive-700w.jpg');
		}

                 @include bp(mobile_large){
                     background-image: url('images/firebuglive-450w.jpg');

                }
}

body.custom-background.scrolled:hover {
    background-image:url('images/firebuglive.jpg');

}

Thanks in advance to anyone who can help!

Cheers,

Juliette

PS. Here is the site that I'm having the issue(s) with:

Home

[bluebird]

Thanks for responding AnitaC. This is a problem for me as I am a member (I purchased the whole Genesis package w/all of the themes with lifetime access) and I am unable to get any support. I hope that someone from admin responds to this thread. This happened to me about a year ago as well (I haven't been here in awhile).

Juliette

[bluebird]

Hi Dekraan,

I am still relatively new to working with Genesis myself, but I am going to take a stab at answering your questions. I have begun work on customizing the Genesis Sample theme with goals in mind that are similar to yours, with the only difference being is that I want to keep the parallax (i.e.., background-attachment: fixed) effect.

I have a static home page (for now I'm just giving it the generic name "One"). To create a custom home page I have created a front-page.php file at the root of my theme directory with this code added:

<?php
/**
 * This file adds the Front Page to the genesis_sample Theme.
 *
 * @author StudioPress
 * @package genesis_sample
 * @subpackage Customizations
 */

add_action( 'wp_enqueue_scripts', 'genesis_sample_enqueue_home_scripts' );
/**
 * Enqueue Scripts
 */
function genesis_sample_enqueue_home_scripts() {

	wp_enqueue_script( 'genesis-home', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
	wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );

}

add_action( 'genesis_meta', 'genesis_sample_home_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function genesis_sample_home_genesis_meta() {

	if ( is_active_sidebar( 'home-widgets-1' ) || is_active_sidebar( 'home-widgets-2' ) || is_active_sidebar( 'home-widgets-3' ) || is_active_sidebar( 'home-widgets-4' ) || is_active_sidebar( 'home-widgets-5' ) || is_active_sidebar( 'home-widgets-6' ) || is_active_sidebar( 'home-widgets-7' ) ) {

		//* Force full width content layout
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

		//* Add genesis_sample-pro-home body class
		add_filter( 'body_class', 'genesis_sample_body_class' );

		//* Remove breadcrumbs
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

		//* Remove the default Genesis loop
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		//* Add home featured widget
		add_action( 'genesis_after_header', 'genesis_sample_home_featured_widget', 1 );

		//* Add home widgets
		 add_action( 'genesis_before_footer', 'genesis_sample_home_widgets', 5 );

	}
}

function genesis_sample_body_class( $classes ) {

	$classes[] = 'genesis_sample-pro-home';
	return $classes;

}

function genesis_sample_home_featured_widget() {
 //This displays in header abouve nav menu and below site title

	// genesis_widget_area( 'home-widgets-1', array(
	// 	'before' => '<div class="home-featured"><div class="wrap"><div class="home-widgets-1 color-section widget-area">',
	// 	'after'  => '</div></div></div>',
	// ) );

}

function genesis_sample_home_widgets() {

	echo '<div id="home-widgets" class="home-widgets">';

	genesis_widget_area( 'home-widgets-1', array(
		'before' => '<div class="home-widgets-1 widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-widgets-2', array(
		'before' => '<div class="home-widgets-2 widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-widgets-3', array(
		'before' => '<div class="home-widgets-3 color-section widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-widgets-4', array(
		'before' => '<div class="home-widgets-4 dark-section widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-widgets-5', array(
		'before' => '<div class="home-widgets-5 widget-area">',
		'after'  => '</div>',
	) );

        genesis_widget_area( 'home-widgets-6', array(
		'before' => '<div class="home-widgets-6 color-section widget-     area">',
		'after'  => '</div>',
	) );

	
	genesis_widget_area( 'home-widgets-7', array(
		'before' => '<div class="home-widgets-7 color-section widget-area">',
		'after'  => '</div>',
	) );

	echo '</div>';

}

genesis();

Then I added this code to my functions.php to register the widgets that appear on the front page:

//* Register widget areas
genesis_register_sidebar( array(
	'id'          => 'home-widgets-1',
	'name'        => __( 'Home 1', 'genesis-sample' ),
	'description' => __( 'This is the first section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-2',
	'name'        => __( 'Home 2', 'genesis-sample' ),
	'description' => __( 'This is the second section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-3',
	'name'        => __( 'Home 3', 'genesis-sample' ),
	'description' => __( 'This is the third section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-4',
	'name'        => __( 'Home 4', 'genesis-sample' ),
	'description' => __( 'This is the fourth section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-5',
	'name'        => __( 'Home 5', 'genesis-sample' ),
	'description' => __( 'This is the fifth section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-6',
	'name'        => __( 'Home 6', 'genesis-sample' ),
	'description' => __( 'This is the sixth section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-7',
	'name'        => __( 'Home 7', 'genesis' ),
	'description' => __( 'This is the seventh section of the home page.', 'genesis' ),
) );

I'm not entirely certain on whether or not this is the best approach and there may even be an error or two in my code somewhere (I'm assuming this being somewhat new to Genesis and WP theming), but it works for me.

If you want to get rid of the parallax effect, one thing that you can do is go into your CSS and change the background-image style properties (that are on the body tag of the front page) a bit by removing the background-attachment:fixed property and value. When I did this as a test though, my image became somewhat distorted. To remedy this I changed the background-size:cover value to background-size:contain .

I'm certain that Brad could explain this a lot more in depth (and with more clarity) as he has already done via the link that you have provided above.

Hope this helps!

[bluebird]

Hi Maurice,

I checked out your site. For what it's worth, the background images look fine when I scroll on my computer. I'm on a Mac Pro as well.

If this is happening on other sites/pages that are not related to the current site that you're working on, it could be related to your hardware on your Mac. Hopefully not though.....

Cheers:-)

[bluebird]

Hi Brad,

Thanks for responding! I tried adding this code to output.php yesterday:

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 {

	        background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
	
	            @include bp(tabletMobile2nd ){
	                background-position: 30% 0;

	                }

      }

...and while it has improved the positioning of the image in mobile view, the background-size: cover does not appear to be making the image(s) responsive for some reason. I even tried to add in media queries that load separate images @ different viewport widths, but the images were still not responsive.

I'm scratching my head on this one, for on Centric Pro (and on other non-WP sites) this technique seems to work just fine.

I wonder what I'm missing.....

Cheers:-)

[bluebird]

Thanks for taking the time to help me out Brad! This helps a lot.

Apologies for the delayed response. For some reason I have not been receiving responses via my email so I never knew that you had responded to me.

Cheers:-)

Juliette

[bluebird]

D'oh!

Thanks Victor!

[Author]

Posts