Slider modifications

  • Anonymous

    #5231

    Hey,

    I’m currently building a new site (the link in my profile) and I’m almost done, but the slider needs some work.

    Here are the modifications I would like to make:

    1.) To have the text size and spacing in the slider the same as the excerpts underneath it (which is 14px font size and 1.5em spacing).

    2.) I would like the background of the slider to be a colour, maybe #eeeeee.

    3.) I notice that on his website, Prasanna has managed to centralise, and change the colors of, his slider buttons. How can that be done?

    http://www.prasannasp.net/

    4.) Finally, I would like to centralise the post titles in the slider, and also increase the space between the title and the post excerpt.

    If anyone can help me with one or more of the above modifications, that would be great!

    Thanks.

    Anonymous

    #31230
    Quote:
    To have the text size and spacing in the slider the same as the excerpts underneath it (which is 14px font size and 1.5em spacing).

    .slider_post_entry p {
    font-size: 14px;
    line-height: 1.5em;
    }

    Quote:
    I would like the background of the slider to be a colour, maybe #eeeeee.

    .slider_post {
    background: #eeeeee;
    }

    Quote:
    I notice that on his website, Prasanna has managed to centralise, and change the colors of, his slider buttons. How can that be done?

    Make two small images of 12X12px, one for all and the other for current and hover states. Then use this CSS.

    For general buttons,

    .slider_nav a,
    .slider_nav a:visited {
    background: url("http://your-custom-slider-icon.png") no-repeat;
    }

    and for current and hover states,

    .slider_nav a.active,
    .slider_nav a.active:visited,
    .slider_nav a:hover {
    background: url("http://your-custom-slider-hover-icon.png") no-repeat;
    }

    Replace background url with the correct ones.

    In my case, I’m using a sprite image for slider buttons. So, there are no two images. Here is my sprite image, and CSS.

    To centralise the slider buttons, I use this CSS, (You need to change padding value to centralise in your site)

    .slider_nav {
    padding-right: 274px;
    }

    Quote:
    Finally, I would like to centralise the post titles in the slider, and also increase the space between the title and the post excerpt.

    .slider_post h2 {
    padding-bottom: 10px;
    text-align: center;
    }

    Anonymous

    #31231

    That’s perfect Prasanna, thanks!

    Anonymous

    #31232

    You may need to change slider_nav right padding to 232px.

Viewing 4 posts - 1 through 4 (of 4 total)

  • You must be logged in to reply to this topic.