Changing properties of slider in a wordpress template.

[niwuc]

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: http://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.

[niwuc]

bump?

[niwuc]

bump one last time…

[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.

[niwuc]

Thank you so much Simon! I will be attempting this and will post my results.

[simoncmason]

Look forward to seeing them, shout if you get stuck.

[niwuc]

Working on this today, Changing the width and adding the max width does not seem to be changing anything.

[niwuc]

the slider also takes properties from the nivo slider (which is included), which also provides some JS. I’m guessing that this is the problem.

[niwuc]

Bump?

[simoncmason]

Do you have a link to the live site you are working on – I’ll try and take a look at it later today.

[davidb]

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

[Author]

Posts