The Control Panel

Larger View

Version 4.8.0 saw the introduction of the CSS based skinable control panel. The design itself is 100% CSS based and XHTML transitional compliant, work on the code behind the admin is ongoing. Apart from speeding up download times the admin section is now skinable, allowing for simple changes in colors and graphics. We have some instructions below to help you change things around.

The Stylesheet

The style sheet that governs the layout and colors can be found in your vsadmin folder and is called adminstyle.css. You will see that we have added comments to the file so you can see how the various sections are set up.

Before making any changes we strongly suggest making a back up of adminstyle.css so you can always go back to the original. We would also suggest not making any changes at all if you are not confident editing CSS.

• Changing the backgrounds
  The main background color is set to light blue #E6E9F5 and can be changed here:
  background: #E6E9F5;
  The main body is white, although it's probably best to keep it that way it can be changed under #main:
  background: #FFF;
  The header section is set at #BFC9E0:
  background:#BFC9E0;
  There is also a background image associated with the header which gives the rounded effect at the top of the header:
  background-image: url('adminimages/newtoptopbg.jpg');

• Changing the table borders
  By default there is a dotted line around the table borders:
  border: 1px dotted #194C7F;
  Other options are dashed, solid, double - more options

• Other CSS changes
  Most of the other changes that can be made relate to the color of the input boxes, alternate cell colors, text and links. These should be self explanatory.

• NB
  We strongly suggest not making any differences to the absolute positioning of elements and remember to preview the admin section in different browsers at different resolutions

Changing the graphics

The images associated with the control panel can be found in the folder /adminimages/ and we would suggest keeping the same dimensions

• Logo:
  adminimages/ecommerce_templates.gif" width="278" height="53"
• Left hand menu titles:
  adminimages/administration.jpg" width="150" height="31"
  adminimages/product_admin.jpg" width="150" height="31"
  adminimages/shipping_admin.jpg" width="150" height="31"
  adminimages/extras.jpg" width="150" height="31"
• Horizontal line graphic between menu items:
  adminimages/hr.gif

Observations

That should give you the basics for skinning the control panel but do check in different browsers and at different resolutions. Do make a back up of the original files before starting but if things become irreparable then get the latest updater and replace the stylesheet and images from the original.

to get started with your own full control ecommerce website.