EasyBlog Showcase.. CSS How to? Blog image on top, text underneath.
By Andy on Wednesday, 25 December 2013
Posted in Technical Issues
Replies 5
Likes 0
Views 768
Votes 0
To all who are celebrating the Holiday season, Happy Holidays! What a year it's been for StackIdeas. You guys deserve a year off (but of course we can't allow it!)

I'm trying to tweak my EasyBlog Showcase module and need some help with the CSS. I'm doing this to make it shrink down to smaller screen sizes better.

You'll see what I've currently got on my homepage.... The image is to the right and text left. What I'd like to do is make the image full width and go above the title and text which would become full width below it (in my template's case full width is max around 500px)

So that's the goal: Full width image to start with - and then the title and text below that - instead of the current behaviour of the image to the side.

Thanks for any assistance!
Hello Andy,

Merry Christmas to you and your family on behalf of the team! I don't think it would be advisable to stretch the image because the image size is only about 200px in width and stretching them across the whole module would make the image a little distorted
Mark
·
Wednesday, 25 December 2013 17:49
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks Mark - I source image is about 530 pixels wide and I'd switch to that (or slightly smaller) if I'm able to do this tweak I want to do.... so I'm still keen to proceed with this if you can advise....

If my memory is right, the awesome EasyBlog Theme settings will allow me to change that sizing and clear the cache of all my images in a flash.....?

Seasons Wishes,

Andy
Andy
·
Wednesday, 25 December 2013 20:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Andy,

Happy Christmas Yes the themes setting allow users to control the size of the Blog Images. For the showcase module it would be the "featured" entry. If your images are inserted then then you will need to use CSS to control it. As for the CSS to make the image be on top try this
#mod_showcase .showcase-image {

float: none !important;

}

For the image size to be 500px wide
#mod_showcase .showcase-image img {

max-width: 500px !important;

width: 100% !important;

}

for the overall module height
#mod_showcase .showcase-slider .slider-holder {

height: 200px !important;

}

Hope this helps.

Thanks!
Adelene
·
Wednesday, 25 December 2013 22:36
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Adelene,

Absolutely Perfect! Thank you so much

All I need now (which is already on the development wish list with you superstars) is a little more flexibility in the module parameters to let me include blogs by their ID# and then I can use this fantastic showcase across all different parts of my site. Love it.

Seasons Wishes,

Andy
Andy
·
Friday, 27 December 2013 00:20
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Andy,

You are most welcome. Glad that your issue is solved.

Thanks!
Adelene
·
Friday, 27 December 2013 01:28
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post