There are css classes to customize the panels for datasets, collections, spaces and files. 

For adding the a border color to the panels, we have added the following classes and corresponding files below

Class NameFiles
.collection-panelcollections.tile, collections.listitem, collections.listchildcollections, home (Following Collections)
.dataset-paneldatasets.tile, datasets.listitem, home (Following Datasets)
.space-panel

spaces.tile, spaces.listitem, home (Following Spaces)

.file-panelfile.tile, file.listitem, home (Following Files)
.folder-panelfolder.listitem, curations.listFolder

 

For adding a background to the footer of panels in the tiles (the section where the counts are). You can use the classes below. And they are referenced in the corresponding files.

 

Class NameFiles
.collection-panel-footercollections.tile, home (Following Collections)
.dataset-panel-footerdatasets.tile, home (Following Datasets)
.space-panel-footerspaces.tile, home (Following Spaces)
.file-panel-footerfile.tile, home (Following Files)

 

You can also add a background to the title of a space, dataset, collection and files using the following classes:

Resource TypeClass Name
Collection.collection-title
Dataset.dataset-title
Space.file-title-div
File.space-title
  • No labels

1 Comment

  1. Rob Kooper

    An example used in SEAD:

    SEAD custimization
    .space-panel-footer {
    background-color: #0b5ca3;
    color: #fff
}

.space-panel-footer .glyphicon {
    color: #fff
}

.space-panel {
    border-color: #0b5ca3
}

.space-panel .glyphicon-tent {
    color: #0b5ca3
}

.dataset-panel-footer {
    background-color: #cb4f00;
    color: #fff
}

.dataset-panel-footer .glyphicon {
    color: #fff
}

.dataset-panel {
    border-color: #cb4f00
}

.dataset-panel .glyphicon-briefcase {
    color: #cb4f00
}

.dataset-title,
#search-dataset-title {
    background-color: #cb4f00;
    color: #fff
}

.collection-panel-footer {
    background-color: #8a0529;
    color: #fff
}

.collection-panel .glyphicon-th-large {
    color: #8a0529
}

.collection-title,
#search-collection-title {
    background-color: #8a0529;
    color: #fff
}

.collection-panel-footer .glyphicon {
    color: #fff
}

.collection-panel {
    border-color: #8a0529
}

.file-panel,
.folder-panel {
    border-color: #000
}

.file-title-div,
#search-file-title {
    background-color: #000;
    color: #fff;
    padding-bottom: 5px;
}

.file-panel .glyphicon-file {
    color: #000
}

.file-panel-footer {
    background-color: #000;
    color: #fff
}

.file-panel-footer .glyphicon {
    color: #fff
}

.folder-panel .glyphicon-folder-close {
    color: #000
}

.space-panel-footer .btn-link,
.dataset-panel-footer .btn-link,
.collection-panel-footer .btn-link,
.file-panel-footer .btn-link,
.dataset-title a,
.collection-title a,
.file-title-div span.h1 a,
#edit-file {
    color: #fff;
    text-decoration: underline;
    padding-bottom: 5px;
}