Do you have some feature in mind that you'd love to see in Couch? Let us know.
9 posts Page 1 of 1
Hi All,

Couple of things I think would be very useful in the Admin area are:

Ability to define what fields show when viewing a list of clonal entries, i.e. rather than just title and folder name, if we could see custom fields like "Condition - NEW, USED" and also filter the view of entries by those, also author name if possible?

I'd still love to see a search box here to search for entries.

The ability to define how many results show per clonable page, 20,50,100 etc
patrickvibes wrote: Ability to define what fields show when viewing a list of clonal entries, i.e. rather than just title and folder name, if we could see custom fields like "Condition - NEW, USED" and also filter the view of entries by those, also author name if possible?


The custom list view and custom page view is achievable, I can't quite recall the details but if you read through the documentation on databound forms, you should find what you're looking for.

As for the search box, I too wouldn't mind this.

Additionally a way to list columns by "asc" or "desc", as can be seen in windows explorer when clicking on "name", "date modified", "title" or "#".

Lastly, after implementing the new User Management System I realized I have too many templates in the back end, a great idea would be to group them up say... All member related templates can be grouped under MEMBERS, where the background-color can also be set for each group, ofcourse clicking on the group title would unfold the group's content... (The template titles)
I'll send an image of what I mean as soon as I get on a PC.
---
You live many times, but only ever remember your lives.length - 1
---
Image
As can be seen, the groups are colour coded, everything under the members module maintains the same colour. (I wish I could place this module underneath Couch's USERS tab! Or fuse them into one, why not) and everything under a different group is coloured accordingly.
Also within the same group, background colours can be assigned as I have at the bottom of the image, to differentiate between legal document pages and general website pages.

The members group can be collapsed just as well as the "Website Data" group, ofcourse the current page you are viewing would be indicated with that triangle pointy thingy next to "Members" :)
And collapsible tabs are indicated by the double arrows on the far left, also if they are currently expanded or collapsed..

Attachments

---
You live many times, but only ever remember your lives.length - 1
---
Image
cholasimmons wrote: As can be seen, the groups are colour coded, everything under the members module maintains the same colour. (I wish I could place this module underneath Couch's USERS tab! Or fuse them into one, why not) and everything under a different group is coloured accordingly.
Also within the same group, background colours can be assigned as I have at the bottom of the image, to differentiate between legal document pages and general website pages.

The members group can be collapsed just as well as the "Website Data" group, ofcourse the current page you are viewing would be indicated with that triangle pointy thingy next to "Members" :)
And collapsible tabs are indicated by the double arrows on the far left, also if they are currently expanded or collapsed..


sir, can you teach me how to make menu like yours?
thx in advance
As soon as possible!

Touch me up : abada[dot]zulma[at]gmail[dot]com
Hehehe I'll take that as a compliment on my graphics work.
This is just an illustration I did on my computer, we cannot "yet" do this in couch as KK is yet to read this post and implement my idea ;)
Lol
---
You live many times, but only ever remember your lives.length - 1
---
Image
Changing the aesthetics and functionality of the admin panel can be achieved partly by using CSS. We have changed the sidebar into a navigation bar which scrolls on mobiles (using the <cms:editable type='message'> to inject html and js.

Its a long way around but it works by editing the styles.css file found in Couch -> Theme.

We have made custom themes and sizing arrangements for small text inputs like 'featured song' which 'declutters' the admin panel for us successfully.

Hope this helps.

Attachments

Very impressive indeed, @wizardradio :)

Any chance you could share the code with our community?
I'd like to see you do that with my many many many sidebar links!!
---
You live many times, but only ever remember your lives.length - 1
---
Image
cholasimmons - The beauty of the code is that the overflow of the sidebar links can be scrolled on mobile. There is no reason to believe you couldn't implement this code and include overflow-x:scroll; for desktop implementation too!

I have included the CSS file. To make the mobile aspect of the admin panel work, it is important to include <cms:editable type="message" name="banner"><meta name = "viewport" content = "width = device-width"></cms:editable> in every template you want on the admin panel mobile version.

I am sure there is a better way to do this but this is the only workaround I've found so far.

Code: Select all
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
input:focus,select:focus,textarea:focus{
outline:none;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 12px;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1.5;
}

table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }

body {
  font-size: 75%;
  color: #000;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}


h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus,
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; outline: none; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre             { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


li ul,
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th       { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }

hr {
     background: #ddd;
     color: #ddd;
     clear: both;
     float: none;
     width: 100%;
     height: .1em;
     margin: 0 0 1.45em;
     border: none;
}
hr.space {
  background: #fff;
  color: #fff;
}

.tiny{
   font-size:11px;
   line-height:1.2em;
}
.verytiny{
   font-size:9px;
   line-height:1.4em;
}
.alignright {
   float: right;
}

.alignleft {
   float: left
}

.center {
   text-align: center;
}
.clear {
   clear:both;
}

.error,
.notice,
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }

/**********************************************************************/
body{
   background:#f0f0f0;
}
html, body{    height: 100% !important; }
span.k_desc{ color:#777; }
a{ color:#446F95; text-decoration:none; }
a:hover, a:active, a:focus { color:#D6491B; }

#container {
width:1095px;
margin:0 auto;
}
* html #container {
height: 100%;
}
#container2 {
   float: left;
}
#header{
height:85px;
position:relative;
margin-bottom: 5px;
}
#header h2{
float:left;
color:#606060;
margin-left:10px;
padding:20px 0 0 0;
text-align:center;
font:35px 'Heading';
}
#header div#create_new, #header div#bulk_upload{
float:left;
display: inline;
padding-top: 43px;
padding-left: 10px;
}
#header div#view_template, #header div#view_folders{
float:left;
display: inline;
padding-top: 43px;
padding-left: 0px;
   }
#header a.button { margin-right:0; }
#header div.error{
clear: right;
margin-left: 220px;
margin-bottom:10px;
margin-right: 22px;
   }
#sidebar{
float:left;
width:1075px;
padding:0 10px;
text-align:left;
}
#sidebar ul{
margin: 0;
width:910px;
overflow:hidden;
height:31px;
}
#sidebar ul li{
display: inline;
float:left;
}
#sidebar ul li a{
color: #AAAAAA;
display: block;
font-size: 13px;
line-height: 1.2em;
padding: 8px 10px 8px 10px;
outline: none;
}
#sidebar ul li a:hover{
color: #446F95;
outline: none;
}
#sidebar ul li.active-template a{
color: #FFFFFF;
background: #446F95;
}
#sidebar ul li.hidden-template a{
display:none;
}
#sidebar ul li.template-separator a{
padding: 0;
margin: 12px 20px 6px;
border-top: 1px solid #45423E;
line-height: 0;
}
#sidebar ul li a img{
display:none;
}
#admin-wrapper {
float:left;
width:1095px;
border: 1px solid lightgrey;
background: #FFF;
}
#admin-wrapper-header{
height: 30px;
}
#admin-wrapper-header h3{
display:none !important;
}
#admin-wrapper-header div#advanced-settings{
float: right;
margin-right: 12px;
height: 30px;
padding:0 10px;
background:#446F95;
}
#admin-wrapper-header div#advanced-settings a{
   color: #fff;
   padding: 0 20px 0 6px;
   line-height: 30px;
   outline: none;
}
#admin-wrapper-header div#advanced-settings a.collapsed{
   background: transparent url(images/arrows.gif) no-repeat right -7px;
}
#admin-wrapper-header div#advanced-settings a.expanded{
   background: transparent url(images/arrows.gif) no-repeat right -38px;
}
#admin-wrapper-header div#advanced-settings a:hover{
   color: #FFF;
   outline: none;
}
#admin-wrapper-body{
   float: left;
width: 1065px;
   padding: 14px 14px 6px 14px;
   display:inline;
   position: relative;
}
#admin-sidebar{
   float:right;
   width:200px;
   padding: 14px;
   margin-left: 5px;
   display:none;
   border: 1px solid #E6E6E3;
}
   input#f_k_year{width:30px;}
   input#f_k_day,
   input#f_k_hour,
   input#f_k_min
   {width:18px;}
   div#access-levels select{width: 185px;}
   
