UpStream 1.22.1 Allows You to Customize the Frontend

October 18, 2018
Steve Jordan
0 Comments

A new version of UpStream is available today. UpStream 1.22.1 has several small improvements and bug-fixes.

Perhaps the most useful new feature in 1.22.1 is the ability to hide or redesign UpStream items on the front of your site. We have added CSS classes to almost every part of the UpStream frontend. You can click here to see a list of the classes, but I’ll also walk you through some examples.

This video shows you how to customize the frontend of UpStream:

Example #1. Changing the Avatar Area

Let’s start with the avatar area on the frontend of UpStream:

If you want to remove this avatar box, you can use this CSS:

body.upstream-front-end .profile {
display: none;
}

Example #2. Removing the Export Button

Let’s take another example with the “Export” button you can see below:

If you want to remove the Export button, you can target it using this CSS:

body.upstream-front-end .upstream-export-button {
display: none;
}

Example #3. Customizing the Client Row

Here’s a third example: imagine you want to remove the “Clients” row for Projects:

You can remove that column using this CSS:

body.upstream-front-end table#projects th[data-column="client"],
body.upstream-front-end table#projects td[data-column="client"] {
display: none;
}

Or you could change the style of the Clients column. I don’t recommend you do this, but if you replace display: none; with background-color: red; then you’ll get this display:

Example #4. Removing the Progress Field

Here’s a fourth example: you want to remove the “Progress” field in the modal window for Tasks:

You can hide that Progress field using this code:

body.upstream-front-end #modal-task .row.upstream-task-progress {
    display: none;
}

CSS Summary

Almost every feature in UpStream can be hidden or modified using CSS!

In the example code, we show the CSS needed to target different parts of the UpStream frontend. Those examples show you how to hide each feature, but you could replace the display: none; with any other CSS you wanted to use.

Please don’t modify the UpStream CSS files. You can place this CSS in your theme’s files and they will override the UpStream defaults.

Other Changes in Version 1.22.1

Added an option to order the table of Tasks by status.
Added an action link in the plugins list so you can easily enter the license key.
Added a warning in the plugins list if there is no license key set, or if automatic update is not available.
Fixed the ordering for Milestone, Tasks and Bugs columns in the front-end.
Fixed the date format in datepicker fields when the date format has “S”.
Fixed a PHP warning when a status is not defined.

Finally, to make these changes possible, there was a release for one UpStream extension:

Frontend Edit, version 1.7.9. See the changelog.

Thanks!

Thanks to all of you who use and support UpStream.

There are lots more cool features to come over the next few weeks. If you have feedback, please get in touch: help@upstreamplugin.com.