Skinning the CMS

Skinning the CMS

SilverStripe 2.4.x doesn't support tools or modules for skinning the CMS, but it can be done using your own extra stylesheet - once you know what selectors to tweek. And that's the problem - there really isn't any documentation. Comforting news: it's rumoured that version 3.0 will have better support. The following is just a quick example - it could be a lot more beautiful I guess, but that's for later...

Add an extra stylesheet to the cms

The LeftAndMain class, that is responsible for creating the basic backand form, supports two ways to add extra css files. From your mysite/_config.php:

1. load a stylesheet from your mysite/css/ directory

LeftAndMain::require_css('mysite/css/MyCustomCSS.css');>

2. load a stylesheet from your theme's css directory:

SSViewer::set_theme('MyTheme');

LeftAndMain::require_themed_css('MyCustomCSS');

The themed css will, in this case, always be loaded from the theme that is initially set in mysite/_config.php. It will not follow the optional themeselection in your SiteConfig!

The css hierarchy

Unfortunately there seems to be is nothing you can do to influence the sequence in which the stylesheets for the backend are loaded. This extra field will come after the initial Backend css files, so that is nice, but before special css files like tabset, TableListfield and other modules, which is bad.

<link rel="stylesheet" type="text/css" href="http://xxxxxx/cms/css/typography.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/cms/css/layout.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/cms/css/cms_left.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/cms/css/cms_right.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/sapphire/css/Form.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/sapphire/thirdparty/greybox/greybox.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/sapphire/css/SilverStripeNavigator.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/themes/Balbuss/css/typography.css" />

<!-- this is where the custom css ends up: -->
<link rel="stylesheet" type="text/css" href="http://xxxxxx/themes/Balbuss/css/MyCustomCSS.css" />

<link rel="stylesheet" type="text/css" href="http://xxxxxx/sapphire/thirdparty/tabstrip/tabstrip.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/tagfield/css/TagField.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/sapphire/javascript/tree/tree.css" />
<link rel="stylesheet" type="text/css" href="http://xxxxxx/sapphire/css/TreeDropdownField.css" />

Basic skinning

Basic skinning can be done by overriding some of the settings in cms/css/Layout.css. The following styles are just an example of what can be done.

MyCustom.css:

/* ================================================ GENERAL ========== */
body {
	background: #89dae8;
	background: #fff;
}

/* ================================================ BASIC BLOCKS =====  
   FILE: cms/css/Layout.css      
*/

/* the topmenu bar */
#top {
	font-size: 11px;
	border-bottom: 2px solid #89dae8;
	color: #89dae8#;
	background: #151515;
}

/* the form on the left */
#left {}

/* the form on the right */
#right {
	border: none;
	background: #fff;
}

/* the separator: cannot change the width */
#separator {
	top: 45px;
	left: 205px;
	border: 1px solid #acbbcc;
	border-left: none;
	background: #89dae8;
}

/* ================================================ TOPMENU ITEMS ==== 
   FILE: cms/css/Layout.css      
*/

#top #MainMenu {
	float: left;
	border-right: 1px solid #777;
}
#top #MainMenu li {
	padding: 0; margin: 0;
}
#top #MainMenu a {
	padding: 0 12px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #89dae8;
	border-left: 1px solid #777;
}
	#top #MainMenu a:hover {
		text-decoration: none;
		background: #386971;
	}

#top #MainMenu .current {
	color : #000;
	font-weight: bold;
	background: #89dae8;
}
	#top #MainMenu .current a:hover {
		color : #000;
		font-weight: bold;
		background: #89dae8;
	}

#top #MainMenu .current a:link,
#top #MainMenu .current a:visited {
	font-weight: bold;
	color : #000;
}

#top #Logo {}
	#top #Logo a {
		padding-right: 34px;
		font-size: 11px;
		color: #89dae8;
		background: transparent;  /* to remove SilverStripe logo */
	}
	#top #Logo a:hover {
		background: transparent; 
		color: #fbb444;
	}
	html > body #top #Logo {}


/* ================================================ STATUSBAR ======== 
   FILE: cms/css/Layout.css      
*/

#bottom {
	background: #151515;
}
	#bottom a {
		color: #89dae8;
	}
		#bottom a:hover {
			color: #fbb444;
		}
#bottom .bottomTabs a {
	color: #89dae8;
}

#bottom .bottomTabs div.blank {
	font-size: 11px;
	color: #89dae8;
}
#bottom .bottomTabs .current {
	color: #89dae8;
}
	#bottom .bottomTabs a:hover {
		color: #fbb444;
	}

The Tabstrips

Unfortunately the tabstrips.css file is loaded after this custom file, so it's settings can only be overridden by adding some extra selectors. In this case I'm adding the form selector. Now I can load the custom images for the current tab from mysite/images.

MyCustom.css:

/* ================================================ TABSTRIP ===== 
   FILE: sapphire/thirdparty/tabstrip/tabstrip.css       
   Adding form to the selector will override the original tabstrip
   even though it's stylesheet is loaded after this one...
*/
			form ul.tabstrip li.current,
			form ul.tabstrip li.ui-tabs-selected,
			form ul.tabstrip li.sel,
			form ul.tabstrip li.over {
				background: url(/mysite/images/sel_li_bg.gif) no-repeat left top;
			}
				form ul.tabstrip li.current a,
				form ul.tabstrip li.ui-tabs-selected a,
				form ul.tabstrip li.sel a,
				form ul.tabstrip li.over a {
					background: url(/mysite/images/sel_a_bg.gif) no-repeat right top;
					color: #207d8d;
				}

A step further - overriding CMSMain_left.ss

Unfortunately, loading the 'open' and 'close' buttons on the Sidepanel headers is hardcoded into the CMSMain_left.ss template. The only real option to have some control is to copy this template to /mysite/templates, and change the content so custom images will be loaded from mysite/images instead.

See if this could be converted in a cmsskins module with multiple skins, where images/css would be loaded based on the selected skin?

No, this stops here - version 3 alpha being due within 4 weeks :-)

 

Comments

Het versturen van reacties is uitgeschakeld.

RSS feed voor reacties op deze pagina