WordPress.org

Forums

Customizr
[resolved] Is it possible to change slider width/height for posts and pages (5 posts)

  1. ashtonej
    Member
    Posted 2 years ago #

    I'd like to be able to change the slider width and height for posts and pages.

    The template (which is very good) seems only to have one setting that applies to everything.

    I have full width x 384px for the front page.

    I'd like to be able to put container width x 225px (or there abouts) for pages and posts.

    Can you guide me to either a code snippet fix or the part of the template I need to change to make this happen?

    Thanks, Jim

  2. tomaja
    Member
    Posted 2 years ago #

    It is possible, you can use something like this for specific posts/pages e.g.

    /* for specific post */
    .postid-33 #customizr-slider.carousel .item {
    height:         230px;
    min-height:     230px;
    line-height:    230px;
    }
    /* for specific page */
    .page-id-12 #customizr-slider.carousel .item {
    height:         230px;
    min-height:     230px;
    line-height:    230px;
    }

    To determine what is specific id for post or/and page use page source view option in your browser.
    If you wish to use it on all posts and pages than just .page or .single should be enough

  3. ashtonej
    Member
    Posted 2 years ago #

    Hi tomaja. Thanks for the tip.

    Based on your code, I ended up with the following which works great for my pages and posts.

    Image size 980 x 225, centred with a small gap under the lower header border.

    Jim

    .page #customizr-slider {
    top:10px;
    width:980px;
    height:225px;
    margin-left:auto;
    margin-right:auto;
    }

    .page #customizr-slider.carousel .item {
    min-width:980px;
    min-height:225px;
    height:225px;
    line-height:225px;
    }

    .single #customizr-slider {
    top:10px;
    width:980px;
    height:225px;
    margin-left:auto;
    margin-right:auto;
    }

    .single #customizr-slider.carousel .item {
    min-width:980px;
    min-height:225px;
    height:225px;
    line-height:225px;
    }

  4. tomaja
    Member
    Posted 2 years ago #

    Nice to see that it works for you and thanks for the feedback.

  5. chappie
    Member
    Posted 2 years ago #

    I'm obviously making some errors when I try to adapt this code for my site - as can be seen by the acres of white space around my skinny slider:

    http://s1008.photobucket.com/user/3785/media/public/shallow_slider.png.html

    Here's my/your code and my (full-height) slider looks exactly the same with or without it:

    /* shallow slider for one page + posts */
    
    .page-id-171 #customizr-slider {
    
top:10px;

    width:1170px;

    height:181px;

    margin-left:auto;

    margin-right:auto;

    }
    .page-id-171 #customizr-slider.carousel .item {

    min-width:1170px;
    
min-height:181px;
    
height:181px;
    
line-height:181px;
    
}
    .single #customizr-slider {

    top:10px;

    width:1170px;

    height:181px;

    margin-left:auto;
    
margin-right:auto;
    
}
    .single #customizr-slider.carousel .item {

    min-width:1170px
    ;
min-height:181px;
    
height:181px;
    
line-height:181px;
}

    What did I do wrong?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic