Creating & Extending

Viewing post 1 to 10 (10 total posts)

Problem Implementing parallax in header of bp-default theme (10 posts)

Started 1 year, 5 months ago by: anindyaray

anindyaray said 1 year, 5 months ago:

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 <head></head> tag between the wp_head() and the end of the head tag I place …

<script type="text/javascript" src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/jquery.min.js"></script&gt;
    <script type="text/javascript" src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/jquery.jparallax.js"></script&gt;
    <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('#parallax').jparallax();
    });
    </script>
    <link rel="stylesheet" type="text/css" href="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/reset-min.css"&gt;

and in the beginning of the <body> 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"/&gt;
            <img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble2.png"/&gt;
            <img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble1.png"/&gt;
        </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 said 1 year, 5 months ago:

can anyone help please ?
anindyaray said 1 year, 5 months ago:

any help would be fine , please
anindyaray said 1 year, 5 months ago:

@hnla
Kindly have a look into this topic, please
Michael Kuhlmann said 1 year, 5 months ago:

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 =P).
anindyaray said 1 year, 5 months ago:

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 said 1 year, 5 months ago:
@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 said 1 year, 5 months ago:

thanks @mercime
actually I was using this .
<link rel="stylesheet" type="text/css" href="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/reset-min.css">
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 said 1 year, 5 months ago:

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 said 1 year, 5 months ago:

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.

Viewing post 1 to 10 (10 total posts)

BuddyPress

Group Mods

Support: Creating & Extending

Problem Implementing parallax in header of bp-default theme (10 posts)

Create Account

Support Forums

Gallery

How-To and Troubleshooting

Installing BuddyPress

Localization

Miscellaneous

Requests & Feedback

Third Party Components & Plugins

Hot Tags

Log In

Bugs