Customize Pro Sites button

What CSS code do I need to target to customize the pro sites upgrade button? I noticed that the button uses as background image gradient and can't seem to find all of the places ( I found 2) where to target and override it...

  • Nithin

    Hi Justin,

    Hope you are doing good today.

    I noticed that the button uses as background image gradient and can't seem to find all of the places ( I found 2) where to target and override it...

    The ID would be #wp-admin-bar-pro-site, however the CSS seems to be using !important tag in it, so it won't get overridden.

    #wpadminbar li#wp-admin-bar-pro-site a span {
    background-image: -webkit-linear-gradient(bottom, #419ece, #3b85ad) !important;
    }

    Easiest would be to edit the file where the CSS is being declared, which is located under /wp-content/plugins/pro-sites/pro-sites.php, starting from line 1011.

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day.

    Best Regards,
    Nithin

  • Justin

    Instead of going into the plugin's code (because when it updates, I will lose customizations I believe), I used my own !important tags to override the plugin's. Here is my code that did the trick (note: the extra code was to make it look like a material design button):

    /*Admin Bar: upgrade*/
    #wpadminbar li#wp-admin-bar-pro-site a span {
        color: #212121 !important;
    	background: #FFD54F !important;
    	font-weight: 500;
    	text-shadow: none;
    	text-transform: uppercase;
    	will-change: box-shadow;
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        outline: none;
    	border: none !important;
    	border-radius: 2px;
    	background-image: none !important;
    	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    	-webkit-tap-highlight-color: transparent;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
    #wpadminbar li#wp-admin-bar-pro-site a:hover span {
        color: #212121 !important;
    	background: #FFC107 !important;
    	border: none !important;
    	background-image: none !important;
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
    #wpadminbar li#wp-admin-bar-pro-site a:active span {
        color: #212121 !important;
    	background: #FFC107 !important;
    	border: none !important;
    	background-image: none !important;
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
    #wpadminbar li#wp-admin-bar-pro-site a:focus:not(:active) span {
        color: #212121 !important;
    	background: #FFC107 !important;
    	border: none !important;
    	background-image: none !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
    }
    #wpadminbar li#wp-admin-bar-pro-site a {
        padding-top: 6px !important;
        border-right: none !important;
    }

    By looking in the plugin's code, I found out that I had misplaced the hover, active, and focused tags...Anyways, thanks for the help!