Need help? Check out our Support site, then


CSS for Top Menu button?

  1. I'd like to make my top menu (a custom link to Donate via Paypal) stand out more on the page; I'm hoping that there is CSS to create a bright button?

    I'm using the Designfolio theme.
    Thanks!

    The blog I need help with is seavuriaforall.wordpress.com.

  2. Hello @mariaelizabethbunn,
    Once you have added a custom link to the menu, you can use CSS to target that menu item(using the menu ID).

    Lets say you want to make the menu item Support SeaVuria stand out more, then we can target it using it's menu ID(menu-item-85) and use this CSS:

    // make the menu item look like a button
    #menu-item-85 {
        background: #0080ff;   // change this hex color value if you want
        border-radius: 3px;
    }
    // change the color of the text of the menu item above
    #menu-item-85 > a {
        color: #ffffff !important;
        padding: 6px 15px 6px 26px !important;   // centerize the text inside the button
    }

    Hope this helps 🙂

  3. IMPORTANT NOTE:
    Change the menu id to the ID of the paypal custom link when using this CSS.

  4. Thanks otpidusprime,

    I actually have a change of plans now; maybe you can help.

    I've now generated HTML button code for our Paypal link, and I'd like to put that up at the top of the page instead of the current donate link. Do I need to have CSS to put in the HTML? I can't find any other way to insert it into the top menu.

    Thanks!!
    -Maria

  5. Oh yeah, this is the designfolio theme.

  6. Hi, I'm not seeing a donate button on your site. Was it in your top navigation menu, or where?

  7. Hi there,

    Sorry about that, must've taken it off while trying to figure things out. I've put it back up now, it is on the top navigation menu.

    Thanks for your help,
    -M.

  8. Hi @mariaelizabethbunn, what you would need from Paypal would be just the HTML link. You can then put that into your Top Menu just as you did with the other button. At Customize > Menu, open the Top Menu, open that custom link, and you can then put in the URL and then save the menu.

  9. Yeah, I think my biggest issue is that I have custom code from a tech fella over at PayPal. I wanted a donation button that would have a drop-down menu to specify into which program the donations are to go; the drop-downs are usually only for purchase buttons, not donations.

    SO.... he was very helpful in helping me customize the HTML to create that custom button. What that means though is that I have the full code and not just an e-mail link which seems is what WordPress requires.

    Ugh!

  10. No worries. If you do not want to post it here, start a draft post and then switch to the HTML/Text tab in the post editor and paste the code in there and save, but do not publish and I can then look at that post and see if I can pull the URL out for you.

  11. Thanks for closing out the other thread.

    I pasted the code into the HTML tab of a draft post entitled "thesacredpath" under the Support SeaVuria tab. So, you can see it even though it's not published?

    Thanks for your help,
    -Maria

  12. Hi, thanks for the draft post. We can't put that sort of code into the top menu. You could however paste that into a Text Widget in your sidebar.

    If you want to pursue that, I would suggest going to that draft post and link the text for the five categories of donations to the places they are supposed to go. You can do that from the Visual or Text/HTML tab. Then switch to the Text/HTML tab and copy all that and paste into a text widget in your sidebar and save.

  13. Ok. I'm resigned to put it in a text widget on the sidebar :(

    BUT, one question:

    1. Why does it look so different? When I go to an internet explorer test bed (https://www.jmarshall.com/easy/html/testbed.html) and put in the code (I just went ahead and posted it below, I can't imagine it could be used nefariously), it looks like this beautiful button with a drop-down menu that perfectly links to PayPal. On WordPress visual, it just changes it into an ugly unlinked table without any button at all. All of the links should go to the same place, just our PayPal page, the dropdown will just distinguish on our PayPal records the delegation of the donation. Any way I can get it to look and function as it does in the test bed?

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="J7Q9SLTEN4RXS">
    <table>
    <tr><td><input type="hidden" name="on0" value="Donate To:">Donate To:</td></tr><tr><td><select name="os0">
    <option value="General Operations">General Operations </option>
    <option value="Girls to Girls Scholarships">Girls to Girls Scholarships </option>
    <option value="PETRI Scholarships">PETRI Scholarships </option>
    <option value="Teacher Training">Teacher Training </option>
    <option value="Technology">Technology </option>
    </select> </td></tr>
    </table>
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

  14. In fact,

    I easily added in the html for the button on our associated website (http://girlstogirls.wixsite.com/seavuria/donate) and again, it looks and functions perfectly, just as it should. I can't understand how easy it was to copy and paste the code in on that wixsite, and wordpress is a hot mess; it's just so difficult to do anything. For the life of me I can't understand why wordpress is so ubiquitous.

  15. There are code limitations here at WordPress.com, and the <form></form> code is not allowed for security reasons. You can read more on this in our Code support page.

    From the above support page:

    WordPress.com is a type of shared environment, where all users are running off of the same software. This is great because it allows us at Automattic to update millions of blogs at the same time with a single click. It means we can fix bugs or offer new features very quickly, which is a win for you as users. Having all users running on the same software can also be dangerous. If we aren’t careful, one user has the potential to take down the entire site. So this is why we need to limit some of the things you post on your blog.

    JotForm and Wufoo forms are allowed here because they have specifically created form code to be used here at WordPress.com and we converted that into our own code. Google forms can be used here as well and again, we take their code and convert it into our own. That simply cannot be done with any and all form codes as it requires us to write code on our end to convert it into something that we know is secure and will not possibly cause any issues.

  16. Ok, well thank you for all of your support. :)

You must log in to post.

About this Topic

Tags