Select Page

The Plutio Widgets Blog

Power up your Plutio!

Customising Plutio with CSS

by | Oct 10, 2019 | Plutio Guides

What’s the issue?

Out of the box Plutio is pretty clean with a nice modern look. As a business management tool it’s not too shabby. But, wouldn’t it be nice if you could customise it to match your brand and present your best face forward?

Plutio offers the White Label option which gives you the ability to use your own logo, change some of the interface colours and have your own domain to access Plutio.

Neat. But not amazing.

If you’re anything like us, you need some fine grained control! Want that button to be bigger? That header to be bold? The completed tasks to be greyed out? A little neon green here and there? All these things would be easily possible if you could only add your own CSS to Plutio.

Why not just use a Safari (insert your awesome browser here) extension to alter the css?

So yes, there are extensions for most browsers that will allow you to change the look of any website. The problem is, those only change it for you. Anyone else visiting your Plutio – like say your clients – won’t see your beautiful modifications. They’ll just get vanilla Plutio. And that would be sad!

So how do we add our own css that everyone will see?

It’s pretty simple really, with a few prerequisites:

  • First off, you need to have the Plutio Whitelabel addon.
  • Second, you need to have your custom domain set up, and that custom domain needs to be running through Cloudflare. The free account on Cloudflare is fine.

So assuming you meet the above requirements, there are just a few steps until you can add your own CSS.

  1. Install the Add CSS app on Cloudflare.
  2. Limit your CSS app to only act on your Plutio subdomain.
  3. Add your CSS code to override the built in Plutio styling. And that’s all there is to it!

Read on for the step by step guide in detail.

Step one: Install the Add CSS app on Cloudflare

Login in to Cloudflare and select the domain name that your custom Plutio domain runs on. Once you’re in, choose the blue Apps tab from the top menu to get started.

 

Select, or search for, the Add CSS app in the list of apps that show up. Click the Preview on your site button to start setting it up. 

Step two: restrict your CSS app to your Plutio domain. 

 Change the default All Pages option to be your Plutio subdomain, otherwise your CSS will end up changing your entire website, which is probably not what you want!

Step three: add your CSS code

Now you can paste your CSS code into the Code box to implement your new styles.

To prove that everything is working properly we’ll do something simple like change the colour of the progress bars from the default Plutio green to a nice purple. If you know what you’re doing with css, do your own thing at this point!

Paste the following code into the Code box:

.progress-bar .progress-bar-indicator {background-color:#a337a0!important; }

Update: The original version of this tutorial missed a small but important step in the Cloudflare settings! Once you’ve done the above, make sure to also:

Go to the Page Rules tab and create a new page rule. Enter your Plutio subdomain followed by /* and set the Settings drop downs to be Cache and Bypass. Then click Save & deploy. This will tell Cloudflare not to cache your Plutio contents, which we don’t want it to do. This screenshot shows you the settings.

Check if it works!

Save your changes in Cloudflare and then go back to Plutio and hit refresh. Your project progress bars should now have changed colour! It’s important to note that the preview built in to Cloudflare will not work, as Cloudflare is not able to log in to Plutio to render a preview. So ignore that – to test code changes always go back and look at your actual Plutio in a new tab and hit refresh.


Congratulations, if your progress bar is purple you’ve done it! You can now add whatever CSS code you like to override the default Plutio look, and anyone visiting your Plutio url will see your changes!

Look out for many more code snippets in an upcoming post to do all sorts of snazzy things with Plutio & CSS!

 

Managed Hosting Simplified

The Plutio Widgets app and this Wordpress website are hosted on Google and Digital Ocean cloud servers. We don't need to be server geeks though, because we run it all through Cloudways Managed hosting which gives us a point and click control panel for our fancy cloud servers.

All the power, none of the hassle! Check Cloudways out here - we love it!

Plutio Widgets

A brand new service for your Plutio is coming soon. Off site, independent backups. Controlled by you, available 24/7. Use it to backup, import / export and more!

Protect your Plutio! Sign up to be notified when we launch and bag a special discount.

Protect your Plutio

How would your business cope if Plutio went down? Could you get access to your data to restore or move to another platform?

Plutio Widgets gives you offsite independent backups. Use it to restore, export or more!

More posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Let’s Get Started

Ready to protect your business?

Made with  by Repose Creative in the UK.
Hosted by Cloudways.

How it works

Our unique widgets interact with your Plutio.

Frequent Questions

How we treat your data and more.

Plutio Widgets

Backups, Import, Analytics.