WEB GUI

[T3G Terry]

Not sure if I should post this here but I am indeed using 1.24.2.

I want to take the web gui and change the appearance of it to suit my personal needs. My eyes are terribly sensitive to light and trying to watch live or recorded video on such a WHITE background literally blinds me. All that white background surrounding the images is so bright to me that it makes it difficult to even see the images without feeling like I am staring at glare.

Can I modify the web page file just as I would any website page I am building?

Can I change the webpage using programs like Dreamweaver from a windows computer?

Anyone have a suggestion for the best way for me to accomplish this?

I basically want to reskin Zoneminder but I am not trying to change any of the functions or options. Just the Web GUI skins and general appearance.

What would be the best way for me to approach this task???

I would appreciate any and all help offered.

[kingofkya]

under skins/classic thers a css file just change background color.

[T3G Terry]

Thanks much. My eyes will appreciate that.

[T3G Terry]

Well that just didn't work at all. I guess I am missing something completely. Here is a copy ofr the contents of the css skins.css file. The only thing that references the color white (ffffff) pertains to the tab colors. Otherwise I can find no place where the page background color is listed at all. Was the dafault color omitted from this file and as a result it dafaults to white? Does an entry need to be made that will actually give the background a color? Here are the contents .......



/*
* ZoneMinder Base Stylesheet, $Date: 2008-07-25 10:48:16 +0100 (Fri, 25 Jul 2008) $, $Revision: 2612 $
* Copyright (C) 2001-2008 Philip Coombes
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) input[type=password], any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*/

/*
* Primary look and feel styles
*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
font-weight: normal;
text-align: center;
}

h1 {
font-family: inherit;
font-size: 120%;
color: #000066;
font-weight: bold;
text-align: center;
}

h2 {
font-family: inherit;
font-size: 110%;
color: #000066;
font-weight: bold;
}

h3 {
font-family: inherit;
font-size: 100%;
color: #016A9d;
font-weight: bold;
}

h4 {
font-family: inherit;
font-size: 100%;
color: #016A9d;
}

p {
font-family: inherit;
font-size: 100%;
color: #333333;
font-weight: normal;
}

th {
font-weight: bold;
color: #016A9d;
}

a:link {
color: #7f7fb2;
text-decoration: none;
}

a:visited {
color: #7f7fb2;
text-decoration: none;
}

a:hover {
color: #666699;
text-decoration: underline;
}

label {
margin-right: 4px;
}

input,textarea,select {
border: 1px #7f7fb2 solid;
font-family: inherit;
font-size: 100%;
color: #333333;
}

input[type=text], input[type=password], textarea {
padding: 1px;
}

input.noborder {
border: 0;
}

input[disabled] {
color: #888888;
}

img.normal {
border: white solid 1px;
}

img.alarm {
border: red solid 1px;
}

hr {
height: 1px;
width: 100%;
border: 0;
color: #7f7fb2;
background-color: #7f7fb2;
}

/*
* Tabbed headings
*/
ul.tabList {
float: left;
list-style: none;
padding: 0;
margin: 0 0 -4px 0;
white-space: nowrap;
text-align: left;
}

ul.tabList li {
float: left;
border: 1px solid;
color: #333333;
border: #7f7fb2 solid 1px;
border-bottom-width: 0;
margin: 0 2px 0 0;
background: #dddddd;
text-align: center;
padding: 3px 4px;
}

ul.tabList li a {
text-decoration: none;
}

ul.tabList li:hover {
background-color: #eeeeee;
}

ul.tabList li.active {
background-color: #ffffff;
border-bottom: #7f7fb2 dotted 1px;
}

ul.tabList li.active a {
font-weight: bold;
}

/*
* Major league table for multiple inputs or presentation
*/

#content table.major {
margin: 4px auto;
width: 100%;
border-collapse: collapse;
}

#content table.major tr.highlight {
background-color: #eeeeee;
}

#content table.major thead tr th {
padding-top: 6px;
padding-bottom: 6px;
vertical-align: middle;
}

#content table.major tfoot td {
padding-top: 6px;
padding-bottom: 6px;
vertical-align: middle;
}

#content table.major th, #content table.major td {
border: 1px solid #7f7fb2;
padding: 3px;
text-align: left;
}

#content table.major th {
vertical-align: bottom;
}

#content table.major td {
vertical-align: middle;
}

#content table.major th[scope=row] {
padding: 4px 3px 3px;
vertical-align: top;
}

#content table.major .colMark, #content table.major .colSelect {
text-align: center;
}
/*
* Lesser table for very simple forms
*/

#content table.minor {
width: 200px;
margin: 0 auto;
}

#content table.minor td {
padding: 4px;
}

#content table.minor .colLeft {
width: 50%;
text-align: right;
}

#content table.minor .colRight {
width: 50%;
text-align: left;
}

#content table.minor input[type=submit]
{
margin-top: 8px;
padding: 0 2px;
font-size: 120%;
}

/*
* Behavior classes
*/
.errorText {
color: #dc143c;
}

.warnText {
color: #ff8c00;
}

.infoText {
color: #688e23;
}

.disabledText {
font-style: italic;
}

/*
* Generic useful classes, especially with mootools
*/

.hidden {
display: none;
}

.invisible {
visibility: hidden;
}

.nowrap {
white-space: nowrap;
}

div.clear {
clear: both;
}

/*
* Primary layout styles
*/

#page {
width: 100%;
}

#header {
width: 96%;
line-height: 24px;
margin: 8px auto;
text-align: left;
}

#header h2 {
left: 0;
}

#headerControl {
width: 50%;
text-align: center;
margin: 0 auto;
}

#headerButtons {
float: right;
}

#headerButtons a {
margin-left: 8px;
}

#content {
width: 96%;
margin: 8px auto;
line-height: 130%;
text-align: center;
}

#content p {
margin-top: 4px;
}

#content p.textblock {
text-align: justify;
padding: 4px;
}

/*
#contentDiv {
margin: 0 auto 8px;
line-height: 140%;
text-align: center;
}
*/

#content > input[type=submit], #content > input[type=button] {
margin-top: 8px;
}

#content table input[type=submit], #content table input[type=button] {
margin-top: 0;
}

#contentButtons {
margin-top: 8px;
float: right;
}

#contentButtons input {
margin-left: 8px;
margin-bottom: 4px;
}

#footer {
width: 96%;
margin: 8px auto;
}