Jump to content
Sign in to follow this  
sysorex

Feature Slider

Recommended Posts

sysorex

I was wondering if anyone knew how to change the feature sliders appearance. I want to customize the bottom navigation bar of the feature slider and i would like to give the feature slider rounded corners. is this possible in a easy manner. Also to have the sliders navigation bar overlap the slide show and be transparent to show whats behind it.

Share this post


Link to post
Share on other sites
cmunns

What theme are you using, and can you give us a link to the site?

Share this post


Link to post
Share on other sites
sysorex

I am using the platform base theme so that nothing gets changed with updates. and the link is www.sysorexhosting.com. Thanks

Share this post


Link to post
Share on other sites
cmunns

well it looks like you figured out the rounded corners. That site looks really awesome already! What do you want to do with the feature-nav, there's a million possibilities...Using FireBug or Chrom developer tools will help you pinpoint css or I can help you be more specific.

Share this post


Link to post
Share on other sites
sysorex

I want to change the bottom nav bar to have a png graphic i have that highlights when hovering over each tab. and then have it hover over the main image, the nav bar image i have is a png and transparent. how do i change the bottom navbar to have this graphic and also use the second image in the file for the highlight. and then how do I move the nave bar up to overlay over the main image along the bottom. Thanks

Share this post


Link to post
Share on other sites
cmunns

Do you have an example of what you mean? You could say something like `#feature-footer {opacity:.4}` and then apply opacity:1 on hover to get the overlay plus highlighting. Also did you try using the thumb nav mode for the features as a starting point?

Share this post


Link to post
Share on other sites
sysorex

I'm using the feature name menu and I'm trying to change the graphic of the nav bar to something i designed in illustrator.166382_487521697740_509452740_6419758_378594_n.jpg This is the graphic i am attempting to use as the feature navigation bar. hope this helps I know my question was very confusing. thanks

Share this post


Link to post
Share on other sites
kastelic

Are you talking about CSS sprites? Do do this you use absolutely positioned elements with a set background position and a set width and height for the parent element (which has overflow set to hidden). Then you make a hover state that just moves the background position. Just Google "css sprites tutorial" for loads of info on how to do it.

Share this post


Link to post
Share on other sites
kimesolutions

Can you tell me how did the round corners in the features? I would like to do that as well. Thanks Nicolas

Share this post


Link to post
Share on other sites
sysorex

Honestly the top rounded corners I did in the feature slider is that the image in the slide show has rounded corners then i made the background of the feature slider transparent. I still need help finding where i need to go or what i need to do to change the graphics of the navigation bar for the feature slider to the example i have above any help is appreciated thanks :)

Share this post


Link to post
Share on other sites
cmunns

Well you can always extend the featurenav items by removing the current css ` #featurenav a, #feature-footer span.playpause { border: 0px solid; margin-right: 0px; } #featurenav {width:100%!important;} #feature-footer .feature-footer-pad { padding: 0px; } #featurenav a {padding:8px 12%;} ` That should do it, then you can apply the image sprite of the background you've made to the #featurenav a css background rule and have the .activeslide class be the image sprite change.

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  

×