Create New Theme in Alfresco share

In an earlier post we had explored how Alfresco theme is structured and where can we see all related files for all out of box Alfresco themes.

Here we will see how to add new  theme to Alfresco share because clients wants to customize the look and feel of Alfresco based on their requirements and you need to create new theme for client.

Step 1:

Create a copy of one of the out of box theme folder and rename it with your theme name. I have copied greenTheme and renamed it as redTheme.

Step 2:

Edit presentation.css which resides under them folder and change all references of greenTheme with redTheme. It should look similar to this file. I have also changed color codes from green to red shades.

/* Site-wide Styles */

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
{
    border: none;
}

.yui-overlay,
.sticky-wrapper,
.sticky-footer
{
   font-family: Arial, sans-serif;
   color: #526A53;
}

.sticky-footer
{
   font-size: 81%;
}

.sticky-wrapper a,
.sticky-wrapper a:visited,
.sticky-wrapper a:hover,
.sticky-footer a,
.sticky-footer a:visited,
.sticky-footer a:hover,
.yui-overlay a,
.yui-overlay a:visited,
.yui-overlay a:hover
{
   color: #000;
   text-decoration: none;
}

.sticky-wrapper a:hover,
.yui-overlay a:hover,
.sticky-footer a:hover
{
   text-decoration: underline;
}

.sticky-wrapper h1,
.yui-overlay h1
{
   font-family: Helvetica, Arial, sans-serif;
   font-size: 146.5%;
   font-weight: normal;
}

.sticky-wrapper h2,
.yui-overlay h2
{
   font-size: 123.1%;
}

h2.thin
{
   font-weight: normal;
}

h1 .light,
h1 .lighter,
h2 .light,
h2 .lighter
{
   color: #c7dbeb;
}

.sticky-wrapper h3,
.yui-overlay h3
{
   font-size: 108%;
}

.sticky-wrapper h4,
.yui-overlay h4
{
   font-weight: bold;
}

h3 .light,
h3 .lighter,
h4 .light,
h4 .lighter
{
   color: #a2a2a2;
}

.sticky-wrapper hr
{
   color: #E4E4E4;
   background-color: #E4E4E4;
}

.sticky-wrapper label,
.share-form .viewmode-label
{
   color: #606060;
   margin-right: 0.4em;
}

.alfresco-share .sticky-wrapper
{
   background-color: #fff;
}

.alfresco-guest .sticky-wrapper
{
   background: none;
}

.label
{
   font-weight: bold;
}

.error
{
   color: red;
}

.alfresco-share .sticky-wrapper .error
{
   background: white !important;
   color: red !important;
   font-weight: bold;
   padding: 0.2em 1em;
}

.alfresco-share .sticky-wrapper .error-alt
{
   background-color: red !important;
   color: white !important;
   font-weight: bold;
   padding: 0.2em 1em;
}

.light
{
   font-weight: normal;
}

.lighter
{
   font-size: 93%;
   font-weight: normal;
}

.faded
{
   color: #aaa;
}

/* DASHLETS */

.dashlet
{
   border: 1px solid #bababa;
   background-color: white;
}

.dashlet .title
{
   background-color: #92c15f;
   background-image: url(images/dashlet-title-bg.png);
   background-repeat: repeat-x;
   color: #fff;
}

.dashlet .feed
{
   background-image: url(images/feed-icon-16.png);
   background-repeat: no-repeat;
}

.dashlet .toolbar
{
   background-color: #f6f6f6;
   border-bottom: 1px solid #d3d3d3;
}

/*.dashlet .toolbar a
{
   color: #5497c4;
}*/

.dashlet .body
{
   background-color: #F9FCFD;
}

.dashlet .welcome-body a,
.dashlet .welcome-body a:visited,
.dashlet .welcome-body a:hover
{
   color: #FF243E;
}

.dashlet .detail-list-item
{
   border-bottom: 1px dashed #e9e9e9;
}

.yui-skin-redTheme .yui-panel
{
   border-bottom: medium none;
}

.yui-skin-redTheme .mask
{
   opacity: 0.2;
}

.yui-skin-redTheme .yui-panel .hd,
.yui-skin-redTheme .yui-panel .form-buttons,
.yui-skin-redTheme .yui-panel .bdft,
.yui-skin-redTheme .yui-panel .ft
{
   color: #526A53;
   background: #E3EDE6;
   border-bottom: 1px solid #C5C7C6;
   border-left-color: #C5C7C6;
   border-right-color: #C5C7C6;
}

.yui-skin-redTheme .yui-panel .hd
{
   font-size: 123.1%;
   font-weight: bold;
   border-bottom: 1px solid #C5C7C6;
}

.yui-skin-redTheme .yui-panel .form-buttons,
.yui-skin-redTheme .yui-panel .bdft
{
   font-size: 100%;
   border-top: 1px solid #C5C7C6;
}

.yui-skin-redTheme .yui-panel div.form-fields
{
   border-bottom: none;
}

.yui-skin-redTheme .yui-panel .ft
{
   border-top: 1px solid #C5C7C6;
   padding: 5px;
}

.yui-skin-redTheme .yui-panel .bd
{
   color: #526A53;
   background-color: #F7FDF8;
   border-left-color: #C5C7C6;
   border-right-color: #C5C7C6;
}

.yui-skin-redTheme .yui-panel .bd .yui-resize .yui-resize-handle
{
   background-color: #F7FDF8;
}

/* Data Lists: DataTable (Needs to appear before yui-dt-highlighted rule) */

.yui-skin-redTheme .datagrid tr.yui-dt-even
{
   background-color: #ffffff;
}
.yui-skin-redTheme .datagrid tr.yui-dt-even td.yui-dt-asc,
.yui-skin-redTheme .datagrid tr.yui-dt-even td.yui-dt-desc
{
   background-color: #f8f8f8;
}

.yui-skin-redTheme .datagrid tr.yui-dt-odd
{
   background-color: #f8f8f8;
}
.yui-skin-redTheme .datagrid tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-redTheme .datagrid tr.yui-dt-odd td.yui-dt-desc
{
   background-color: #f0f0f0;
}

/* End Data Lists */

.yui-skin-redTheme .yui-dt-data tr.yui-dt-highlighted td.yui-dt-asc,
.yui-skin-redTheme .yui-dt-data tr.yui-dt-highlighted td.yui-dt-desc
{
   background-color: #FCB29F;
   cursor: auto;
}

.yui-skin-redTheme .yui-dt-message,
.yui-skin-redTheme .yui-dt-message tr.yui-dt-highlighted
{
   background-color: white;
}

/* Style the default message  */

.yui-skin-redTheme #message .bd
{
   background-color: #808080;
   color: white;
}

.yui-skin-redTheme #message .bd span.wait
{
   background-image: url(images/wait.gif);
   background-repeat: no-repeat;
}

.yui-skin-redTheme .yui-overlay-hidden #message .bd span.wait
{
   display: none;
}

/* Style the default prompt */

.yui-skin-redTheme #prompt,
.yui-skin-redTheme #userInput
{
   border-top: 1px solid #C5C7C6;
   border-bottom: 1px solid #C5C7C6;
   background-color: #E3EDE6;
}

.yui-skin-redTheme #prompt .bd,
.yui-skin-redTheme #userInput .bd
{
   background-color: #e3ebec;
}

.yui-skin-redTheme #prompt .ft,
.yui-skin-redTheme #userInput .ft
{
   border-left: 1px solid #c4c5c5;
   border-right: 1px solid #c4c5c5;
   background-color: #e3ebec;
}

/* Page title and navigation styles */

.page-title
{
   background-color: #6CA5CE;
   color: white;
}

.page-title a,
.page-title a:visited
{
   color: #000;
}

.page-title a:hover
{
   color: #fff;
}

.page-title h1 span
{
   color: #fff;
}

.site-navigation
{
   background-color: #5FAC34;
   background-image: url(../../components/images/navigation-bg.png);
   border-bottom: 1px solid #3a6c38;
   border-top: 1px dotted #bbd6e7;
   color: white;
}

span.navigation-separator,
span.navigation-item,
span.navigation-item-alt
{
   color: #9fc6e1;
}

span.navigation-item a,
span.navigation-item a:visited
{
   color: #000000;
}

span.navigation-item a.active-page,
span.navigation-item a.active-page:visited,
span.navigation-item a:hover
{
   color: #fff;
}

span.navigation-separator
{
   border-right: 1px dotted #3a6c38;
}

span.navigation-separator-alt
{
   border-right: 1px solid #3a6c38;
}

/* Standard toolbars */

.share-toolbar,
.toolbar
{
   border-bottom: 1px solid #C7CCCE;
}

.share-toolbar .action-bar,
.toolbar .action-bar
{
   border-right: 1px solid #9FB9AB;
}

.share-toolbar .separator,
.toolbar .separator
{
   border: medium none;
   border-right: 1px dotted #3a6c38;
}

.share-toolbar .backLink
{
   background-image: url(../../components/images/back-arrow.png);
   background-position: left center;
   background-repeat: no-repeat;
   color: #333333;
   padding: 0 5px 0 19px;
   margin-right: 5px;
}

.share-toolbar .forwardLink
{
   background-image: url(../../components/images/forward-arrow-16.png);
   background-position: right center;
   background-repeat: no-repeat;
   color: #333333;
   padding: 0 21px 0 5px;
   margin-right: 5px;
}

.sticky-wrapper strong
{
   font-weight: bold;
}

.sticky-wrapper em
{
   font-style: italic;
}

.rich-content a.wiki-missing-page
{
   color: #CC2200 !important;
}

/* Share forms */

.share-form .form-container .form-fields
{
   border: 1px solid #c2c2c2 !important;
   background-color: #f5fff2;
   width: 800px;
}

.yui-skin-redTheme .yui-navset .yui-content
{
   background: #e4f7d4;
}

.input,
.sticky-wrapper input[type="text"],
.sticky-wrapper input[type="password"],
.sticky-wrapper textarea,
.sticky-wrapper select,
.yui-overlay input[type="text"],
.yui-overlay input[type="password"],
.yui-overlay textarea,
.yui-overlay select,
.form-element-border,
.share-form .yui-dt table
{
   border: 1px solid #C5D6E2;
   font-weight: normal;
}

.share-form .yui-dt table td.yui-dt-last
{
   border-right: none;
}

.form-element-background-color
{
   background-color: #FFFFFF;
}

/* same as theme-color-2 */

.toolbar .link a:hover,
.members-bar .member-link a:hover
{
   color: #009300;
}

/* Richtext Editor Plug-ins */

.yui-toolbar-container .yui-toolbar-alfresco-imagelib span.yui-toolbar-icon,
span.mce_alfresco-imagelibrary
{
   background-position: 0 0 !important;
   background-image: url(images/alfresco-imagelib.png) !important;
}

.mce_alfresco-imagelibrary img
{
   background-position: 0px 2px !important;
}

.yui-toolbar-container .yui-toolbar-alfresco-imagelib span.yui-toolbar-icon,
span.mce_alfresco-linklibrary
{
   background-position: 0 0 !important;
   background-image: url(images/alfresco-linklib.png) !important;
}

.mce_alfresco-linklibrary img
{
   background-position: 0px 2px !important;
}

/* Point the YUI button to the themed sprite */

.yui-skin-redTheme .yui-button
{
   background-image: url(images/sprite.png);
}

/* Override YUI Button styles for - flat button style */

.yui-skin-redTheme div.flat-button span.yui-button
{
   background: none;
   border-color: transparent;
}

.yui-skin-redTheme div.flat-button span.yui-button span.first-child
{
   border-color: transparent;
}

.yui-skin-redTheme div.flat-button span.yui-button-hover
{
   background: transparent url(images/sprite.png) repeat-x scroll 0 0;
   border-color: #808080;
}

.yui-skin-redTheme div.flat-button span.yui-button-hover span.first-child
{
   border-color: #808080;
}

.yui-skin-redTheme div.flat-button span.yui-radio-button-checked,
.yui-skin-redTheme div.flat-button span.yui-checkbox-button-checked
{
   background: #5FAC34 none;
}

/* Override checked styles for doclist */

.yui-skin-redTheme .no-check-bg div.flat-button span.yui-radio-button-checked,
.yui-skin-redTheme .no-check-bg div.flat-button span.yui-checkbox-button-checked,
.yui-skin-redTheme .no-check-bg div.flat-button span.yui-radio-button-checked,
.yui-skin-redTheme .no-check-bg div.flat-button span.yui-checkbox-button-checked
{
   background: none;
}

/* Ensure hover state can be activated */

.yui-skin-redTheme .no-check-bg div.flat-button span.yui-button-hover
{
   background: transparent url(images/sprite.png) repeat-x scroll 0 0;
   border-color: #808080;
}

/* Override YUI Button styles for - title button style */

.yui-skin-redTheme .title-button .yui-button
{
   background: transparent url(images/title-button-bg.png) repeat-x 0 0;
   border-color: #e3ffe3;
}

.yui-skin-redTheme .title-button a:hover
{
   color: #000;
}

.yui-skin-redTheme .title-button .yui-button .first-child,
.yui-skin-redTheme .title-button .yui-button
{
   border-color: #e3ffe3;
}

/* Override YUI Button styles for - attention button style */

.yui-skin-redTheme .alfresco-attention-yui-button,
.yui-skin-redTheme .alfresco-attention-yui-button span.first-child
{
   border-color: #e0b000;
}

.yui-skin-redTheme .alfresco-attention-yui-button.yui-button
{
   background-position: 0 -2000px;
}

.yui-skin-redTheme .alfresco-attention-yui-button.yui-button-hover
{
   background-position: 0 -2100px;
}

.yui-skin-redTheme .alfresco-attention-yui-button.yui-button-disabled
{
   background-position: 0 -2200px;
}


/* Paginator link styling */

.yui-skin-redTheme .yui-pg-container span
{
   color: #606060;
}

.yui-skin-redTheme .yui-pg-container span.yui-pg-page.yui-pg-current-page
{
   color: #333333;
   font-weight: bold;
}

.yui-skin-redTheme .yui-pg-container a.yui-pg-first,
.yui-skin-redTheme .yui-pg-container a.yui-pg-previous,
.yui-skin-redTheme .yui-pg-container a.yui-pg-page,
.yui-skin-redTheme .yui-pg-container a.yui-pg-next,
.yui-skin-redTheme .yui-pg-container a.yui-pg-last
{
   border-color: #CBCBCB;
   color: #FF243E;
   text-decoration: none;
}

.yui-skin-redTheme .yui-pg-container a.yui-pg-first:hover,
.yui-skin-redTheme .yui-pg-container a.yui-pg-previous:hover,
.yui-skin-redTheme .yui-pg-container a.yui-pg-page:hover,
.yui-skin-redTheme .yui-pg-container a.yui-pg-next:hover,
.yui-skin-redTheme .yui-pg-container a.yui-pg-last:hover
{
   text-decoration: underline;
}

/* A combination of a link and splitbutton wrapped inside a span */

.yui-skin-redTheme .link-menu-button .yui-button span button
{
   color: #4C4C4C;
   font-size: 2px;
   background-image: url(images/link-menu-button-arrow.png);
   background-position: center center;
}

body.yui-skin-redTheme .link-menu-button .yui-button.yui-button-hover
{
   background-color: #FFFFFF;
   border: 1px solid #008F22;
}

body.yui-skin-redTheme .link-menu-button.link-menu-button-menu-active .yui-button.yui-button-hover
{
   border-color: transparent;
   background-color: transparent;
}

.yui-skin-redTheme .link-menu-button .yui-button span.first-child,
.yui-skin-redTheme .link-menu-button .yui-button.yui-button-activeoption span.first-child,
.yui-skin-redTheme .link-menu-button .yui-button.yui-button-hover span.first-child
{
   border-width: 0;
}

.yui-skin-redTheme .link-menu-button span.link-menu-button-link
{
   border-right: 1px #BDBDBD solid;
}

body.yui-skin-redTheme .link-menu-button.link-menu-button-menu-active
{
   background-color: #FFFFFF;
   border: 1px solid #008F22;
}

.yui-skin-redTheme .link-menu-button.link-menu-button-menu-active .yui-button.yui-menu-button-hover
{
   border: 1px solid #FFFFFF;
}

.topiclist .yui-dt-liner
{
   padding: 0;
}

/* blog/wiki action items links */

body.yui-skin-redTheme .wikipage .editPage a:hover,
body.yui-skin-redTheme .wikipage .deletePage a:hover,
body.yui-skin-redTheme .wikipage .detailsPage a:hover,
body.yui-skin-redTheme .nodeEdit .onEditBlogPost a:hover,
body.yui-skin-redTheme .nodeEdit .onDeleteBlogPost a:hover
{
   
}

.webview .title a,
.wiki .title a
{
   color: #fff;
}

/* YUI Menu */

body.yui-skin-redTheme .yuimenu .bd
{
   border: 1px solid #008f22;
}

body.yui-skin-redTheme .yuimenu .bd a:focus
{
   outline: none;
}

/* YUI Menu roll over state */

body.yui-skin-redTheme .yuimenuitemlabel
{
   text-decoration: none;
}

body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected
{
   background-color: #008f22;
}

body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem .yuimenuitemlabel,
body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem .yuimenuitemlabel a,
body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected div .yuimenuitemlabel,
body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected div .yuimenuitemlabel a
{
   color: #000;
}

body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected .yuimenuitemlabel,
body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected .yuimenuitemlabel a,
body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected div ul li.yuimenuitem-selected .yuimenuitemlabel,
body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected div ul li.yuimenuitem-selected .yuimenuitemlabel a,
body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem-selected span.description
{
   color: #FFF;
}

body.yui-skin-redTheme .yuimenu .bd ul li.yuimenuitem .yuimenuitemlabel-disabled
{
   color: #A6A6A6;
   cursor: default;
}

/*end YUI Menu */

/* Location */

.yui-skin-redTheme .location-path,
.yui-skin-redTheme .location-site
{
   background-position: left 50%;
   background-repeat: no-repeat;
   padding: 2px 0 2px 20px;
}

.yui-skin-redTheme .location-none
{
   margin-left: 0.5em;
}

.yui-skin-redTheme .location-path
{
   background-image: url(../../components/documentlibrary/images/folder-closed-16.png);
   margin-left: 0.5em;
}

.yui-skin-redTheme .location-site
{
   background-image: url(../../components/images/site-16.png);
}

/* end Location*/

/* Doclist */

body.yui-skin-redTheme .doclist .more-actions a:active,
body.yui-skin-redTheme .doclist .more-actions a:hover
{
   background-color: #FCB29F;
   color: #333;
}

body.yui-skin-redTheme .doclist div.more-actions
{
   border: 1px solid #FCB29F;
}

body.yui-skin-redTheme .doclist .action-set a:active,
body.yui-skin-redTheme .doclist .action-set a:hover,
body.yui-skin-redTheme .doclist .action-set .highlighted,
#divCalendarContent .yui-dt-col-actions a:active,
#divCalendarContent .yui-dt-col-actions a:hover
{
   border: 1px solid #FCB29F;
}

body.yui-skin-redTheme .yui-dt-data tr.yui-dt-highlighted,
body.yui-skin-redTheme .doclist tr.yui-dt-odd.yui-dt-highlighted,
body.yui-skin-redTheme .doclist tr.yui-dt-even.yui-dt-highlighted,
body.yui-skin-redTheme .links-body tr.links-selected-row,
body.yui-skin-redTheme .over,
.topicview
{
   background-color: #F7FEF4;
}

.site-members .search-controls
{
   background-color: #F5F5F5;
}

body.yui-skin-redTheme .doclist tr.yui-dt-odd.yui-dt-highlighted td.yui-dt-last,
body.yui-skin-redTheme .doclist tr.yui-dt-even.yui-dt-highlighted td.yui-dt-last
{
   border-left: 1px solid #C7ECBB;
}

body.yui-skin-redTheme .categoryview .category .ygtvtn,
body.yui-skin-redTheme .categoryview .category .ygtvtm,
body.yui-skin-redTheme .categoryview .category .ygtvtmh, body.yui-skin-redTheme .categoryview .category .ygtvtmhh,
body.yui-skin-redTheme .categoryview .category .ygtvtp,
body.yui-skin-redTheme .categoryview .category .ygtvtph, body.yui-skin-redTheme .categoryview .category .ygtvtphh,
body.yui-skin-redTheme .categoryview .category .ygtvln,
body.yui-skin-redTheme .categoryview .category .ygtvlm,
body.yui-skin-redTheme .categoryview .category .ygtvlmh, body.yui-skin-redTheme .categoryview .category .ygtvlmhh,
body.yui-skin-redTheme .categoryview .category .ygtvlp,
body.yui-skin-redTheme .categoryview .category .ygtvlph, body.yui-skin-redTheme .categoryview .category .ygtvlphh,
body.yui-skin-redTheme .categoryview .category .ygtvdepthcell
{
   background-image: url(images/categoryview-sprite.gif);
}

body.yui-skin-redTheme .treeview .ygtvtn,
body.yui-skin-redTheme .treeview .ygtvtm,
body.yui-skin-redTheme .treeview .ygtvtmh,
body.yui-skin-redTheme .treeview .ygtvtmhh,
body.yui-skin-redTheme .treeview .ygtvtp,
body.yui-skin-redTheme .treeview .ygtvtph,
body.yui-skin-redTheme .treeview .ygtvtphh,
body.yui-skin-redTheme .treeview .ygtvln,
body.yui-skin-redTheme .treeview .ygtvlm,
body.yui-skin-redTheme .treeview .ygtvlmh,
body.yui-skin-redTheme .treeview .ygtvlmhh,
body.yui-skin-redTheme .treeview .ygtvlp,
body.yui-skin-redTheme .treeview .ygtvlph,
body.yui-skin-redTheme .treeview .ygtvlphh,
body.yui-skin-redTheme .treeview .ygtvdepthcell
{
   background-image: url(images/treeview-sprite.gif) !important;
}

/* end doclist */

/* invite page */

.inviteusersbyemail .byemailbody
{
   background-color: #fbfbfb;
}

.people-finder .results
{
   background-color: #f9fcfd;
}

.yui-skin-redTheme .dayview h2, .weekview h2,
.yui-skin-redTheme .calendar.weekview thead th,
.yui-skin-redTheme .calendar.monthview thead th
{
   color: #000;
}

/* filter list link */

.yui-skin-redTheme li.selected, 
body.yui-skin-redTheme .treeview .selected,
body.yui-skin-redTheme .categoryview .selected,
body.yui-skin-redTheme .yui-columnbrowser .yui-carousel-content li.yui-columnbrowser-column a.yui-columnbrowser-item-selected
{
   background-color: #FCB29F;
}

/* these rules need to be separate from the above for ie6 */
.yui-skin-redTheme .treeview .selected > table,
.yui-skin-redTheme .categoryview .selected > table
{
   background-color: #FCB29F;
}

.yui-skin-redTheme .filter a.disabled,
.yui-skin-redTheme .filter a.disabled:active,
.yui-skin-redTheme .filter a.disabled:hover,
.yui-skin-redTheme .filter a.disabled:visited,
.yui-skin-redTheme .tags a.disabled,
.yui-skin-redTheme .tags a.disabled:active,
.yui-skin-redTheme .tags a.disabled:hover,
.yui-skin-redTheme .tags a.disabled:visited
{
   color: #a6a6a6;
   cursor: not-allowed;
}

.yui-skin-redTheme .filter a:hover,
.yui-skin-redTheme .tags a:hover
{
   text-decoration: none;
}

/* Link color */

.yui-skin-redTheme .node .nodeTitle a,
.yui-skin-redTheme .node .nodeURL a,
.yui-skin-redTheme .nodeAttrValue a,
.yui-skin-redTheme .nodeFooter .tag a,
.yui-skin-redTheme .yui-dt-highlighted .tag a,
.yui-skin-redTheme .yui-dt-highlighted .category a,
.yui-skin-redTheme .yui-dt-highlighted .item-social a,
.yui-skin-redTheme a.wiki-tag-link,
.yui-skin-redTheme .node .userLink a,
.yui-skin-redTheme .site-members h3 a,
.yui-skin-redTheme .yui-calendar td.calcell a,
.yui-skin-redTheme .doclist .documents a,
.yui-skin-redTheme .attrValue a,
.yui-skin-redTheme .detail .item a,
.yui-skin-redTheme .info .meta-value a,
.yui-skin-redTheme .rules-none a,
.yui-skin-redTheme .agendaview a,
.yui-skin-redTheme a.previousEvents,
.yui-skin-redTheme a.nextEvents,
.yui-skin-redTheme div.channels a
{
   color: #FF243E;
}

.yui-skin-redTheme .tag a,
.yui-skin-redTheme .category a,
.yui-skin-redTheme .item-social a,
.yui-skin-redTheme .document-tags .tag
{
   color: #333;
}

.yui-skin-redTheme .tag a,
.yui-skin-redTheme .document-tags .tag
{
   background-color: #e8e8e8;
}

.yui-skin-redTheme .site-navigation
{
   background-image: url(./images/navigation-bg.png);
}

.cmis .body a
{
   color: #FF243E;
}

.yui-skin-redTheme .rules-list a
{
   color: #526A53;
}

/* Calendar */

/* Calendar */

/* Day/Week timed events */
.fc-content .fc-event-skin
{
   background-color: #FF243E; /* Theme Colour 1 */
   border-color: #5FAC34;
   color: #FFFFFF;
}

/* Month view timed events */
.fc-content .fc-view-month .fc-event-skin
{
   background-color: transparent;
   border-color: transparent;
   color: #FF243E;
}

/* All day events */
.fc-content .fc-event-allday .fc-event-skin,
.fc-content a.fc-event.fc-event-allday,
.fc-content .fc-view-month .fc-event-multiday .fc-event-skin,
.fc-content .fc-view-month a.fc-event.fc-event-multiday
{
   background-color: #FF243E;
   border-color: #FF243E;
   color: #FFFFFF;
}


.fc-content a.fc-event-skin:hover
{
   color: #FFFFFF;
}

/* End Calendar */


/* Document */

.document-version
{
   background-color: #aaa;
   color: #fff;
}


/* Twisters */

.alfresco-twister-open
{
   background: transparent url(images/expanded.png) no-repeat scroll 0 50%;
}

.alfresco-twister-closed
{
   background: transparent url(images/collapsed.png) no-repeat scroll 0 50% !important;
}

/* Preview Tooltip */

.yui-tt .bd
{
   background-color: #f4faff !important;
   border: 1px solid #333 !important;
   padding: 4px 4px 1px !important;
   text-align: left;
}

/* Theme colors */

.theme-color-1,
a.theme-color-1,
a.theme-color-1:visited,
a.theme-color-1:hover
{
   color: #FF243E;
}

.theme-color-2,
a.theme-color-2,
a.theme-color-2:visited,
a.theme-color-2:hover
{
   color: #FF2A1B;
}

.theme-color-3,
a.theme-color-3,
a.theme-color-3:visited,
a.theme-color-3:hover
{
   color: #ebebeb;
}

.theme-color-4,
a.theme-color-4,
a.theme-color-4:visited,
a.theme-color-4:hover
{
   color: #009300;
}

.theme-color-5,
a.theme-color-5,
a.theme-color-5:visited,
a.theme-color-5:hover
{
   color: #fff;   
}

/* Theme background colors */

.theme-bg-color-1,
div.theme-bg-color-1
{
   background-color: #5FAC34;
}

.theme-bg-color-2,
div.theme-bg-color-2
{
   background-color: #fffbdd;
}

.theme-bg-color-3,
div.theme-bg-color-3
{
   background-color: #F5F5F5;
}

.theme-bg-color-4,
div.theme-bg-color-4
{
   background-color: #E9F1EA;
}

.theme-bg-color-5,
div.theme-bg-color-5
{
   background-color: #2FB42C;
}

.theme-bg-color-6,
div.theme-bg-color-6
{
   background-color: #F4FAFF;
}

/* Used for editing - same as meta data fields */

.theme-bg-color-7,
div.theme-bg-color-7
{
   background-color: #F5FFF2;
}

.theme-bg-color-8,
div.theme-bg-color-8
{
   background-color: #FFFFFF;
}

.theme-bg-1
{
   
}

.theme-bg-2
{
   background-color: #E3EAEC;
   background-image: -webkit-gradient(
       linear,
       left top,
       left bottom,
       color-stop(0, rgb(246,246,246)),
       color-stop(1, rgb(233,232,234))
   );
   background-image: -moz-linear-gradient(
       center top,
       rgb(246,246,246) 0%,
       rgb(233,232,234) 100%
    );
}

.theme-bg-3
{
   background-color: #CCCCCC;
   background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0, rgb(204,204,204)),
      color-stop(1, rgb(232,232,232))
   );
   background-image: -moz-linear-gradient(
       center top,
       rgb(204,204,204) 0%,
       rgb(232,232,232) 100%
   );
}

.theme-bg-4
{
   background-color: #33FF66;
   background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0, rgb(51,255,102)),
      color-stop(1, rgb(51,153,102))
   );
   background-image: -moz-linear-gradient(
      top,
      rgb(51,255,102) 0%,
      rgb(51,153,102) 100%
   );
}

.theme-bg-selected
{
   background-color: #5FAC34;
}

/* Theme border type/colors */

.theme-border-1
{
   border-color: #468058;
}

.theme-border-2
{
   border-color: #2FB42C;
}

.theme-border-3
{
   border: 1px solid #c6c6c6 !important;
}

.theme-border-4
{
   border: 1px solid #DDD6A0;
}

.theme-border-5
{
   border: 1px solid #c2c2c2;
}

/* Meeting Places Code */

.docfolder-label
{
   overflow:auto;
}

.docfolder-input
{
   width: 203px; 
   vertical-align: top; 
   margin-top: 2px;
}

.tree-div
{
   height: 200px;
   overflow: auto;
   margin-left: 5px;
}

.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover
{
   background-color: #F9FBFD;
   cursor: pointer;
   margin-left: 2px;
   text-decoration: none;
}

.alfresco-guest .theme-overlay
{
   padding-left: 24px;
   font-family: Open Sans,Arial,Helvetica,sans-serif;
   color: #333;
   border: 1px solid #ccc;
   background-color: #fff;
   box-shadow: 0.33px 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-company-logo
{
   height: 48px;
   width: 428px;
   background: transparent url(images/logo.png) no-repeat;
}

.theme-flow-arrow
{
   margin:  0;
   padding: 0;
	width: 50px;
   height: 98px;
   background: url(images/flow-arrow.png) no-repeat;
}

I might have missed few of the color codes which you can take care by your self.

Step 3:

Create xml file redTheme.xml related to new theme under following location.

“<ALF_HOME>\tomcat\webapps\share\WEB-INF\classes\alfresco\site-data\themes\”

Change all references of greenTheme to redTheme.

NOTE: name of xml file should exactly match with name of folder you have given in step1

Step 5:

Edit all images from image folders within new theme folder based on your requirement. I have changed colors to red. Not done much of the customization.

Step 6:

Restart the server and go to Admin Tools page. You should be able to see your theme redTheme listed along with all out of box themes in drop down. Select theme click on apply and see the magic.

Theme Selection

Alfresco Red Theme

This is really a simple but where useful for customizing out of box alfresco  user interface.

Looking for quality Alfresco Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , | Posted under Alfresco | RSS 2.0

Author Spotlight

mitpatoliya

I love opensource technologies working with those technologies from the time I have stepped in to the Software Industry. Alfresco CMS is my area of expertise. I have worked on various complex implementations which involved integration of Alfresco with other technologies, extensively worked with JBPM workflows and Webscripts.

Leave a Reply

Your email address will not be published. Required fields are marked *