TO

This tutorial will show you how to customize the MyClientBase (MCB) Adminstrative Dashboard & Client Center. The only problem with doing this is that MCB currently does not have a separate templating system for the administration portion of the system so once you edit it you will need to save all of your edits locally because once you upgrade to a newer version of MCB your edits may be overwritten. There is a benefit though from this structure in that once you edit the Dashboard you automatically have edited the Client Center as they are designed cohesively. So lets get started...

What is MyClientBase?

MyClientBase (MCB) is an open source and web-based Invoice & Client Managment System which can be used by many different types of businesses. MCB is also the system that we use here at Visuex.com to power the Billing portion of our site.

Before we get started:

First of all, it needs to be stated that there are MANY methods of modifying the layout of the MCB Dashboard and a basic knowledge of HTML & CSS is required to make the customizations. This is not a step by step or beginning to end tutorial, this is just meant to act as a guide for you to get started with customizing your MCB.

This tutorial will show how to turn the standard monochrome design into that colorful style that matches this site. This will show you how to do it but some color codes will be altered so can use this as a guide to learn not as a guide to steal. :)

This tutorial assumes that you are familiar with looking at files on a server through FTP, cPanel or any other solution so if you are not familiar with one of those then please stop now and do a search for some tutorials or just click the links provided for those before you continue with this tutorial.

Where are the files we need to edit located?

The majority of the styling code used for the look of MCB is contained in the layout.css file which is located in the ~/assests/style/css folder of your install. (~ implies the root folder of your MCB install as there is no way for me to know where/how you installed it)

This tutorial focuses on modifying the dashboard theme using CSS only but if you want to modify the images included use your favorite editing program like Photoshop, GIMP, Paint Shop Pro, etc to do so. Those images can be found in the ~/assests/style/img folder.

For the Visuex.com theme we don't need to edit any of the images so we are going to utilize the black/dark gray gradients and images.

Editing the layout.css file

body {
	background: #000000; (color code changed...use your own colors)
}

#navigation_wrapper {
	background: #526174 url(../img/navigation_bg.jpg) repeat-x center top;
	height: 38px;
	border-top: 1px solid #3d3d3d;
	border-bottom: 1px solid #000;
	margin: 0 0 60px 0;
	box-shadow:0px 2px 5px rgba(0,0,0,0.4);
}

.section_wrapper {
	margin-bottom: 20px;
	box-shadow:2px 2px 5px rgba(0,0,0,0.25);
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.content {
	background: #000000;  (color code changed...use your own colors)
	padding: 20px;
	border: 1px solid #dadada;
}

I know we didn't touch on a few aspects such as the images and some of the CSS but this should suffice to get you started on modifying the MCB Dashboard for your purposes.

What do you think of this tutorial?

Do you have any questions for customizing MCB?

Did we leave something important off of the guide?

Let us know by making a comment below: