reduce slider size

  • peterbowes · Member ·

    It’s a little on the big side and could do with some reduction. Linen theme. I have CSS.

    The blog I need help with is: (visible only to logged in users)

  • designsimply · Member ·

    I checked out the slider in the Linen demo at http://linendemo.wordpress.com/

    I really like the size personally! However, you can probably make some changes to it using CSS. There could be a couple ways to do it. One would be to just make the entire slider area smaller. Another would be to make the entire content area container width smaller. Which one of those were you thinking of?

  • peterbowes · Member ·

    hiya staff .. howabout both, so I could test and try

  • designsimply · Member ·

    What I can do is give you some CSS to illustrate how these things work, and you can take it from there.

    I will start with an example of making the whole slider smaller:

    .slides_container {
	width: 800px;
	height: 258px;
}

#slides div.slide {
	top: 60px !important;
	left: 990px !important;
}

.slide img {
	width: 430px;
}

.slide-content {
	width: 410px;
	height: 200px;
}

.slide-content p {
	width: 200px;
	height: 125px;
	overflow: hidden;
}

    You will need to adjust all the number values to your liking. Note that some elements won’t look exactly the same in this example compared to the main posts. For example, I chose to cut of the paragraph text on the right in order to make it so the text doesn’t fall too far into the new margin constraints and look funny.

  • designsimply · Member ·

    Next, to adjust the width, I started with this:

    #wrapper, #footer {
	width: 760px;
}

    Change the “width” value to 700px for the “.slides_container” block to adjust the middle part of the slider

    Change the “left” value to 900px in the “#slides div.slide” block to move it each slide over to the left.

    And add this to move the side navigation arrows around so they’re snug against the main container area:

    #slides a.prev {
	left -20px;
}

#slides a.next {
	left: 730px;
}

    Here’s the adjusted CSS example:

    .slides_container {
	width: 700px;
	height: 258px;
}

#slides div.slide {
	top: 60px !important;
	left: 900px !important;
}

.slide img {
	width: 430px;
}

.slide-content {
	width: 410px;
	height: 200px;
}

.slide-content p {
	width: 200px;
	height: 125px;
	overflow: hidden;
}

#wrapper, #footer {
	width: 760px;
}

#slides a.prev {
}

#slides a.next {
	left: 730px;
}

    To be honest, working on the Linen slider seems fairly tricky to me and I’m not sure if this is the best possible way to do it, but it does work and should serve as a starting point if you’d like to make further adjustments to it.

    If getting help with more in-depth design changes by hiring a designer sounds like something you might be interested in, I would recommend starting with this link: http://en.support.wordpress.com/customize-my-site/request-theme-customization/

  • peterbowes · Member ·

    thanks for that, and yes, it’s a little complex

  • The topic ‘reduce slider size’ is closed to new replies.