Jump to content
Sign in to follow this  
Keith Vaugh

Features - Thumbs

Recommended Posts

Keith Vaugh

Hi Folks

 

I am trying to change the size of the thumbs under the feature. I have managed to resize them using this code;

#<span class="searchlite">feature</span>nav a span.nav_thumb {
   width: 100px;
   height: 60px;
   }

 

However the images are overlapping each other and there is also a border from the original size. Can't seem to firebug the relevant sections for further assistance.

 

Any Kung Foo masters able to lend a hand? 

 

Thanks

Share this post


Link to post
Share on other sites
Danny

Hi,

 

This kind of customisation isn't as simple as you may think. As you need to edit an image which is used for the overlay. As well as a few classes to increase the size, see the image below.

 

http://cl.ly/image/0U2Q0h1n1j22

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh

Hi,

 

This kind of customisation isn't as simple as you may think. As you need to edit an image which is used for the overlay. As well as a few classes to increase the size, see the image below.

 

http://cl.ly/image/0U2Q0h1n1j22

 

Thanks Danny. I enjoy a challenge.

  • Like 1

Share this post


Link to post
Share on other sites
Keith Vaugh

Hi Catrina

 

Just working on a sample for some one ATM: Live link is: http://development.keithvaugh.com/development/

 

What I have so far that seems to have sorted out most of what I want is

 

#featurenav a span.nav_thumb {
   width: 150px;
   height: 90px;
   }


#features .thumbs #featurenav a {
  background-color: #fefefe;
  margin: 0;
  padding: 0;
  border: none;
  width: 150px;
  height: 90px;
  margin: 0 8px;
  box-shadow: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

 

If i could get rid of the boxes in the back round I'd be sorted. Also would appriciate if I could be advise if the code is tidy enough.

 

Thanks All

 

BTW would like to change the background colour also, but have not had any luck yet.... 

Share this post


Link to post
Share on other sites
Keith Vaugh

By boxes, you mean the borders for the thumbnails, yes?

 

Yes. They are the left over from the 50px * 30 px.

 

Tried editing the images in the ../features/images folder i.e. fthumb1.png etc... but no luck.

Share this post


Link to post
Share on other sites
James B

Hello, try this to get ride of the borders

 

 

#featurenav a span.nav_thumb span.nav_overlay {

    background: none repeat scroll 0 0 transparent;
    margin: 0;
}

 
  • Like 1

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
Keith Vaugh

Hello, try this to get ride of the borders

 

 

#featurenav a span.nav_thumb span.nav_overlay {

    background: none repeat scroll 0 0 transparent;
    margin: 0;
}

 

Thanks Jamas

 

Your kung foo did the trick on the borders.  

 

There is only one final element remaining, a highlight box 50 px by 30 px that appears when you click on one of the feature thumbs. Its reference as 

span.nav_overlay

 

Just need to get rid of it and its sorted. 

 

 

Hi,

 

Yes that's the correct element, if you look at the css in the right hand window attached to that div you'll see the attached css, set that to display none and that should vanish too :-)

 

1
2
3
#featurenav a.activeSlide span.nav_thumb span.nav_overlay, #featurenav a:active span.nav_thumb span.nav_overlay {
    background: none repeat scroll 0 0 transparent;
}
 

Share this post


Link to post
Share on other sites
James B

Hi,

 

Yes that's the correct element, if you look at the css in the right hand window attached to that div you'll see the attached css, set that to display none and that should vanish too :-)

 

#featurenav a.activeSlide span.nav_thumb span.nav_overlay, #featurenav a:active span.nav_thumb span.nav_overlay {
    background: none repeat scroll 0 0 transparent;
}
  • Like 1

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
Keith Vaugh

Thanks James. Missed that part. 

 

One thing I always liked about pagelines was the community of support. Thanks to all who have assisted. 

Keith

Share this post


Link to post
Share on other sites
Danny

No problem Keith, happy to hear your issue has been resolved.


Please search our forums, before posting!

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  

×