Select Page

The Plutio Widgets Blog

Power up your Plutio!

Plutio CSS Style Examples: Progress Bars

by | Oct 24, 2019 | Plutio Guides

Styling Plutio with CSS: Progress Bars

 You might have seen the recent blog post that walks you through the process of using custom CSS with Plutio. If not, head over and read that first!

So if you’ve set your Plutio up to use your custom CSS styles you’re well on your way to making Plutio look the way you want it to. Now all you need is some CSS code to make things look pretty. If you know CSS then you’re all set. If not, you might like to use some of the examples below. You can copy and paste the bits of code you like the look of into the Cloudflare CSS app. Then save and refresh your Plutio to see it take effect.

 You can combine as many of these code snippets as you like into the Cloudflare CSS app, mixing and matching to get the look you’re after. I would advise you to keep the /*comment line*/ with each code snippet so that you know what each line is doing when you want to come back and change things later down the line. 

We’ll start in this post by looking at progress bars. Look out for a series of posts coming up on styling different areas of Plutio. Each snippet will be listed separately, along with a screenshot. At the end we’ll combine these snippets together to see what you can build when you chain a whole bunch of CSS together.

On with the examples!

Change the progress bar colour on projects and tasks:

/*Progress bar colour*/
.progress-bar .progress-bar-indicator {background-color:#a337a0!important; }

Remove the percentage and task count text on progress bars on projects:

/*Progress bar no text*/
.progress-bar .progress-bar-text {font-size: 0em!important;}

 Remove the background pattern and colour on progress bars on projects and tasks:

/*Progress bar plain background*/
.progress-bar {background-color: #e2e5eb!important;background-image: unset!important;} 

 Change the height of the progress bars on projects and tasks:

/*Progress bar height*/
.progress-bar {min-height:35px!important;} 

 Change the width of the progress bars on projects in list view:

/*Progress bar width – desktop only*/
@media screen and (min-width: 790px) {
.list-section:not(.cards-view) .list-content .list-items .list-item .item-cell.cell-title {width:600px!important;}
.list-section:not(.cards-view) .list-content .list-items .list-item .item-cell:not(:first-child):not(:last-child) {width:200px!important;}
.list-section:not(.cards-view) .list-content .list-items .list-item .item-cell:not(:first-child):not(:last-child) .cell-content p {max-width: 180px!important;}
}

This one can cause problems on mobile views, so we’ve wrapped the whole lot in a media query that will stop it showing on screen sizes below 790px wide.

 Combine all the snippets above:

@media screen and (min-width: 790px) {
.list-section:not(.cards-view) .list-content .list-items .list-item .item-cell.cell-title {width:600px!important;}
.list-section:not(.cards-view) .list-content .list-items .list-item .item-cell:not(:first-child):not(:last-child) {width:200px!important;}
.list-section:not(.cards-view) .list-content .list-items .list-item .item-cell:not(:first-child):not(:last-child) .cell-content p {max-width: 180px!important;}
}
.progress-bar .progress-bar-text {font-size: 0em!important;}
.progress-bar {min-height:35px!important;
background-color: #e2e5eb!important;
background-image: unset!important;} .progress-bar .progress-bar-indicator {
background-color:#a337a0!important; }

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.