#admin-content{
float:left;
width: 1072px;
display:inline;
margin-bottom: 16px;
}
span.k_notice{
   display: block;
}
div.k_element{
   margin-bottom: 18px;
   clear: both;
   position: relative;
   background-color: #fff;
   overflow: hidden;
   zoom: 1;
}
div.k_element_deleted{
   opacity: 0.6;
   filter: alpha(opacity=60);
   position: absolute;
   z-index: 9999;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #FBE3E4;
   cursor: pointer;
}

.k_image_text, .k_file_text{
   float: left;
   margin-right: 5px;
   margin-bottom: 16px;
   margin-top: 3px;
}
.group-wrapper, .group-wrapper_ex{
   margin-bottom:16px;
   border:1px solid #E6E6E3;
   padding:0px;
   -moz-border-radius:5px; -webkit-border-radius: 5px; border-radius: 5px;
}       
div.group-wrapper.listing{
   float:right;
   width:734px
}
.group-toggler, .group-toggler_ex{
   border-bottom:1px solid #E6E6E3;
   background-color: #F9F9F8;
   padding: 6px;
   margin:0px;
   cursor: pointer;
   /*background-image:url(images/bg.jpg);*/
   background-position:0 0;
   background-repeat:repeat-x;
   zoom: 1;
}
.group-toggler_ex{ cursor: default; }

.group-slider, .group-slider_ex{
   padding:10px;
   padding-top:15px !important;
   padding-right:15px !important;
   position: relative;
   zoom: 1;

}

table.listing{
   margin-bottom: 0;
}
table.listing th{
   overflow: hidden;
   vertical-align: top;
   white-space: nowrap;
   background-color: transparent;
   border-bottom: 1px solid #E6E6E3;
   color: #333;
   background-color:#F9F9F8;
}
table.listing th.checkbox{
   padding-right: 0;
   width: 20px;
}
table.listing tbody tr:hover td {
  background-color: #F9F9F8;
}
table.listing td{
   overflow: hidden;
   vertical-align: top;
   white-space: nowrap;
   border-bottom: 1px solid #E6E6E3;
}
table.listing td img{ margin-bottom:-2px; }
table.listing td.last_row{
   border-bottom: 0;
}
table.listing  td.checkbox{
   border-left: 0;
   width: 20px;
}
table.listing  td.up-down{
   background-color: #F9F9F8;
   width: 30px;
   padding: 0;
}
table.listing  td.up-down a{
   margin: 0;
   padding: 0;
   line-height:4px;
   display: block;
}
table.listing  td.name{
   width: 320px;
   padding-right: 5px;
}
table.listing.nested  td.name{
   width: 560px;
}
table.listing.nested span.pointer_links{ color: #a0a0a0; }
table.listing.nested span.pointer_links a{
   font-size: 11px;
   color: #a0a0a0;
   text-decoration: underline !important;
}
table.listing.nested  td.name  span.unpublished{
   /*color:red !important;*/
   text-decoration: line-through !important;
}
table.listing td.comments-count{
   padding-right: 6px;
   text-align: right;
   width: 70px;
}
table.listing td.comments-count a{
   font-size: 10px;
}
table.listing td.comments-count img{
display:none !important;
}
table.listing td.comments-count span.comments-count{
   padding-left: 6px;
}
table.listing td.user_name{
   width: 20%;
}
table.listing td.folder{
   width: 120px;
   background-color: #F9F9F8;
   font-size: 11px;
}
table.listing td.folder.drafts{
   width: 105px;
}
table.listing td.date{
   width: 75px;
   font-size: 11px;
}
table.listing td.date.drafts{
   width: 95px;
   _width:115px;
}
table.listing td.actions{
   width: 70px;
   background-color: #F9F9F8;
   padding-right: 5px;
}
table.listing.nested  td.actions{
   width: 80px;
}
table.listing td.actions img{
   margin-right: 7px;
}
a#listing-header{
   font-size: 24px;
   color: #111;
}
table.listing td.folder-title{
   width: 400px;
}
table.listing td.folder-name{
   background-color:#F9F9F8;
}

