Jump to content

Archived

This topic is now archived and is closed to further replies.

stug

making the carousel bigger

Recommended Posts

stug

I have been trying to customize the carousel section. I have used firebug to determine stuff and managed to change the border and a few other bits (www.loveyogaanatomy.com). I was wondering if it is possible to make the section bigger as in higher. I see that you can set the max height of the Carousel Image Dimensions in the page setup which would suggest that it auto resizes depending on the image size, but it seems to stay the same for me. I wanted to make it about twice as high as it is as the moment, therefore showing bigger images.

I would also like to place a border around the area where the images display, and add a heading[attachment=1531:carousel.jpg]

Share this post


Link to post
Share on other sites
Danny

Hi,

 

From what I can remember, you can alter the max-width and max-height of your Carousel thumbs by going to Carousel section settings.

 

In regards to your border, you can do this with custom CSS, inspect the Carousel section using Chromes web dev tools. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stug

Hey Danny, yes I did that but the carousel stays the same height.

Are the tools in chrome better than firebug for inspecting the carousel?

Share this post


Link to post
Share on other sites
Rob

Not necessarily better, but each picks up some different elements on occasion.

 

You can also clone the carousel section to a child theme, and check the section.php to see if it's hardcoded.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
stug

Hmm no, that is beyond me to start messing with that.

Share this post


Link to post
Share on other sites
Jake

Hi stug - I believe the issue you're having is a result of the default thumbnail size in WordPress. Try navigating to your WP Dashboard - Settings -  Media and increasing the thumbnail size in there. You'll then want to either upload new featured images to each post or use a plugin like http://wordpress.org/plugins/regenerate-thumbnails/ to get the larger size to take effect.

 

For your border, try entering the following custom styling:

 

.section-carousel .jcarousel-clip-horizontal {border: 2px dashed;}


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
stug

Thanks Jake, the code worked a treat, once I know the address so to speak I can adapt it. Sorry I have to be spoon fed. Is it possible to put a heading in the carousel so people know what they are looking at?

Will try with the thumbs next.

Share this post


Link to post
Share on other sites
Jake

Hi stug - I'm glad we've got you going in the right direction! For the carousel header, you could go the route that Rob had suggested and clone the section with a child theme. But for an easier option, I'd suggest using the Highlight section. Drag that into the homepage template above where you've got the carousel and just enter text, no image, I think that will accomplish what you're looking for.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
stug

Yes like the highlight section idea. simple is always better. thumbs not working though, have changed the size as suggested and used the pluggin to resize, but carousel remains the same height. Hey Jake would you mind looking at the post I made a few days ago about additional comment areas?

Share this post


Link to post
Share on other sites
Danny

Your images have the following dimensions hardcoded:

 

max-height: 250px;
max-width: 64px;
}
 
Therefore, you will need to make sure that your thumbnail sizes do not exceed these sizes. You will also probably need to regenerate your thumbs using the following plugin - http://wordpress.org/plugins/regenerate-thumbnails/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stug

Hey Danny do you mean hardcoded in the carousel section or because that is what I had it set to when I first created the thumbnails. I changed the thumbnail size to 250 x 250 in the media settings and regenerated them using the pluggin but now I have different sized thumbnails in the carousel.

Share this post


Link to post
Share on other sites
Danny

Remove the max-width, max-height from the Carousel settings, as having your thumbnails set larger than your max-width, max-height is probably causing a conflict or set them to the same as your thumbnail sizes.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stug

Ok Danny, that sorted out the conflict. So now all the images are the same size in the carousel, but the carousel is still the same size in height. I suddenly thought it might be to do with the number of images I had choosen to display in the carousel, but I reduced that and it made no difference.

Share this post


Link to post
Share on other sites
James B

Hi there, the following worked for me when adjusting the size of the images inside the carousel.

 

.section-carousel .content ul li a img, .section-carousel .content ul li a:hover img {
    min-height: 150px !important;
    min-width: 150px !important;
}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
stug

Hi James have added that to the custom code but everything has stayed the same size.

Share this post


Link to post
Share on other sites
stug

Sorry James, had forgotten the dot in front. Works a dream thanks.Sorted

Share this post


Link to post
Share on other sites
stug

Ah all was good but then not resonsive for smaller screens, carousel then does not display.

Share this post


Link to post
Share on other sites
Rob

Convert the 150px to an em size.  That's 9.375em.   Pixels in Custom CSS are usually non-responsive, but em or % values are.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×