Home > General
Help > Control panel
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. |
