Feature Slider
Started by
sysorex
, Jan 20 2011 05:23 PM
11 replies to this topic
#1
Posted 20 January 2011 - 05:23 PM
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.
#2
Posted 20 January 2011 - 05:38 PM
What theme are you using, and can you give us a link to the site?
#3
Posted 20 January 2011 - 05:40 PM
I am using the platform base theme so that nothing gets changed with updates. and the link is www.sysorexhosting.com. Thanks
#4
Posted 20 January 2011 - 10:15 PM
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.
#5
Posted 21 January 2011 - 01:53 PM
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
#6
Posted 21 January 2011 - 06:57 PM
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?
#7
Posted 21 January 2011 - 07:40 PM
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.
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
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
#8
Posted 21 January 2011 - 09:59 PM
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.
#9
Posted 23 January 2011 - 06:58 PM
Can you tell me how did the round corners in the features? I would like to do that as well.
Thanks
Nicolas
#10
Posted 23 January 2011 - 07:10 PM
Nicolas,
Are you referring to the top rounded corners shown here?:
Are you referring to the top rounded corners shown here?:
#11
Posted 24 January 2011 - 01:27 PM
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
#12
Posted 24 January 2011 - 07:25 PM
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.










