Jump to content
Sign in to follow this  

feature slider / make vertical / make 1/3 page width

Recommended Posts


live chat sent me to css school3 -

http://www.w3schools.com/cssref/pr_dim_width.asp and http://support.pagelines.me/docs/customization/custom-css/



I really need a cheat sheet or a step by step


to know how to firsrt make the slider about this ratio

600px widex 800px long ( I am just guessing at size)


I am familir with div and css BASIC but am an artist.. so Im a simple simple code person. not a develper.


can someone send me an example of code for a slider / the css / and I can play around to figure it out


would I  name the slider someplace? then css cusomize plugin  call it #nameofslider

then css that?


how does the page know to do it? I have never sucessfully been able to use the # to change a page yet.

Thanks for any time and hlep you may offer.

below is the effect - the page is that wall paper backgound.. and so it looks like a spotlight but it changes

to show 4 toher slides that are similar in set up not content.


I would like to make the bacgound look like a soloon wall, ( kitchy) and have this slider .. to the right 1/3 of the page

I am out of my league but not my mind! I have so many ideas that I could use if I could move this thing around!


Share this post

Link to post
Share on other sites
James B

Hi there,


In order to get the effect you want I would suggest using the Slider from http://demo.pagelines.me/tools/ inside the pagelines grid system which is also shown at the bottom of this page. Then you'll be able to restrict the shortcode activated slider into a specific width on the page and have your other content in a separate column to the left or right of the slider.


The slider is given a name in the css, you'll be able to find the ID or selector for this using a web inspector like firebug or chrome developer tools. For example #features is the main id for the feature slider. You're unable to provide the sections with a custom name.


The page is rendered in html, which has all the relevant code inside for the names of the sections and features. By looking through the html code you'll be able to find the relevant css which applied to the html code. If you've not used css inside the framework before please take a look at our overview at - http://support.pagelines.me/docs/customization/custom-css/

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Thank you for that tools page !

good stuff!


So i got as far as this firebug

please see attachment


so using this firebug as you suggested I have come up with two ideas that both didn't work


Maybe you could let me know if I am even close or on the path to successfully naming the slideshow in html and css

so that I can get to moving over and resizing ( im using the box model css - it seem so make sense - but not sure on that)

I am not sure how to show a pastebin so i attached it as well as iframe


Thank you for your time and help


Share this post

Link to post
Share on other sites



If you're unsure how to use Firebug, I recommend you use Google Chromes web developer tools instead, in my opinion it's easier and better to use. There is also, an extremely awesome free online course which I highly recommend you check it out.




By the end of this course (which is mainly videos and a few quizes) you should be a dev tools ninja.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this