Jump to content


Photo
- - - - -

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


  • Please log in to reply
3 replies to this topic

#1 kate1000

kate1000

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 03 May 2013 - 03:21 PM

live chat sent me to css school3 -

Please Login or Register to see this Hidden Content

and

Please Login or Register to see this Hidden Content

 

 

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!

thanks



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 May 2013 - 08:40 PM

Hi there,

 

In order to get the effect you want I would suggest using the Slider from

Please Login or Register to see this Hidden Content

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 -

Please Login or Register to see this Hidden Content



#3 kate1000

kate1000

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 04 May 2013 - 05:49 PM

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)

Please Login or Register to see this Hidden Content

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

 

Thank you for your time and help

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  156.7KB   5 downloads

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  1.38KB   1 downloads



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15084 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 May 2013 - 08:09 AM

Hi,

 

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.

 

Please Login or Register to see this Hidden Content

 

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