sysorex 0 Report post Posted January 20, 2011 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 16 Report post Posted January 20, 2011 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 0 Report post Posted January 20, 2011 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 16 Report post Posted January 20, 2011 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 0 Report post Posted January 21, 2011 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 16 Report post Posted January 21, 2011 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 0 Report post Posted January 21, 2011 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 Share this post Link to post Share on other sites
kastelic 6 Report post Posted January 21, 2011 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 0 Report post Posted January 23, 2011 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
catrina 103 Report post Posted January 23, 2011 Nicolas, Are you referring to the top rounded corners shown here?: http://www.sysorexhosting.com/ 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
sysorex 0 Report post Posted January 24, 2011 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 16 Report post Posted January 24, 2011 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