Group Mods

  • Profile picture of @mercime
  • Profile picture of r-a-y
  • Profile picture of Hugo

How to make a Header like techboise.com (7 posts)

Started 1 year, 5 months ago by: anindyaray

  • Profile picture of anindyaray anindyaray said 1 year, 5 months ago:

    among many http://techboise.com is the most great looking buddypress based website in internet.
    My question is how to make a techboise like header section with movable images and all you see on the base of buddypress default theme ?
    there are many people who would like to have such or near such website look of thier own buddypress based website ?

    can anyone put a guide or something for this ?
    Thank in advance ….

  • Profile picture of LPH2005 LPH2005 said 1 year, 5 months ago:

    Unfortunately the site does not load. Maybe they are doing some maintenance.

  • Profile picture of anindyaray anindyaray said 1 year, 5 months ago:

    for me its loading great , don’t what the issue , but this site has one of the beautiful theme on the platform of buddypress default theme …

  • Profile picture of LPH2005 LPH2005 said 1 year, 5 months ago:

    The site loads fine this morning.

    YelllowBox has a small write up: http://yellowboxstudio.com/blog/techboise-boise-web-design/

    Here is the css for the parallax script:

    #parallax-images {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	overflow: hidden;
    	width: 100%;
    	height: 400px;
    	margin: 0px auto;
    	background: url('images/parallax/skyblue.jpg') no-repeat top center;
    	}
    	.buildings { width: 2200px; height: 219px; padding-top: 90px; text-align: center;}
    	.mountains1 { width: 2200px; height: 221px; padding-top: 110px; text-align: center; }
    	.mountains2 { width: 2200px; height: 167px; padding-top: 75px; text-align: center; }
    	.balloons { width: 1900px; height: 158px; } .balloons img { position: absolute; right: 250px; }
    	.clouds { width: 2200px; height: 336px; text-align: center; }
  • Profile picture of anindyaray anindyaray said 1 year, 5 months ago:

    @LPH2005 Thanks a lot for your quick response ….

    I went through the yellowboxstudio.com’s write-up on techboise.com .. Its nice….

    But a step-by-step guide to implement jquery parallax on buddypress-default theme like techboise would be great

    note: as I couldn’t understand how a single jpg file would do such thing (as only one jpg image is address in the css) when yellowboxstudio’s wrtie-up say the concept of 4 layers

  • Profile picture of anindyaray anindyaray said 1 year, 5 months ago:

    please have a look
    thank you

  • Profile picture of @mercime @mercime said 1 year, 5 months ago:

    @AnindyaRay There are at least 4 overlapping images in the background. Search for “parallax jquery” and you’ll get different ways to create that effect including one for parallax in header only. The trick is making sure that it won’t conflict with WP