Jump to content
Sign in to follow this  
djcsuomi

feature thumbs

Recommended Posts

djcsuomi

Is it possible to make the thumbs in the feature slider larger? I would like them to be as large as the images in the carousel, but I don't like the way the carousel shows the main image.

Share this post


Link to post
Share on other sites
timlinson

You can add something like this to custom code > custom css: `#featurenav a span.nav_thumb{width:80px;height:80px}`

Share this post


Link to post
Share on other sites
djcsuomi

Tim, would I just put that into the body section of the css rules box? Would it work if I make it about 200px height and width?

Share this post


Link to post
Share on other sites
timlinson

Not into the body, on its own line (actually you can delete the empty body rule if you want) I don't see why it wouldn't work with 200px.

Share this post


Link to post
Share on other sites
djcsuomi

Thanks a lot. It looks like it works, but the shadow is still highlighting a small 50 x 30 corner to indicate that feature is selected. How would I get it to either highlight the whole area or none of it at all?

Share this post


Link to post
Share on other sites
djcsuomi

Also, I tried something like #feature_slider .fcontent{color: #000000} to make the background of the slider black instead of white. Didn't work. Any ideas?

Share this post


Link to post
Share on other sites
cmunns

what is your link? the highlighting is done with an image so you'd have to remove that

Share this post


Link to post
Share on other sites
djcsuomi

How do I remove the image? You mean a link to my site? It isn't up yet. I can show screenshots, but basically, I increased the thumb size but its still highlighting a 50x30 dark spot in the image to indicate that feature is being viewed.

Share this post


Link to post
Share on other sites
timlinson

`color` is for the foreground. You'll need `background-color` to change the background. The shadow is coming from images/feature-thumb-overlay.png

Share this post


Link to post
Share on other sites
djcsuomi

So I went into the platform pro folder and erased that image but it is still showing up as well as a thin white box in the images that are not selected. Any ideas?

Share this post


Link to post
Share on other sites
djcsuomi

You know, for some reason even after I deleted the file it was still showing up. So I put in the following code to get rid of it completely: #featurenav a span.nav_thumb span.nav_overlay {background: none} #featurenav a.activeSlide span.nav_thumb span.nav_overlay{background: none} Ideally, I would like some way to highlight which one is selected, though. The only problem is that my thumbs are re-sized, too, so it is kinda a pain. Any quick fix ideas?

Share this post


Link to post
Share on other sites
catrina

Strange. But anyway, if you want to highlight a selected thumb, in what way do you want to style it? With a border around it?


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
djcsuomi

A simple border is prob the easiest. I looked in the forums to see if anyone has ever dimmed all the thumbs that are not active. That would really be ideal.

Share this post


Link to post
Share on other sites
cmunns

You could do ` #feature .thumbs #featurenav a { opacity: .4; } #feature .thumbs #featurenav a.activeSlide { opacity: 1; } `

Share this post


Link to post
Share on other sites
djcsuomi

Oh wow, that works great. Is there a separate css tag for the element right as it is being clicked? I was able to get rid of that grey highlight box on in the corner of the thumb after you click on it, but just as you click, until you let go, it is still showing.

Share this post


Link to post
Share on other sites
catrina

Do you mean that while the mouse button is pressed on the image, the border is still there?


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
kastelic
#featurenav a:active span.nav_thumb span.nav_overlay {
	    background: url("../images/feature-thumb-overlay.png") no-repeat scroll 0 -30px transparent;
	}

This is the rule for the element when it is clicked, specifically the "active" pseudo-element

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  

×