The Control Panel

Administration

Control panel

Larger View
username-mystore
password-changeme

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 details 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.

ProConsultancy is a web design, web development, web hosting, ecommerce and internet marketing businesses that develops websites for all business sizes.

  • Provide companies and individuals with the direction and skills they need to develop marketable and enriching presences on the internet.
  • Develop internet marketing initiatives with such tools as email marketing programs, affiliate programs, PPC programs, online analytical tools and usability analysis.
  • Develop database driven ecommerce sites.

ProConsultancy was designed and developed by Scot Trodick. Design, technical and entrepenurial knowledge are available to businesses of all sizes, providing the services required to succeed in today's diverse marketplace.


Scot Trodick's eye for color, composition and balance mixes with his knowledge of code, along with insight to useability analysis which lends itself in creating distinctive, effective systems. Professional design experience and vast web experience give him the knowledge needed to produce aesthetically pleasing sites for any company, any audience.

The quality, diversity and large number of promotions that ProConsultancy offers affiliates makes the network the largest source of revenue for web clients. ProConsultancy's diversity of offers attracts many who are in search of growth and development in all areas of their business. ProConsultancy's affiliates rely on knowledge to populate their sites with offers and content.