Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Improvement via Css plugin (trello like board) #2690

Closed
apmcodes opened this issue Sep 21, 2016 · 3 comments
Closed

UI Improvement via Css plugin (trello like board) #2690

apmcodes opened this issue Sep 21, 2016 · 3 comments

Comments

@apmcodes
Copy link

apmcodes commented Sep 21, 2016

Just a UI improvement Css code. Not sure if its OK to share share code here.

Preview
kanboard-ui

NOTE: Need the Css plugin.

`header {
background: #755287;
padding: 10px 10px 15px 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
border: 0px !important;
}

h1 {
font-weight: normal;
color: #FFFFFF;
}

body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-top: 0px;
/* background: #89609e;*/
color: #4d4d4d;
font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
line-height: 18px;
}

.page {
/background: #89609e;/
padding: 10px 10px 15px 10px;
margin-left: 0px;
margin-right: 0px;
clear: both;
}

.ui-sortable {
background: #e2e4e6;
padding: 5px 5px 5px 5px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

.task-board {
border-radius: 3px;
margin-bottom: 6px;
padding: 4px 4px 4px 6px;
}

div.task-board-recent {
border-width: 0px;
}

.task-board-title {
font-size: 1.15em;
margin-top: 0px;
margin-bottom: 4px;
}
th {
background: none; */
}
td, th {
border: 0px solid #eee;
padding: 0px .5em;
}
.board-column-expanded {
background: #e2e4e6;
padding: 5px 5px 5px 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

.table-small {
font-size: 1em;
}

.filter-box input[type=text] {
font-size: 14px;
padding: 0px 6px;
margin: 0px;
}
.filter-box {
margin: 3px;
}

/* unvisited link */
a:link {
color: #4d4d4d;
}

/* visited link */
a:visited {
color: #4d4d4d;
}

/* mouse over link */
a:hover {
color: #1d1d1d;
text-decoration: none;
}

/* selected link */
a:active {
color: #1d1d1d;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

a:active {
text-decoration: none;
}

td.color-white, div.color-white {
border-color: #ffffff;
border-left-width: 5px;
background-color: white;
}

td.color-yellow, div.color-yellow {
border-color: #f2d600;
border-left-width: 5px;
background-color: white;
}

td.color-blue, div.color-blue {
border-color: #0079bf;
border-left-width: 5px;
background-color: white;
}

td.color-green, div.color-green {
border-color: #61bd4f;
border-left-width: 5px;
background-color: white;
}

td.color-purple, div.color-purple {
border-color: #c377e0;
border-left-width: 5px;
background-color: white;
}

td.color-red, div.color-red {
border-color: #eb5a46;
border-left-width: 5px;
background-color: white;
}

td.color-orange, div.color-orange {
border-color: #ffab4a;
border-left-width: 5px;
background-color: white;
}

td.color-grey, div.color-grey {
border-color: #b6bbbf;
border-left-width: 5px;
background-color: white;
}
`

@apmcodes apmcodes changed the title UI Imptovement via Css plugin (trello like board) UI Improvement via Css plugin (trello like board) Sep 21, 2016
@krembo99
Copy link

Nice design .
However I believe that the UI problem is much more deep .
The whole CSS && HTML structure must be changes, preferably to support some wise supported freamework ( bootstrap ? ) . As for now , the whole app is not consistent in UI , not responsive , and for sure not mobile - adaptive .

I am willing to collaborate for that goal ( time permitting ) but that would require to touch almost each file that produces an output ... Large task .

@aljawaid
Copy link
Contributor

How do we get the CSS plugin?

If I paste the code in my CSS settings of kanboard then it generates an SQL error.

@trajche
Copy link

trajche commented Sep 28, 2016

You can use this: https://github.com/kanboard/plugin-example-css
as an example to create a custom css plugin for your Kanboard.

@kanboard kanboard locked and limited conversation to collaborators Feb 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

5 participants