Jump to content
Sign in to follow this  
fatchamp

Feature Thumbnail to be Created in the Feature Slide Container

Recommended Posts

fatchamp    0
fatchamp

Hi, the feature thumbnails are now outside the slide container. Is there a way for us to work on the html to bring the thumbnails into the same container as where the slides are? In short, "

" to be placed within "
". Thank you.

Share this post


Link to post
Share on other sites
Rob    547
Rob
Are we mixing apples and bananas? The feature sliders don't use thumbnails. It can use feature images. A thumbnail isn't quite the same thing. As the site you point me to isn't even using a PageLines theme, I'm not clear how to help with this.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bxbmedia    2
bxbmedia
The easiest way would be using CSS and giving a negative margin-top to the #feature-footer div, which would bring it on top of the feature area like so: [code]#feature-footer { margin-top: -50px; /* play with this number to fit your thumbnails*/ } [/code]

gl hf

Share this post


Link to post
Share on other sites
bxbmedia    2
bxbmedia
@rangelone - I believe @fatchamp is referring to the [i]Feature Thumbs[/i] feature navigation mode option for Features.

gl hf

Share this post


Link to post
Share on other sites
Rob    547
Rob
Ah, thanks @bxmedia.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
fatchamp    0
fatchamp
Thanks bxbmedia, that's what I meant, sorry that it's unclear. I've tried your method, it works on larger screens but when it comes to the mobile, the navigation interferes with the feature slide due to the -50px margin. Is there a way to play with the HTML code? Thanks!

Share this post


Link to post
Share on other sites
catrina    103
catrina
Editing the HTML in the template code isn't advised since potential problems can occur with updates. Are you using PageLines Framework?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
fatchamp    0
fatchamp
Thank you for your response Catrina. Yes I'm using pagelines framework, but using another launch page hence you cannot see it live. If not advisable to work on HTML, is there a way to get this to work on CSS such that the phone version text and images flow in sequence neatly? Thanks!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi, What do you mean when you say you can not use the -50px as it interferes with navigation ? Can you provide a screenshot of this please.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
fatchamp    0
fatchamp
Hi Danny, Here is the screenshot: [img]http://fatchamp.me/wp-content/uploads/2012/07/fc_screen.jpg[/img] The red circle indicates the interference of the thumbnail and the text above on the phone version. Without the -50px, the thumbnails rest nicely just below the text. It looks ok on larger screens. Just need to solve the phone version. Thanks!

Share this post


Link to post
Share on other sites
fatchamp    0
fatchamp
I was thinking to play around with the height of the feature slide area, but as it also looks good on larger screens, the text interferes with the slide image on phone version too.

Share this post


Link to post
Share on other sites
fatchamp    0
fatchamp
Hi, I've managed to resolve this: 1st, reduce the height of the slideshow so that the thumbnails go closer to the slides without leaving too much space in between. This only works well for the larger screens. When using the phone version, the text will cover the image. (by default there is a black translucent background beneath the text, but in my case I did not want this) [b]For the phone:[/b] Adjust the css code for the "responsive state" so that the phone version will look ok. Add this css to remove the image for phone: [b].responsive #site .content #feature_slider img {display:none;} [/b] Guess if anyone needs the image to be shown on the phone as well, maybe can also use this code but change the "img" to something else and add some margin or padding etc. Not sure if this is the best solution though, let us know thanks!

Share this post


Link to post
Share on other sites
fatchamp    0
fatchamp
Hello once again, thought I share with you guys that adding this css also works, and in fact, this works better if you need your image to be on both the bigger screen and mobile version. @media handheld, only screen and (max-width: 767px) { #feature_slider img { /* you may wish to add padding-bottom: 30px or margin-bottom: 30px depending on preference*/ }

Share this post


Link to post
Share on other sites
Rob    547
Rob
You know we do have a Browser Specific CSS plugin that might help. Also, for responsive design, I strongly suggest not using fixed pixel sizes, but use percentages wherever possible.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
fatchamp    0
fatchamp
Cool! Shall check that out, Thks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×