Changing text and style of the Upgrade Button in Prosites Plugin?

Hello,

I'm using Prosites on my multisite network, i'd like to know if there is a way to edit the Upgrade Button color, text and style ?

For example on edublogs they use a different text and button color (attached screenshots)

Appreciate your help,
Andrew Rezk
http://andrewrezk.com

  • Bojan Radonic
    • Head of Support

    Hey there @Andrew Rezk, hope you're well today!

    This should be possible with some custom CSS. Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn't have custom CSS tab add it in your site using the following plugin:

    http://wordpress.org/plugins/simple-custom-css

    #wpadminbar li#wp-admin-bar-pro-site a span {
    "add properties here"
    }

    Add the desired properties to change the style of the button, if this doesn't work please post a link to where you have this button or grant us support access so we can take a look. You can find more info on how to grant support access by following this link:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Bojan

  • GeekMaster
    • Site Builder, Child of Zeus

    Hello Bojan,

    Thank you for your reply.

    I can add the Css code. please provide me with the css properties code and i will add it.
    All i want is to :
    - Change the text of the navigation upgrade button from "Pro Upgrade" to "+Upgrade Blog" like the one attached but with a red button color.
    - Change the button shown on pro themes to "My Website Pro Only" with a red color.

    I'd appreciate if you could just send me the code, and let me which piece of code is for the button color and text, so i can change that later without any hassles.

    Thanks,
    Andrew

  • Bojan Radonic
    • Head of Support

    Hey again @Andrew Rezk,

    You should be able to change the text of the Pro Upgrade by using translation files. You can find more info on how to translate the plugin here:

    https://premium.wpmudev.org/blog/how-to-translate-a-wordpress-plugin/

    As for the same button background color and color you can add the following CSS code by using Ultimate branding and Custom Admin CSS module. Once activated add the following code in Branding >> CSS:

    #wpadminbar li#wp-admin-bar-pro-site a span {
    background: #ff0000 !important;
    color: #fff;
    }
    
    #wpadminbar li#wp-admin-bar-pro-site a span:hover {
    background: #ff0000 !important;
    color: #fff;
    }

    First part will change the background color and text color and the second part hover background color and text color. You can use sites similar to this one to get the color hex value for the color of your choice:

    http://www.color-hex.com/

    As for the second button, I'm not really sure which button are you referring to, could you please add more info on where this button is located so I can provide the CSS.

    Best regards,
    Bojan

  • GeekMaster
    • Site Builder, Child of Zeus

    Hey Bojan,

    Thanks alot, that worked.
    For the second button, i mean the button that appear when free users try to use premium themes. The "Pro button" next to the live preview button. (attached screenshot)

    If there is a way to change the text and color for that button aswell, that would be great.

  • Bojan Radonic
    • Head of Support

    Hey again @Andrew Rezk,

    Thanks for the clarification, please try adding the following CSS code as explained above:

    .wp-admin a.button.button-secondary.activate.nonpsts {
    background: #ff0000;
    color: #fff !important;
    }
    
    .wp-admin a.button.button-secondary.activate.nonpsts:hover {
    background: #ff0000;
    color: #fff !important;
    }

    This should change the background and text color as well as background and text hover color same as in my previous post.

    Please let me know if this helps :slight_smile:

    Best regards,
    Bojan

  • GeekMaster
    • Site Builder, Child of Zeus

    Hey Bojan,

    Great, yeah it works. :slight_smile:

    But last question: For editing the text for that "pro only" button.
    I there an easy way to edit the text? or do i have to use the translation files like incase of the admin bar upgrade button?

    Thanks alot,
    Andrew

  • Bojan Radonic
    • Head of Support

    Hey again @Andrew Rezk,

    I've tried using jQuery to replace the string but I was unsuccessful. If I'm not mistaking this should also be possible to change with translation files. This would also be the best and safest way to do it.

    If you run into some issues with that please let me know and I'll include SLS (our coding experts) to provide code to change this.

    Please let me know :slight_smile:

    Best regards,
    Bojan

  • GeekMaster
    • Site Builder, Child of Zeus

    Hey Bojan,

    No problem, i really appreciate your fast reply and help.
    If i failed to edit the text for these buttons in future, i may post an update here.

    Thanks alot. I just sent you a positive rating. :slight_smile:

    Regards,
    Andrew

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.