textarea,
input[type="text"],
input[type="password"],
select {
background-color:#FFFFFF;
border: 1px solid #E6E6E3;
padding: 1px;
}
input[type="submit"]{
padding: 16px 0;
font:12px 'Open Sans';
cursor: pointer;
background: #446F95;
color: #FFF;
border: none;
-webkit-appearance: none;
width:530px;
}
input[type="submit"]:hover{
background: #999;
outline: none;
}
input:focus,
textarea:focus{
background-color:#FBFBFB;
}
ul#admin-subnav, ul.k_element_deleted_nav{
height:26px;
position:absolute;
right:10px;
top:0;
margin:5px 1px 5px;
}
#admin-subnav li, ul.k_element_deleted_nav li{
display:inline;
float:left;
margin:0 0 0 10px;
color:#999;
font-size:12px;
font:12px 'Open Sans';
line-height:26px;
}
#admin-subnav li a, ul.k_element_deleted_nav li a{
color:#999;
text-decoration:none;
font:12px 'Open Sans';
}
#admin-subnav li a:hover{
color:#446F95 !important;
}
ul.k_element_deleted_nav{ background-color: #FFFFE0; opacity:1 !important; border: 1px solid #777; margin-top: 2px; padding-right:10px}
body.login{
background: #F0F0F0;
}
#login{
width:600px;
position:absolute;
left:50%;
top:50%;
margin:-210px 0 0 -300px;
text-align:center;
padding:5px;
background:#fff;
border:1px solid lightgrey;
}
#login h1{
color:#606060;
font-weight:bold;
padding:10px 0 0 0;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
font:35px 'Heading';
}
#login form, #login div.wrapper{
margin-bottom:10px;
}
#login img{
display:none !important;
}
#login form label{
color:#777;
font:13px 'Open Sans';
}
#login p{
padding:5px;
text-align:justify;
font:13px 'Open Sans';
color:grey !important;
line-height: 1.8;
-margin-before: 1em;
-webkit-margin-after: 1em;
}
#login form #k_user_name, #login form #k_user_pwd, #login form #k_user_pwd_repeat, #login form #k_user_email{
width:500px;
font-size:17px;
margin-bottom:30px;
padding:10px;
color:#707070;
font:17px 'Open Sans';
background-color:#fff;
border-radius: 0.25em;
border: 1px solid #d2d8d8;
}
/* Comments */   
.comment{
   color:#777777;
   font-size:12px;
}
.unapproved{
   background-color:#FFFFE0;
}
.comment-checkbox{
   vertical-align:top;
   border-bottom:1px solid #DFDFDF;
   padding-bottom:12px;
   padding-top:8px;
   width: 20px;
}
.comment-author{
   vertical-align:top;
   width:20%;
   border-bottom:1px solid #DFDFDF;
   padding-bottom:12px;
   padding-top:8px;
}
.comment-body{
   vertical-align:top;
   border-bottom:1px solid #DFDFDF;
   padding-bottom:12px;
   padding-top:8px;
}
.comment-meta{
   margin-bottom:0;
}
.comment-content{
   vertical-align:top;
   margin:0.6em 0;
}
.comment-actions{
   margin-bottom:0;
}
.comment-date{
   font-size:10px;
}   

.wrap-paginator{
   float:left;
   height: 34px;
   /*width:734px;*/
}
.wrap-paginator .record-count{
   float:right;
   padding: 3px;
   margin: 3px 3px 8px;
   color:#777777;
   font-size:13px;
   font-style:italic;
}
.wrap-paginator .bulk-actions{
   float:left;
   color:#777777;
   margin: 0px 10px 12px 0;
   height: 24px;
}
.wrap-paginator .bulk-actions select{
   float: left;
   margin:1px 4px 1px 0;
}
.filter{
   float:left;
   list-style-type:none;
   margin: 10px 0 10px 3px;
   color:#777777;
}
.filter li{
   display:inline;
}
.filter a.current{
   font-weight:bold;
   color:#000;
}
/*
   Pagination
   Source: http://www.strangerstudios.com/sandbox/pagination/diggstyle.php (strangerstudios.com)
*/
div.pagination {
   padding: 3px 0 3px 3px;
   margin: 3px 0px 8px;
   float:right;
}

