skip to Main Content

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

In the example code below, we show the CSS needed to target different parts of the UpStream frontend. Here are some examples of how to use these classes.

Here’s a video showing how to customize your UpStream frontend:

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.

These CSS classes allow you to control the items inside the modals for each Project:

body.upstream-front-end #modal-project .row.upstream-project-title {}
body.upstream-front-end #modal-project .row.upstream-project-status {}
body.upstream-front-end #modal-project .row.upstream-project-owner {}
body.upstream-front-end #modal-project .row.upstream-project-client {}
body.upstream-front-end #modal-project .row.upstream-project-client-users {}
body.upstream-front-end #modal-project .row.upstream-project-start-date {}
body.upstream-front-end #modal-project .row.upstream-project-end-date {}
body.upstream-front-end #modal-project .row.upstream-project-description {}

These CSS classes allow you to control the items inside the modals for each Task:

body.upstream-front-end #modal-task .row.upstream-task-title {}
body.upstream-front-end #modal-task .row.upstream-task-assigned-to {}
body.upstream-front-end #modal-task .row.upstream-task-status {}
body.upstream-front-end #modal-task .row.upstream-task-progress {}
body.upstream-front-end #modal-task .row.upstream-task-milestone {}
body.upstream-front-end #modal-task .row.upstream-task-start-date {}
body.upstream-front-end #modal-task .row.upstream-task-end-date {}
body.upstream-front-end #modal-task .row.upstream-task-notes {}

These CSS classes allow you to control the items inside the modals for each Milestone:

body.upstream-front-end #modal-milestone .row.upstream-milestone-milestone {}
body.upstream-front-end #modal-milestone .row.upstream-milestone-assigned-to {}
body.upstream-front-end #modal-milestone .row.upstream-milestone-start-date {}
body.upstream-front-end #modal-milestone .row.upstream-milestone-end-date {}
body.upstream-front-end #modal-milestone .row.upstream-milestone-notes {}

These CSS classes allow you to control the items inside the modals for each File:

body.upstream-front-end #modal-file .row.upstream-file-title {}
body.upstream-front-end #modal-file .row.upstream-file-assigned-to {}
body.upstream-front-end #modal-file .row.upstream-file-description {}
body.upstream-front-end #modal-file .row.upstream-file-file {}

These CSS classes allow you to control the items inside the modals for each Bug:

body.upstream-front-end #modal-bug .row.upstream-bug-title {}
body.upstream-front-end #modal-bug .row.upstream-bug-assigned-to {}
body.upstream-front-end #modal-bug .row.upstream-bug-severity {}
body.upstream-front-end #modal-bug .row.upstream-bug-status {}
body.upstream-front-end #modal-bug .row.upstream-bug-due-date {}
body.upstream-front-end #modal-bug .row.upstream-bug-description{}
body.upstream-front-end #modal-bug .row.upstream-bug-file {}

These CSS classes allow you to control the frontend tables for each Project:

body.upstream-front-end table#projects th[data-column="title"],
body.upstream-front-end table#projects td[data-column="title"] {}

body.upstream-front-end table#projects th[data-column="members"],
body.upstream-front-end table#projects td[data-column="members"] {}

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

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

body.upstream-front-end table#projects th[data-column="progress"],
body.upstream-front-end table#projects td[data-column="progress"] {}

body.upstream-front-end table#projects th[data-column="status"],
body.upstream-front-end table#projects td[data-column="status"] {}

body.upstream-front-end table#projects th[data-column="categories"],
body.upstream-front-end table#projects td[data-column="categories"] {}

These CSS classes allow you to control the frontend tables for each Milestone:

body.upstream-front-end table#milestones th[data-column="milestone"],
body.upstream-front-end table#milestones td[data-column="milestone"] {}

body.upstream-front-end table#milestones th[data-column="assigned_to"],
body.upstream-front-end table#milestones td[data-column="assigned_to"] {}

body.upstream-front-end table#milestones th[data-column="tasks"],
body.upstream-front-end table#milestones td[data-column="tasks"] {}

body.upstream-front-end table#milestones th[data-column="progress"],
body.upstream-front-end table#milestones td[data-column="progress"] {}

body.upstream-front-end table#milestones th[data-column="start_date"],
body.upstream-front-end table#milestones td[data-column="start_date"] {}

body.upstream-front-end table#milestones th[data-column="end_date"],
body.upstream-front-end table#milestones td[data-column="end_date"] {}

These CSS classes allow you to control the frontend tables for each Task:

body.upstream-front-end table#tasks th[data-column="title"],
body.upstream-front-end table#tasks td[data-column="title"] {}

body.upstream-front-end table#tasks th[data-column="assigned_to"],
body.upstream-front-end table#tasks td[data-column="assigned_to"] {}

body.upstream-front-end table#tasks th[data-column="status"],
body.upstream-front-end table#tasks td[data-column="status"] {}

body.upstream-front-end table#tasks th[data-column="progress"],
body.upstream-front-end table#tasks td[data-column="progress"] {}

body.upstream-front-end table#tasks th[data-column="milestone"],
body.upstream-front-end table#tasks td[data-column="milestone"] {}

body.upstream-front-end table#tasks th[data-column="start_date"],
body.upstream-front-end table#tasks td[data-column="start_date"] {}

body.upstream-front-end table#tasks th[data-column="end_date"],
body.upstream-front-end table#tasks td[data-column="end_date"] {}

These CSS classes allow you to control the frontend tables for each Bug:

body.upstream-front-end table#bugs th[data-column="title"],
body.upstream-front-end table#bugs td[data-column="title"] {}

body.upstream-front-end table#bugs th[data-column="assigned_to"],
body.upstream-front-end table#bugs td[data-column="assigned_to"] {}

body.upstream-front-end table#bugs th[data-column="severity"],
body.upstream-front-end table#bugs td[data-column="severity"] {}

body.upstream-front-end table#bugs th[data-column="status"],
body.upstream-front-end table#bugs td[data-column="status"] {}

body.upstream-front-end table#bugs th[data-column="due_date"],
body.upstream-front-end table#bugs td[data-column="due_date"] {}

body.upstream-front-end table#bugs th[data-column="file"],
body.upstream-front-end table#bugs td[data-column="file"] {}

These CSS classes allow you to control the frontend tables for each File:

body.upstream-front-end table#files th[data-column="title"],
body.upstream-front-end table#files td[data-column="title"] {}

body.upstream-front-end table#files th[data-column="created_by"],
body.upstream-front-end table#files td[data-column="created_by"] {}

body.upstream-front-end table#files th[data-column="created_at"],
body.upstream-front-end table#files td[data-column="created_at"] {}

body.upstream-front-end table#files th[data-column="assigned_to"],
body.upstream-front-end table#files td[data-column="assigned_to"] {}

body.upstream-front-end table#files th[data-column="file"],
body.upstream-front-end table#files td[data-column="file"] {}

Related Articles