Jump to content


Photo
- - - - -

Show play/pause button on feature slider without navigation bar


  • Please log in to reply
8 replies to this topic

#1 tippytap

tippytap

    Member

  • Members
  • PipPip
  • 14 posts

Posted 14 March 2011 - 03:12 PM

The navigation bar is taking up valuable screen space so I going to check 'no navigation' on the feature navigation mode. But I'd like to have the play/pause button show up directly on the feature slider. Can someone tell what the code might be to do this and WHERE I should put it[? I'm a newbie here but have been cutting and pasting code from various questions on this forum quite successfully so I'm thankful to all the experts out there! Thanks!
Screenshot attached:http://imgur.com/LKPy9

#2 tippytap

tippytap

    Member

  • Members
  • PipPip
  • 14 posts

Posted 14 March 2011 - 03:14 PM



#3 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 14 March 2011 - 05:34 PM

Sowmya. Probably try adding the featurenav, then adding some css. Get comfortable using a browser developer tool, but for now try this css ` #featurenav {display:none;} span.playpause {position:relative;top:-30px;} `

#4 tippytap

tippytap

    Member

  • Members
  • PipPip
  • 14 posts

Posted 15 March 2011 - 08:06 AM

Adam, thanks! The play button code worked great. But the first line of code just made the nav bar blank. It didn't actually take it out. I tried to adjust the height of the nav bar as a workaround but it didn't work. Ideas would be appreciated. And how would I adjust the color of the play button (it's hot pink right now which doesn't match the site at all!) (see www.tippytap.org for what it looks like now).

#5 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 15 March 2011 - 09:02 AM

Actually, it might just be a matter if adjusting the #feature height to close up that area. Also, you're site is in maintenance mode so we can't see. Thanks, Bryan

#6 tippytap

tippytap

    Member

  • Members
  • PipPip
  • 14 posts

Posted 15 March 2011 - 02:20 PM

I tried adjusting the feature height but it only tweaks the picture size and leaves the nav bar alone. Would appreciate more ideas - we're launching on World Water Day on March 22nd. And here is a screenshot for more clarity: Thanks.

#7 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 15 March 2011 - 07:08 PM

If it left it blank you would have to identify the other selectors and css rules that give it backgrounds and borders to make it transparent. Hard for us to help without that live link though. Have you tried using the Chrome toolbar or Firebug to help yourself.?

#8 tippytap

tippytap

    Member

  • Members
  • PipPip
  • 14 posts

Posted 16 March 2011 - 04:32 AM

Thanks. I am trying to use Firebug but it's taking a while since I'm so new. Actually spent more time yesterday trying to undo my edits rather than moving forward on this! Took the maintenance plug in off. Could you take a look now and recommend some code to get rid of the nav bar (either by adjusting the height or turning it transparent)? Really trying to launch this in a few days in time for World Water Day! Much appreciated! And you can find the live site at www.tippytap.org Thanks!

#9 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 16 March 2011 - 07:49 PM

Sowmya, sorry about that I'm on the forums about this same time each day. Do you have credentials to get through the splash page? `#feature-footer {background:transparent;}` should work.