[anindyaray]

I’m trying to implement parallax in bp-default theme’s header, but facing problem …. I’m following the tutorial from the given link : http://designmess.com/tutorial/creating-sweet-header-effect-jquery-and-pngs

1. The page getting glitches, the adminbar is centre aligned but the rest of the content of the page is getting left aligned , the below image show the example ….
Uploaded with ImageShack.us

2. Cannot change the default header from the default.css file , though I change the background image url under #header to a different file in different location , the page shows the default_header.jpg in every circumstances, even though I hard-refresh the browser ….

the codes I’m using are as follows :

header.php
within the tag between the wp_head() and the end of the head tag I place …

jQuery(document).ready(function(){
jQuery('#parallax').jparallax();
});

and in the beginning of the tag just after the <div id="header"> I place

<div id="parallax">
<img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble3.png" />
<img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble2.png" />
<img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble1.png" />
</div>

and I use

/* Parallax START */

#parallax {
width: 960px;
height: 200px;
position: relative;
overflow: hidden;
margin: 0 auto;
}

/* Parallax END */

this css in default.css file

inspite of these problems the parallax animation is working just fine !

What am I doing wrong ?

[anindyaray]

can anyone help please ?

[anindyaray]

any help would be fine , please

[anindyaray]

@hnla
Kindly have a look into this topic, please

[Mike]

Gah! Parallaxes are fun and cool, but you’re adding some serious bloat to your code by doing this. Save yourself the trouble and just stick with the static version. It’ll be less of a headache for you and your users (think about the various browsers, platforms and versions you’d have to support first in order for everyone to see the same thing… lotsa hacking and sleepless hours ).

[anindyaray]

thank for the suggestion but I actually want a solution for these problem, later will be thinking about supporting browsers …
is there anybody to actually provide some help in these issue ?
I’m testing this in localhost ..

[@mercime]

@AnindyaRay I see that you’ve found a header parallax tutorial. The thing is, since you’re on localhost, it’s not as easy to ID the exact corrections which would give you a fix for what’s there in the image you uploaded. That being said, my stab in the dark is adding the following style to your child theme’s stylesheet
`body {
max-width: change to 960px;
}`
which will override the parent theme’s max-width of 1250px

If that doesn’t work, install the Firefox add http://getfirebug.com/ to find styling fix

[anindyaray]

thanks @mercime
actually I was using this .
“
and it was creating the problem , now after I removed this line , its all ok ….

but the other problem I mentioned about unable to change the default-header.jpg image from the default.css #header , it still persist …

can you please show me some light ?

[@mercime]

BP Codex is your friend. Disable the custom header functionality on the default BuddyPress theme … add the following to your wp-config.php file:
`define( ‘BP_DTHEME_DISABLE_CUSTOM_HEADER’, true );`

[mira360]

i make a child theme to parallax header, but the problems come later.

the z-index of my header put all popup divs under the body, and a i have not a solution at the moment for this.

You will have many problems with the plugins if use parallax header.

this is the link to download my custom theme (parallax) is a child of bp-default theme.
http://www.tropicthunder.com.es/bp-parallax.zip

¿anybody have a solution for this problem on a child theme.?
I think Parallax have many posibility of dinamic header for bp.