Default Slider Image Size?
-
CreatorTopic
-
April 21, 2013 at 3:58 pm #7658
socialkenya
MemberI’d like to crop all my slider images to exactly fit the slider area so there’s no background showing (my client hates the green strip at the top of slides you can see at http://thetalismanhotel.com/equatoriateak). I had cropped all the images for a different theme entirely, but the client changed her mind, and I’d like to make the slider images fit this area perfectly in Akita.
I thought I saw this in the documentation somewhere, but now I can’t find it. I believe the width was 960px, but I don’t know the height.
Thanks in advance for your help.
Cheers,
JC -
CreatorTopic
-
AuthorReplies
-
April 22, 2013 at 2:17 am #7674
Jason Bobich
KeymasterHello,
The crop size is 960×350, and all of the image sizes for the theme are listed on the Item Details page over on ThemeForest under “Image Sizes” —
http://themeforest.net/item/akita-responsive-wordpress-theme/1530025
April 22, 2013 at 7:55 pm #7702socialkenya
MemberWell, I found that sizing in the documentation last night, but the images are still cropping oddly and not filling out the entire slider section. If you’ll check my other site at http://socialkenya.com, you’ll see that the full-sized slider image actually fills out the entire space, leaving no textured background above it. But on the site-in-progress, all the images are cropped down, leaving that textured border at the top that my client absolutely doesn’t want. I haven’t tweaked either theme in this area, and I’ve tried uploading slider images that are the exact same dimensions as the ones on the Social Kenya website that fill the slider area … but they still show up as cropped down on the in-progress site.
What am I missing here?
Thanks,
JCApril 22, 2013 at 8:15 pm #7707Jason Bobich
KeymasterI’d need to a see a live link to the site you’re having the issue with to tell you what you’re doing on that one. Can you get a working example of the issue up online so I can see it?
April 22, 2013 at 8:43 pm #7710socialkenya
MemberIt was in my first post: http://multiani.com/equatoriateak. No matter how I size the images, they all crop down and leave the green textured border at the top. Not the case at http://socialkenya.com, which has one full-sized slider that fills the whole area.
Thanks,
JCApril 22, 2013 at 8:44 pm #7711socialkenya
MemberPS – I’ve already made sure that the default “Large” image size under Settings: Media is larger than necessary to avoid the weird cropping, but it’s doing it anyway. Also tried regenerating thumbnails…nope. Doesn’t help.
April 22, 2013 at 8:55 pm #7714socialkenya
MemberI think I might be inching closer to an answer due to Chrome’s Inspector. Here are two screenshots. The first shows the slider dimensions:
http://tinypic.com/r/3581c9s/4
And the second shows the div.slide-body attributes:
http://tinypic.com/r/2yyy545/4
The difference between the slide’s default size and the slide-body size is 40 pixels (350 vs 390). Should I actually crop my slider images to 960px x 390 px to get them to fill that entire area and leave no green textured border at the top?
Thanks,
JCApril 22, 2013 at 9:17 pm #7716Jason Bobich
KeymasterAw, I remember now, this is the link that sometimes comes up but generally shows me a Bluehost 404 error page.
Luckily, I just got a glimpse at the link before it went back to a BlueHost 404 error. Your problem is because of some Custom CSS you’ve put into your site. You’ve added 20px of top and bottom margin to all images in your site, no matter where they’re located. That’s what you’re seeing in the slider.
Copied from your Custom CSS:
img { -webkit-box-shadow: 0px 5px 5px #888888; /* Saf3-4, iOS4, Android2.3+ */ -moz-box-shadow: 0px 5px 5px #888888; /* Firefox 3.5-3.6 */ box-shadow: 0px 5px 5px #888888; /* Opera 10.5, IE9, FF4+, Chrome6+, iOS5 */ margin-top: 20px; margin-bottom: 20px; }
If this is your intention, then you’d need address this specifically in the slider now to accommodate your customization something like this:
.flexslider img { margin-top: 0; margin-bottom: 0; }
Tons of ways you could do this, just one example.
April 23, 2013 at 7:16 am #7729socialkenya
MemberOy! Of course! That was the custom CSS I added to give drop shadows to all other images (per client’s request).
Makes sense now.
THANKS!
JC
-
AuthorReplies
- The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.