Jump to content


Photo
- - - - -

Feature Slider


This topic has been archived. This means that you cannot reply to this topic.
11 replies to this topic

#1 sysorex

sysorex

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

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 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 20 January 2011 - 05:38 PM

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

#3 sysorex

sysorex

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

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 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

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 sysorex

sysorex

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

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 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

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 sysorex

sysorex

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

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.Posted Image 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 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts

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 kimesolutions

kimesolutions

    Newbie

  • Members
  • 2 posts

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 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 23 January 2011 - 07:10 PM

Nicolas,

Are you referring to the top rounded corners shown here?:

Please Login or Register to see this Hidden Content



#11 sysorex

sysorex

    Advanced Member

  • Members
  • PipPipPip
  • 44 posts

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 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

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.