Triton lite slider size

  • Unknown's avatar
    irfarious · Member ·

    Is there anyway to increase the size of the slider in the triton lite theme using css or any other means?

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

  • Unknown's avatar
    irfarious · Member ·

    Anybody???

  • Unknown's avatar
    musicdoc1 · Member ·

    Hi,
    On both the Triton Lite demo page, and the test website that I created to test this theme, the post slider, and the three columns of posts, each fill at least 90% of my monitor screen (12″ wide, 4:3 aspect ratio, 1024 X 768 pixels). On your site, on the other hand, both the post slider and the combined width of the columns, is considerably narrower. In other words, the left and right margins on your front page are much larger than in the other two cases. I haven’t figured out why.

    On my test site, the front page width (post slider and columns) is the same whether I set the front page to display the latest posts or a static front page.

  • Unknown's avatar
    musicdoc1 · Member ·

    @irfarious,
    On thereddotman.com, the width of the post slider and the columns is only about 75% of the screen width (9/12ths) on my monitor, compared to about 90% in the other two cases.

  • Unknown's avatar
    irfarious · Member ·

    So I guess trimming the margins should make them look bigger, right? Know a way of doing this?

  • Unknown's avatar
    musicdoc1 · Member ·

    Very sorry, apparently I made an error. Perhaps I had inadvertently had the zoom settings changed when I came to your site. Now yours looks the same as the other two.

  • Unknown's avatar
    musicdoc1 · Member ·

    So I guess trimming the margins should make them look bigger, right? Know a way of doing this?

    I believe it’s possible with CSS customization. I do not know how to do this.
    I agree that Portorico’s post slider, as you suggested in the earlier thread, is an attractive alternative.

  • Unknown's avatar
    irfarious · Member ·

    I was just fiddling with fire bug, I noticed that I could trim the eight side of the margin. But the slider is still of the same size.

    I don’t want to use pictorico because it does not support a sidebar. That’s why I looking at increasing the slider size of triton. If you figure out a way, let me know.

  • Unknown's avatar
    musicdoc1 · Member ·

    @irfarious,

    If you figure out a way, let me know.

    Will do. But I’ll confess that I’m very much lacking in CSS customization knowledge. You might want to resubmit your question regarding increasing the size of the post slider to the CSS Customization support forum.

    I don’t want to use pictorico because it does not support a sidebar. That’s why I looking at increasing the slider size of triton.

    Understand about the sidebar requirement. You might have already looked at all the other Post Slider theme options. Among the other free ones I didn’t find any that appeared comparable to Triton Lite yet with a larger slider.

    Premium Themes

    Among premium themes I saw several which might be suitable, including the following:

    • Broadsheet — almost full-width slider, nice design, but images appear oddly faint
    • Chronicle — 90% full-width slider
    • Organization — over 90% full-width, tall slider
    • Outspoken — ~85% full-width, tall slider
      Purpose and Collective themes — full-width, very tall post slider, but not a magazine-style* layout
    • tdEditor — slider is about the same width as that of Triton Lite, but somewhat taller

    *WordPress magazine style themes (57): http://theme.wordpress.com/themes/subjects/magazine/

    Good luck!

  • Unknown's avatar
    musicdoc1 · Member ·

    Forgot to provide this link: CSS Customization support forum. Click “add new” to post a topic there.

  • Unknown's avatar
    chaserobertson · Member ·

    Hey irfarious,

    In order to increase the slider width,
    there are a few pieces of code to edit.

    #slider-wrapper {
clear: both;
margin: 0 auto;
padding-top: 20px;
<strong>width: 960px;</strong>
}

.featured-posts {
clear: both;
position: relative;
overflow: hidden;
<strong>width: 950px;</strong>
}

div.featured {
<strong>height: 270px;</strong>
margin: 0;
width: auto;
}

img[Attributes Style] {
<strong>width: 950px;
height: 270px;</strong>
}

    The bold items are the ones you want.

    I’ve already made adjustments to the code below,
    so you can copy/paste into your website.

    (You’ll want a child theme for this when you go premium.)

    But for now, here:

    #slider-wrapper {
clear: both;
margin: 0 auto;
padding-top: 20px;
width: 1150px;
}

.featured-posts {
clear: both;
position: relative;
overflow: hidden;
width: 1140px;
}

div.featured {
height: 300px;
margin: 0;
width: auto;
}

img[Attributes Style] {
width: 1140px;
height: 300px;
}

    Or if you want full-width:

    #slider-wrapper {
clear: both;
margin: 0 auto;
padding-top: 20px;
width: 100%
max-width 1800px;
}

.featured-posts {
clear: both;
position: relative;
overflow: hidden;
width: 100%;
max-width 1800px;
}

div.featured {
height: 300px;
margin: 0;
width: auto;
}

img[Attributes Style] {
width: 100%;
height: auto;
}

    Let me know how these work for you!

    If you have any questions,
    feel free to contact me anytime.

    [Personal details redacted by staff]

    All the best,

    Chase R.

  • Unknown's avatar
    irfarious · Member ·

    @chaserobertson, thank you so much for your code. It shone like a ray of hope in the dark css cave of my blog. Sorry for the late response though.

    I copied your code. The full width one.

    What happened was, the featured post slider did increase but it did not increase the width of the image. I thought may be it’s because of the image size and so uploaded a bigger featured image, but still it doesn’t increase. Also, it’s incredibly increasing the content width. I mean it gives a scroll bar at the bottom of the window, moving the scroll bar to the right reveals a lot of unwanted empty space.

  • Unknown's avatar
    irfarious · Member ·

    Ok, just scratch out what I said earlier. I tried your fill width code and it works. It’s increasing the width of the slider, however, the featured image is not resizing. Even if I upload a bigger resolution image. I guess it has to do something with the last part of your code.

    img[Attributes Style] {
width: 100%;
height: auto;
}

    I am not find this in my site’s css. And adding it is not affecting in anyway.

  • Unknown's avatar
    irfarious · Member ·

    So I make a teeny tiny change to your code and it worked 

    a img {
	width: 100%;
	height: auto;
}

    But it’s not perfect yet. Things that are yet to be taken care of

    1) The original image size of the slider which is supposed to be 950px in width is getting stretched across the screen. But it’s not increasing the size of the image it self. I have set the featured image of size 1920 px in width, but the slider is cropping it to 950px and stretching it on the screen for full width. How do I override the cropping which this slider is doing to use the original image size?

    2) The stretch is happening only to the featured image of the first post in the slider, when I move to the next post, the cropped 950px image is stuck to the top left corner of the slider.

    3) There is a thick dark line that runs at the bottom of the slider. It disappears the moment I click on the next post in the slider.

    I have tried multiple code combinations for hours but I am not able to figure out a fix for the above 3 issues.

  • Unknown's avatar
    designsimply · Member ·

    I think the slider question was answered at https://en.forums.wordpress.com/topic/slider-image-of-the-triton-theme?replies=6#post-2214274

    I also noticed that you’ve changed themes since you posted your last few questions. I see that http://thereddotman.com/ is using the Cubic theme now. I’m going to assume no further help with the Triton Lite theme is needed since you changed themes—but should you still need help with Triton Lite, please reply back here and let us know.

  • Unknown's avatar
    irfarious · Member ·

    Oh yes, sorry. Completely forgot about this topic. Since I had not got any reply to my older message I started a new thread about it and completely forgot. I will close this right now.

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