div.pagination a {
   padding: 2px 5px 2px 5px;
   margin: 2px;
   border: 1px solid #CCC;
   text-decoration: none; /* no underline */
   color: #446F95;
   -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
div.pagination a:hover, div.pagination a:active {
   border: 1px solid #D6491B;
   color: #D6491B;
}
div.pagination span.page_current {
   padding: 2px 5px 2px 5px;
   margin: 2px;
   border: 1px solid #CCC;
   font-weight: bold;
   background-color: #EEE;
   color: #446F95;
   -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
div.pagination span.page_disabled {
   padding: 2px 5px 2px 5px;
   margin: 2px;
   border: 1px solid #EEE;
   color: #DDD;
   -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}

/*
   Buttons
   http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
*/
a.button {
    background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
   outline: none;
}
a.button.nocurve {
   background-image: url('images/bg_button_a2.gif')
}
a.button span {
    background: transparent url('images/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
a.button span.nocurve {
   background-image: url('images/bg_button_span2.gif')
}
a.button:active, a.button:hover {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span, a.button:hover span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

/* Gallery */
div#gallery.group-wrapper.listing {
   border:0;
   margin-bottom:6px;
}
#gallery .item {
   color:#666666;
   font-family:Arial,Helevtica,Verdana,san-serif;
   font-size:12px;
   float:left;
   font-size:12px;
   line-height:1.7em;
   margin:0 14px 18px 0;
   position:relative;
   width:135px;
}
#gallery .item.last {
   margin-right:0;
}
#gallery .item_inner {
   background:#FFFFFF none repeat scroll 0;
   border:1px solid #E3E3E3;
   -moz-border-radius: 3px;
   -webkit-border-radius:3px;
   border-radius:3px;
   float:left;
   height:148px;
   padding:9px 9px 0;
   width:115px;
}
#gallery .item_inner.folder {
   border: 0;
}
#gallery .item_image {
   border:medium none;
   display:block;
   height:115px;
   left:10px;
   overflow:hidden;
   position:absolute;
   top:10px;
   width:115px;
   color:#888F96;
   background: no-repeat center center;
   background-color: #F0F0F0;
}
#gallery .item_image.folder {
    background-color: #FFFFFF;
}
#gallery .item .checkbox{
   padding:0 20px 0 0;
   position:absolute;
   left:10px;
   top:135px;
}
#gallery .actions {
   height:18px;
   width:60px;
   opacity:1;
   overflow:hidden;
   position:absolute;
   top:135px;
   right:12px;
   z-index:10;
}
#gallery .actions a {
   display:block;
   float:right;
   width:16px;
   height:16px;
   border:0 none;
   margin:0;
   padding:0;
   padding-left:4px;
   text-decoration:none;
}
#gallery .actions a img{
   border:0 none;
   margin:0;
   padding:0;
}
#gallery .item .name, #gallery .item .time, #gallery .item .size {
      clear: both;
      text-align: center;
      cursor: default;
      white-space: nowrap;
      overflow: hidden;
}
#gallery .item .name {
      font-weight: bold;
      padding:5px 8px 0;
      margin-top: 4px;
}
#gallery .item .time, #gallery .item .size {
   font-size: 11px;
}
#gallery .item .size{
   line-height: 1.4em;
}
#gallery  .select_all {
   color:#777777;
   float:left;
   height:24px;
   margin:0;
}
#gallery  .empty {
   padding: 25px;
   margin-top: 25px;
   border: 1px solid #E3E3E3;
   color:#666666;
}
#footer{
height:0 !important;
overflow:hidden !important;
}
@media screen and (max-width: 850px){
#container{
width:760px;
margin:0 auto;
display:block;
}
ul#admin-subnav{
height:26px;
margin:5px 1px 0 0;
}
#sidebar{
width:750px;
height:30px;
position:absolute;
padding:0 0;
overflow-x:scroll;
overflow-y:hidden;
}
#sidebar ul{
width:890px;
}
#admin-wrapper{
width:750px;
margin:35px 0 0 4px;
}
h1{
font-family:'Heading' !important;
}
*, #admin-subnav li{
font-family: 'Open Sans', Avenir-Light;
}
#admin-wrapper-body{
width: 723px;
}
#admin-content{
width: 720px;
}
}
9 posts Page 1 of 1
cron