Basically I'm designing a website and I'm using the custom wordpress theme "Pitch" (http://siteorigin.com/theme/pitch/) as my template. What I am trying to do is to get the slider of the template to behave like the slider for this website: www.blitzagency.com.
I'm wondering if this is feasible? Is it just a matter of CSS? My coding skills are pretty rudimentary so this may be above my skill level. I'm pretty confident that I'd be able to alter the design of everything else on the page through CSS, but not the slider positioning and functions.
So you want the slider to go under the logo and menu area? Do you also want the vertical scrolling where each section resizes to the viewport? To do the second bit you will have to use some javascript.
But if you only want to make the slider fit under the rest of the content you can do this entirely with css as the pitch theme helpfully doesn't wrap the #slider inside anything else.
To do it you first of all need to make the slider big enough to fill the screen so set your body to width:100% then set your slider to 100%. Make sure you have this rule in your style sheet - img {max-width:100%} and then use a really nice big image so it will fill the screen on even large monitors - you may want to host this on a cdn and spend some time carefully optimising it so your page load time isn't too horrible.
Once that is done you can use position absolute to move your #topbar, #logo and #mainmenu down the page from where they would sit in the normal flow and give them a positive z-index so they sit over the top of the slider.
i.e. #topbar {position:absolute; top:100px; z-index:10;} - you can play with the amount of pixels in the top rule to get everything sitting where you want (you can also use left:??px or right??px if need be).
Then bring the other bits up also using position absolute so they also sit on top of the slider i.e. #call-to-action {postition:absolute;bottom:100px;z-index:10;}
Then just play with the position values to get everything looking how you want, you could try using percentage values instead of px if you want a more fluid layout which will work better across more screen sizes but be prepared for some frustration if you go down this route - it's a learning curve!
If you want the nice horizontal scrolling effect where you scroll each section of the website up to fit the view port that requires some nifty js and css work and is a whole other ball of wax.
Currently I'm designing a website and I'm using the custom wordpress theme "Pitch" (http://siteorigin.com/theme/pitch/).
I like the slider (nivo slider) on the front page.
But I would like to disable it on the other page. Actually when I add a gallery with JET PACK plugin (to have a tile configuration and when you clic on the image you have a carousel in full screen) I have a slider ...
I think the nivo is activated on all the page.
And I would like to have it just only on the front page.
Do you know how I can disable the nivo slider on the others pages ?
I'm wondering if this is feasible? Is it just a matter of CSS? My coding skills are pretty rudimentary so this may be above my skill level. I'm pretty confident that I'd be able to alter the design of everything else on the page through CSS, but not the slider positioning and functions.
But if you only want to make the slider fit under the rest of the content you can do this entirely with css as the pitch theme helpfully doesn't wrap the #slider inside anything else.
To do it you first of all need to make the slider big enough to fill the screen so set your body to width:100% then set your slider to 100%. Make sure you have this rule in your style sheet - img {max-width:100%} and then use a really nice big image so it will fill the screen on even large monitors - you may want to host this on a cdn and spend some time carefully optimising it so your page load time isn't too horrible.
Once that is done you can use position absolute to move your #topbar, #logo and #mainmenu down the page from where they would sit in the normal flow and give them a positive z-index so they sit over the top of the slider.
i.e. #topbar {position:absolute; top:100px; z-index:10;} - you can play with the amount of pixels in the top rule to get everything sitting where you want (you can also use left:??px or right??px if need be).
Then bring the other bits up also using position absolute so they also sit on top of the slider i.e. #call-to-action {postition:absolute;bottom:100px;z-index:10;}
Then just play with the position values to get everything looking how you want, you could try using percentage values instead of px if you want a more fluid layout which will work better across more screen sizes but be prepared for some frustration if you go down this route - it's a learning curve!
If you want the nice horizontal scrolling effect where you scroll each section of the website up to fit the view port that requires some nifty js and css work and is a whole other ball of wax.
Hi,
Currently I'm designing a website and I'm using the custom wordpress theme "Pitch" (http://siteorigin.com/theme/pitch/). I like the slider (nivo slider) on the front page.
But I would like to disable it on the other page. Actually when I add a gallery with JET PACK plugin (to have a tile configuration and when you clic on the image you have a carousel in full screen) I have a slider ... I think the nivo is activated on all the page. And I would like to have it just only on the front page. Do you know how I can disable the nivo slider on the others pages ?
thanks