VM 3 Backend template (vs VM2)

[EvanGR]

Hello,

We are currently migrating over to VM3 (over from VM2). One thing we don't like very much, is that the new administrator template is way too bright and spacious.

Is there a variation available to bring back some of the old look? We mainly care about things being less bright and packed together more closely.

Thanks

[Jörgen]

All of the views in the backend are overridable, but I do not know of any free variation (template) that is available.
You have to make the override Yourself or search for a commercial template.

Jörgen @ Kreativ Fotografi

[jenkinhill]

The only VM admin override template that I'm aware of it https://www.jooglies.com/en/virtuemart-templates/vm-admin-template  which is built by StefanSTS.   

There are now more config options than were in VM2 so packing things more tightly may be conter-productive. To change colours and compress layout should just require css overrides.

[Milbo]

I am interested to see, which views got wider. Btw you can minify the menu on the left.

[EvanGR]

The Orders page for example... I did CSS style overrides to bring paddings down and make everything more compact again. I also toned down the background to be less bright.

[Milbo]

interested to share the files?

[EvanGR]

Here's the additional CSS for the Isis template...

I may have made changes to the php files as well, and some parts of this styling serves other purposes for our specific needs. Hope it helps.

Code Select Expand


.admin.com_virtuemart {
    background: #fafafa;
}

div#admin-content {
    /* background: #f8f8f8; */
    font-size: .9em;
    text-rendering: optimizeLegibility;
}


.admin.com_virtuemart .table th,
.admin.com_virtuemart .table td {
    padding: .2em .2em;
}

.admin.com_virtuemart .table  label {
font-weight: bold;
font-size: .9em;
}

.admin.com_virtuemart  .order_name {
    font-weight: bold;
    font-size: 1em;
}

.admin.com_virtuemart .order_email {
    color: #888;
}


.admin.com_virtuemart  .order_number > a {
    font-size: 1em;
    padding: .3em .2em;
    display: block;
    background: #eee;
    border: 1px solid #ddd;
text-decoration: none;
}
.admin.com_virtuemart  .order_number > a:hover {
border-color: #aaa;
background: #ddd;
color: #000;
}


.admin.com_virtuemart .shipment_method {
    font-size: .9em;
    line-height: 1.6em;
    color: #555;
}


.admin.com_virtuemart .payment_method {
font-weight: normal;
    padding: .2em .6em;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
    background: #d31b1b;
    font-size: .9em;
font-weight: bold;
line-height: 1.3em;
}

.admin.com_virtuemart .order_total {
    font-size: 1.3em;
    font-weight: bold;
    border: 1px solid #ccc;
    padding: .1em .4em;
    /* background: #eee; */
    text-align: right;
cursor: pointer;
}
.admin.com_virtuemart #final_price > div {
    font-size: 1.3em;
    font-weight: bold;
    background: #d31b1b;
    border: 1px solid #aaa;
    /* margin: .1em; */
    line-height: 1.3em;
    padding: .2em .4em;
    cursor: pointer;
    display: block;
}

.admin.com_virtuemart .order_total:hover,
.admin.com_virtuemart #final_price > div:hover {
background: #fff;
}
.admin.com_virtuemart .order_total:active,
.admin.com_virtuemart #final_price > div:active {
background: #333;
color: #eee;
}


select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
margin-bottom: .2em;
}

textarea#BT_customer_note_field {
    height: 8em;
    font-size: 1.2em;
    color: red;
}