Slider height?

Hi Cjcornell2

This post does really help me, and I am not experienced in ‘fiddling’ as assumed above.

Sorry to seem dumb but can you clarify where in the style sheet this code goes?

@cjcornell2 Thanks for that!

If it makes you feel any better, this hasn’t been posted before on this forum, so no one could probably have easily helped you. We’ve simply discussed with the developer how it would be good to have a setting for the height. So thanks for helping us! ??

@nataliepee You can add this to Customiz’it! > Custom CSS, or a child theme.

@electricfeet
Thanks… No, it doesn’t make me feel that much better because the issue I had (when I complained) was about “advice” that was more self-serving for the poster that actually helpful for the person asking the question. Most often this advice is from people who either did read the question thoroughly (and are answering some other question), or just from those [Remark moderated – Please don’t be nasty]. There aren’t many of those, but enough to be annoying, and to waste a lot of time.

@nataliepee
I use is a WordPress plug-in called “My Custom CSS Options”… Which allows me to add just the CSS I want from the WordPress dashboard.

I’m still playing with the Customizr theme CSS classes… But right now here’s what I have in my custom CSS:

.carousel-inner {height: 240px;}
.carousel-caption {height: 60px; vertical-align: top;}

I still have a few more tweaks and probably a few more other classes to modify before it really looks nice, but this is the start I would personally looking for from this forum.

I use is a WordPress plug-in called “My Custom CSS Options”… Which allows me to add just the CSS I want from the WordPress dashboard.

For info: Customizr has it’s own Custom CSS in Customiz’it! I guess a separate plugin gives you more portability though.

Cjcornell2 – so, so helpful. I’ve been looking for this for awhile. Many thanks!

Cjcornell2, thanks for the info. I’m also looking for this.

It takes some time to tune the two parameters for the actual images.
Then, the problem is: the caption parameter restricted the image height.

For example, I cannot extend the height of the image without increasing also the caption height. If I tune up both, it only works for a specific size of window. When you resize the browser window, the caption height remains which results in big gap between the image and the next section. Actually, the gap is even more when the
window size is smaller. That looks very odd to the user.

Anyone can help ?

Sorry I am new to wordpress and have no idea how to solve the problem.

Well, to fine tune the slider takes *some* extra CSS experience and tweaking some other CSS classes. I am tweaking a few extra ones myself.

The problem is that this slider mechanism in Customizr is pretty simple in the way it handles the slider (thus it makes it more complicated to customize it) – as evidenced by how complicated it is to even choose the photos for the slider. The problem is that the photos are meant to BOTH be used for “featured” graphics for posts (smaller) and for the huge slider area. This means that for most – it is stretching the photos quite a bit for the slider. So, if you *really* want to customize the slider, you should be creating very very special graphics just for the slider – or really doing a lot of customizing of CSS classes.

I am trying to investigate all the other classes that might need to be tweaked to make it perfect (but I am also considering creating custom slider graphics to make it simpler. I’ll post any new custom css code that I create.

Thanks Cjcornell2. Looking forward to seeing it.

I know you’re an expert and I’m only a newb, so forgive me if you know this already: I presume you know that the Customizr slider is the Twitter Bootstrap Carousel under the covers? Googling finds a lot of resources and info (here, for example)

Actually I didn’t know it was built with bootstrap until I saw some of the classes.

While this is of course useful (and would have been useful to know from the get-go), and there are some classes I can discover … the theme (particularly the slider) is somewhat tightly integrated with wordpress so it’s not a silver bullet to making this work. But if anyone has any insights, I too would be happy to seem them posted.

PS- I am not an expert – I just know enough to know when I am talking to an expert or know when I am being BS’d by one.

Cjcornell2, I am still trying to built a web site with this theme, the height of the slider is really a problem. In previous post, I tried only on the frontage. Now, when I set slider in other pages, all follow the same .css setting, so its looks ugly during resize for tall pictures. Also, the slide does not hold the aspect ratio of the pics.

So far, do you know of any cues for these problem ?

If you change “.carousel-inner” and “.carousel-caption”, you may have undesired effects on the responsiveness of the theme.

In the CSS, it looks like the height of the slider is set in
“.carousel .item” – as this is a responsive theme, and the height changes depending on the width of the browser, it is set 6 different times in the CSS with line-height and with min-height. (min-height obviously is for the image height and I assume line-height is used for proper vertical centering of the caption.)

If you search the CSS file for “.carousel .item {” and repeat the search, you will find the six places where the height is set. You may have to do a bit of math and experimentation to change to the proper values.

I’m not sure how changing this will affect other things, but it may be a start if you must change the height, but don’t want to break Nikeo’s excellent responsive theme.

My 2 cents…

Mike

OK. I don’t know CSS and am trying to work with this theme. So far, not too bad. After reading this entire string, I still have a question/comment.

If I know the height/width/length whatever of the slider area, can I just take pictures, adjust them to the correct size in picmonkey, and then upload them specifically for use in the slider?

Thanks!

Yes (assuming picmonkey allows you to resize and crop photos). 1170px x 500px is recommended by the theme author.

As said, one problem is the slider does not maintain the aspect ratio and stretch the photos.

Not all photo looks good with 117:50 aspect ratio. Some may be better display as tall one with empty space at both side (or part of previous/next photo at both side if the carousel can support).

Then, as this is a responsive theme, when you resize it large, it doesn’t always looks good for all cases with 1170 x 500 as limit. And that’s another reason I need to tune the height.

Thanks. Yes, picmonkey does allow that and more. But, I decided to simply find pics that would work. Thank you!