Re: Changing properties of slider in a wordpress template.

[simoncmason]

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.