Jump to content


Photo
- - - - -

Feature Thumbnail to be Created in the Feature Slide Container


  • Please log in to reply
14 replies to this topic

#1 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 13 July 2012 - 04:17 PM

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, "

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 July 2012 - 07:28 PM

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.

#3 bxbmedia

bxbmedia

    Advanced Member

  • Members

  • 79 posts
  • LocationAnn Arbor, MI

Posted 13 July 2012 - 07:31 PM

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:

Please Login or Register to see this Hidden Content



#4 bxbmedia

bxbmedia

    Advanced Member

  • Members

  • 79 posts
  • LocationAnn Arbor, MI

Posted 13 July 2012 - 07:37 PM

@rangelone - I believe @fatchamp is referring to the Feature Thumbs feature navigation mode option for Features.

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 July 2012 - 08:00 PM

Ah, thanks @bxmedia.

#6 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 13 July 2012 - 10:58 PM

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!

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 14 July 2012 - 03:57 PM

Editing the HTML in the template code isn't advised since potential problems can occur with updates. Are you using PageLines Framework?

#8 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 14 July 2012 - 05:08 PM

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!

#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 July 2012 - 12:13 PM

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.

#10 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 16 July 2012 - 09:33 AM

Hi Danny,

Here is the screenshot:
Posted Image

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!

#11 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 16 July 2012 - 10:01 AM

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.

#12 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 16 July 2012 - 10:25 AM

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)

For the phone:
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:
.responsive #site .content #feature_slider img {display:none;}

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!

#13 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 16 July 2012 - 11:27 AM

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*/ }

#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 July 2012 - 05:18 PM

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.

#15 fatchamp

fatchamp

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 17 July 2012 - 01:31 AM

Cool! Shall check that out, Thks!