Jump to content


Photo

Red Donate Button in Menu


This topic has been archived. This means that you cannot reply to this topic.
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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

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/

#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?

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts

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

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.