Jump to content


Photo

Red Donate Button in Menu


  • Please log in to reply
5 replies to this topic

#1 1213online

1213online

    Member

  • Members
  • 15 posts

Posted 24 August 2012 - 09:27 PM

I would like to add a red donate button in the menu on my non-profit website, but it seems there is no way to do this with Platform Pro menus. Can this be done? Thanks, Rob
  • assomibatrifs likes this

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 24 August 2012 - 11:29 PM

Sure you can! With custom CSS, you can implement either a background color for a single menu item OR, you can set a background button image. Go to Dashboard > Appearance > Menus and click "Screen Options". There, you'll see an option check box for CSS Classes. Check it. Then click "Screen Options" again, which closes that panel. Now, if you go to the menu space where you want your button, just apply a special unique class. Some unique word or phrase such as my_big_red_button or mybigredbutton . All you need to do now is create the CSS to do the thing you want. You'll find examples and guidance here: http://www.w3schools.com/css/
  • assomibatrifs likes this

#3 1213online

1213online

    Member

  • Members
  • 15 posts

Posted 28 August 2012 - 04:44 PM

Thanks! Once I create the custom CSS, where do I put it? Does it go in the menu or in the Custom Code section?
  • assomibatrifs likes this

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 28 August 2012 - 04:46 PM

The custom CSS goes in Custom Code > Custom CSS For further reference: http://www.pagelines...wiki/Custom_CSS

#5 1213online

1213online

    Member

  • Members
  • 15 posts

Posted 28 August 2012 - 05:07 PM

So, if I have given my menu button the CSS Class name of red button would the code look something like this? #redbutton { color:#ffffff!important; background:#e82828; text-shadow:none;} This is what I've tried but it doesn't work. Thoughts...

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 August 2012 - 02:30 AM

 ul.sf-menu li .redbutton {
	    background-color: #e82828;
	    float: left;
	    margin: 0;
	    position: relative;
	    text-shadow:none;
	}
This is correct. However, you need to apply the white font color as well as hover and active state conditionals to it as well. That's going to need additional elements.