WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Tip: Custom CSS to modify size of slider images (22 posts)

  1. linkomatic
    Member
    Posted 1 year ago #

    FYI...my customer likes this theme a lot, but wanted to reduce the height of the slider (carousel) images -- they felt that 500px was taking up too much screen real estate. Here's a little custom CSS you can add to reduce the height to, say, 300px:

    .carousel .item {
      line-height: 300px;
      overflow: hidden;
      min-height: 300px;
    }

    They also wanted to reduce the size of the gray background that appears behind the slider title/caption/button. Here's how to do that:

    .carousel-caption {
      padding: 1%;
    }

    When you do this, you also might want to change the size of the fonts used in the title/caption. I'll leave that as an exercise for the reader.

    Nikeo: Please advise if there is anything wrong with what I've shown here. Thanks!

  2. linkomatic
    Member
    Posted 1 year ago #

    One additional comment about this: while this solution seems to work okay when viewing the site on a PC-sized screen. It's not so good on smaller screens -- the smaller the screen, the more white space appears between the slider and the elements above and below it.

    Nikeo: can you suggest other custom CSS that would this problem? I'm stretching the limits of my CSS expertise! Thanks again for all the great support.

  3. tgd
    Member
    Posted 1 year ago #

    For responsive themes like this, you should stick to percentage values or rem values instead of pixels. You're also suggesting a min-height, when perhaps, you should suggest a max-height. Also, if this theme does use Bootstrap, and has all its features, there are some great css classes within Bootstrap that could be of some help.
    Nice looking theme. Can't wait to try it.

  4. linkomatic
    Member
    Posted 1 year ago #

    Well, tgd, I'm just substituting new values for the code that appears in the theme itself, which are "hard-coded" as 500px. So, if there's a better way to do this, perhaps nickeo wants to address that. I'm not aiming to be a theme developer, myself. Cheers!

  5. edward.grossman
    Member
    Posted 1 year ago #

    This is a great tip thank you.

    It would be wonderful if Cusomizr had full-blown documentation on typical mods like this for the slider - e.g. make it take up half the space, make it taller, less tall, centered, etc. Happy to play with it, but if anyone has a list of key variables, that'd save a ton of time for a ton of us using this great theme.

  6. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Hi,
    I will improve the documentation on those points.
    Thanks for using Customizr

  7. WadeKeller
    Member
    Posted 12 months ago #

    Is the slider good for others and bad for me?
    It looks good on the demo, but...
    No matter what I do the image on the slider is cropped top and bottom. Looks like about 15% off the top, 15% off the bottom and I have the middle 70% in full width.

    Please, how can this be fixed?

    wade keller
    marco island, FL

  8. AngeloLazzari
    Member
    Posted 10 months ago #

    Hi,
    i put this css to increase the slider height but, although i have an image of 1200x900 it still appears with bands on the top and bottom of the image.

    .carousel .item {
    line-height: 600px;
    overflow: hidden;
    min-height: 600px;
    }

    How i can fix this problem? Is there a maximum or minimum image size?
    Thanks

  9. rdellconsulting
    Member
    Posted 10 months ago #

    Recommended sizes are 1200x500 (Full width) and 1170x500.

  10. geothom
    Member
    Posted 10 months ago #

    Hi, newby here (both to this site and WordPress). I have opted for Customizr theme but am having trouble with the slider (main) size on the front page - it's too large. Did have it OK but then I added/removed some pics and now the featured Pages don't show without scrolling down. Have tried adding the code suggested above. Here is mine added to the Custom CSS code:-

    /* Adjust the Slider Height */
    .main .item {
    height:        134px;
    width:         54px;
    min-height:     134px;
    line-height:    134px;
    }

    Site is http://www.poncesuiteshotel.com

  11. Nufvmedia
    Member
    Posted 7 months ago #

    Hi, apologies for what probably sounds naive but so far I haven't found an explanation. As I understand it the Customizr theme has 3 image sizes as described in Images section - slider full width, slider boxed and thumbs.

    WordPress also has under Settings, Media three image sizes - thumbnail, medium and large size. I presumed these would be used when images are uploaded but I don't think this is the case. Where are these settings used please?

    Also if you want to use the same image - but with say 4 different sizes (slider, large, medium and thumb) do you have to load 4 versions of the image in their different sizes? Or with Customizr do you have say two image sizes - slider and thumbs (feature) and then if you want to use another size of image say within a post/page say 500px wide, do I need to upload this as well? I appreciate that one can 'resize' the image in the WordPress editor but for speed purposes should I upload the image in all the right dimensions?
    Hoping someone will point me in the right direction.
    Christine

  12. ElectricFeet
    Member
    Posted 6 months ago #

    Upload a reasonably large image and Customizr/Wordpress will create the other versions.

  13. Nufvmedia
    Member
    Posted 6 months ago #

    Thanks ElectricFeet (do they tingle BTW?) I have just managed to find reference to the fact that WordPress does this. Seems such a hard find piece of information and yet quite important. Anyway Thank you for replying.

  14. Larry34
    Member
    Posted 6 months ago #

    Is there a code that makes the slider responsive after the height has been adjusted?
    I feel like i found that in the past, before i was ready to do such a thing, but can't now

  15. Delyser
    Member
    Posted 5 months ago #

    I was able to adjust the height of the slider, using the code below

    /* Adjust the Slider Height */#customizr-slider.carousel .item {height: 300px;min-height: 300px;line-height: 300px;}

    However, I need the transparent screen with the text and button to be centered in the newly sized image. Right now, it's cut off on the bottom. Failing that, is there a way to resize the transparent screen/text area so that it, too, is shorter?

    PLEASE HELP! Entering crisis mode!

  16. rdellconsulting
    Member
    Posted 5 months ago #

    @Delyser, Moderator will chastise you for hijacking a topic. Start a new topic and include a link to your site.

  17. Pacs32
    Member
    Posted 5 months ago #

    What are the recommended sizes for images.
    I am using the customizr slider on my homepage, and have used different sized images and doesn't matter the size of images the quality is poor once in slider

  18. rdellconsulting
    Member
    Posted 5 months ago #

    Please post a new Topic, but look here first.

  19. Pacs32
    Member
    Posted 5 months ago #

    My apologies rdellconsulting and thanks for link

  20. Tantalus
    Member
    Posted 4 months ago #

    I want to delet the black bar (=description) on each picture (slides).

    I paste the following CSS code to remove the featured text on slider:

    .featured-text {
    display: none;
    }

    But It will not work. The bar is always shown...

    Please can anyone help me, to delete the description bar on the pictures. It appeard also when the description field is emty...

  21. d4z_c0nf
    Member
    Posted 4 months ago #

  22. rdellconsulting
    Member
    Posted 4 months ago #

    Just noticed an omission in the Glossary if you mean the shaded area?

    .carousel-caption {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic