How does CSS-skinning work in DrFront?

You can create and edit skins in the setup. When creating a new skin a folder will be created in drfront/skins on the server. While working with your front, most of the skins are available in the context menu of the chosen article or item by right clicking - see image attached.

Here are some basic skin examples.


#drfront {
	width: 600px;
#drfront .article-extract {
	margin: 10px 10px 0 0;
	border-top: 2px solid #ddd;
#drfront .article-extract-full {
	width: 590px;
#drfront .article-extract-half {
	width: 290px;
#drfront .article-content {
	padding: 5px;
#drfront .left {
	float: left;
#drfront .right {
	float: right;
#drfront .clearer {
	clear: both;



The following is an example CSS-implementation for a container-skin. The skins name is "blue", which will affect the way you code the CSS in the following way.

#drfront .df-container-skin-blue {
	margin-top: 10px;
	background: #DEE6FC;
#drfront .df-container-skin-blue .df-container-header {
	height: 20px;
	background: #131387;
#drfront .df-container-skin-blue .df-container-footer {
	height: 20px;
	background: #C8D0E3;



An article skin affects only one by one article. You can choose between article skins by clicking on an article. This class demonstrates an article where a "black" skin has been applied. Note that the skin is using padding on the article content and a trick to have the image to not be affected by the padding.

#drfront .bg-black {
	background: #000;
#drfront .bg-black .article-content {
	color: #fff;
	padding: 10px;
#drfront .bg-black .df-img-container {
    margin: 0 0 8px -10px;

The default width for images is the full width of the article (including padding). If you also want to have padding on the image, this can be achieved by adding the rule below:

#drfront .bg-black .df-img-container-inner {
    margin-right: 20px;



Image skins are used to add css-classes to article images which will allow you to style the image in CSS. 

Let's say you have an article with a video instead of an image. Then you would like to promote that this image is a videoclip by adding the skin "video-icon". Add the following to your front skin and the skin will automatically appear in the article menu:

#drfront .df-img-skin-video-icon .df-img-layer {
	display: block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: url(video-icon.png) no-repeat;
	height: 72px;
	width: 55px;






Please sign in to leave a comment.