The template is based on modxcms.com’s design, and designed to be more compact than default theme ( 150px less in height than the default modx template )
If someone wants to test without installing you can paste this at the end of index.css in the default manager (I will package it when this problem will be resolved) :
input,
label,
select,
textarea {
font-size:85%!important;
}
label {
color:#464;
padding:0 0 0 12px!important;
margin:0px!important;
height:1.5em!important;
width:250px!important;
}
input,
select,
textarea {
-moz-border-radius:2px!important;
-webkit-border-radius:2px!important;
border-radius:2px;
padding:0px 2px!important;
margin:0px!important;
background:none;
height:1.5em!important;
}
.x-form-field-wrap {
margin-left:50px!important;
background:none!important;
}
.x-form-field-wrap img {
border-left:1px solid #999!important;
width:16px!important;
height:16px!important;
padding:0px 2px!important;
background:#eee!important;
}
.x-form-field-wrap img:hover {
background:#9D29A4!important;
border-color:#7D0984!important;
}
textarea {
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif!important;
height:auto!important;
}
textarea#ta {
font-family: "Courier New", Courier, monospace!important;
height:1000px!important;
}
#modx-topbar {
background:-moz-radial-gradient(right 4%,#6A136F,#B132B9)!important;
background:#B132B9;
border-bottom:2px solid #7A237F!important;
font-size:.90em;
height:1.5em;
}
#modx-topbar #modx-site-name {
font-variant:small-caps!important;
font-weight:bold!important;
letter-spacing:.2em;
padding:0 0 0 16px!important;
color:#FeF;
text-shadow: 1px 1px 2px #202;
}
#modx-topbar span.modx-version {
padding:0 8px!important;
font-variant:normal!important;
display:inline!important;
font-weight:normal;
letter-spacing:normal;
color:#ede!important;
text-shadow: 1px 1px 0px #404;
}
#modx-topbar a {
display:inline;
float:left;
}
#modx-topbar a img {
margin:-14px 5px 0 0;
height:12px;
width:15px;
}
#modx-topbar #modx-logo:after {
margin:0px 4px 0 0;
color:#fff;
display:inline;
float:left;
position:relative;
top:-6px;
content:" modx";
}
#modx-topbar img:hover {
opacity:0.7;
}
#modx-navbar {
background:-moz-radial-gradient(right 4%,#89BA33,#469F11)!important;
background:#669F31;
border:1px solid #fff!important;
border-width:1px 0!important;
font-size:.75em;
-moz-box-shadow: 0px 8px 12px #aaa;
-webkit-box-shadow: 0px 8px 12px #aaa;
box-shadow: 0px 8px 12px #aaa;
padding:0px!important;
margin:0!important;
max-height:3em!important;
}
#modx-navbar ul li.top {
padding:0 4px 0 0;
margin:0px!important;
}
#modx-navbar ul li.top:after {
padding:0 0 0 3px!important;
color:#583;
content:"∣";
text-shadow:1px 0 0 #94D448;
display:inline;
float:left;
position:relative;
top:5px;
}
#modx-navbar ul li.top:last-child:after {
content: none;
}
#modx-navbar ul li.top a {
font-size:.85em;
text-transform:uppercase;
padding:7px 8px!important;
margin:0px!important;
color:#fff!important;
text-shadow: 1px 1px 0px #360;
}
#modx-navbar ul li.top a:hover {
text-decoration:underline;
}
#modx-navbar #rightlogin a:before {
content:"→ ";
}
#modx-navbar #rightlogin {
background:none!important;
border:none!important;
padding:0!important;
margin:0 4px 0 0!important;
top:6px;
}
#modx-navbar #rightlogin *{
font-weight:bold;
text-shadow: 1px 1px 0px #360;
}
#modx-navbar #rightlogin span {
background:none!important;
border:none!important;
}
#modx-navbar #rightlogin a {
border:none!important;
color:#DDD!important;
display:inline!important;
float:right;
padding:0 4px!important;
margin:0 0 0 4px!important;
background:#3F7E0A!important;
-moz-border-radius:4px!important;
-webkit-border-radius:4px!important;
border-radius:4px!important;
-moz-box-shadow: 0px 0px 2px #fff;
-webkit-box-shadow: 0px 8px 12px #aaa;
box-shadow: 0px 8px 12px #aaa;
line-height:1.7em!important;
height:16px!important;
}
#modx-navbar #rightlogin a:hover {
background:#1F5E00!important;
color:#DDD!important;
}
#modx-topnav {
margin:0 0 0px;
padding:0px;
height:29px;
border:none;
}
#modx-topnav li{
background-image:none!important;
}
.modx-subnav {
top:28px!important;
background-color:rgba(84,164,24,.98)!important;
border:1px solid #fff!important;
border-top:1px solid #64AB20!important;
-moz-box-shadow: 0px 0px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 8px 8px 12px #aaa;
padding:0 0px 2px!important;
margin:0 0 0 -8px!important;
}
.modx-subnav li {
background:-moz-linear-gradient(bottom,#187600,#389610)!important;
X-moz-border-radius:0 0 6px 6px;
X-webkit-border-radius:0 0 6px 6px;
Xborder-radius:0 0 6px 6px;
font-size:1.1em;
border:none!important;
margin:0!important;
border-top:1px solid #389610!important;
background:none!important;
}
.modx-subnav li a {
background:rgba(84,164,24,.98)!important;
text-transform:none!important;
}
.modx-subnav li a span.description {
padding:0!important;
font-size:1em!important;
color:#ded!important;
margin:0!important;
width:none!important;
}
.modx-subnav li:last-child {
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
}
.modx-subnav li:last-child a {
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
}
.modx-subnav li:hover {
background:#389610!important;
border-color:#187600!important;
color:#fff!important;
text-decoration:none!important;
margin-bottom:-1px!important;
z-index:999999999!important; border-bottom:none!important;
position!relative!important;
}
.modx-subnav li:hover a {
color:#fff!important;
text-decoration:none!important;
background:#389610!important;
border-bottom:1px solid #187600!important;
}
.modx-subnav li:hover a span{
color:#fff!important;
text-decoration:none!important;
}
.modx-subnav li:last-child:hover {
margin-bottom:0px!important;
}
.modx-subnav li:last-child a:hover {
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
border-bottom:none!important;
margin-bottom:0px!important;
}
#modx-container h2 {
color:#FeF;
text-shadow: 1px 1px 2px #202;
padding:2px 0px;
margin:0px 22px 0 0;
font-size:.8em;
font-weight:bold;
position:absolute!important;
float:right;
display:inline;
top:-56px;
right:40px;
letter-spacing:.2em;
}
.x-panel-body-noheader {
margin-top:6px;
maXXXrgin-bottom:6px;
}
.x-panel-bwrap,
.x-panel-body {
overflow:visible!important;
}
.x-tool {
bord er:1px solid blue;!important;
position:absolute!important;
z-index:9999!important;
float:right;
display:inline;
top:0px;
right:0;
}
#modx-leftbar .x-tab-panel-noborder{
border-radius:0 4px 4px 0;
margin:6px 0 8px 8px;
padding:8px;
background:#fff!important;
background:-webkit-gradient(linear, 64 64, 100, 765 59, 40, from(#f0f0f0), to(#fff))!important;
background:-moz-radial-gradient(bottom ,#f0f0f0,#fff)!important;
border-width:1px;
border-color:#999 #aaa #aaa #ccc!important;
-moz-box-shadow:0px 0px 4px rgba(128, 128, 128, .25);
-webkit-box-shadow:0 0 12px rgba(0, 0, 0, .5);
box-shadow:0 0 12px rgba(0, 0, 0, 1);
overflow:visible!important;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
ul.x-tab-strip li {
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
background-color: #64AB20;
border:none!important;
padding: 2px 2px 1px;
}
ul.x-tab-strip li:hover {
background-color: #84CB40;
}
.x-tab-strip-text{
color: #fff!important;
text-shadow: 1px 1px 0px #347B00!important;
}
.x-tab-right{
background:#64AB20!important;
}
.x-tab-strip-active{
background:#ccc!important;
}
.x-tab-right:hover {
background:#84CB40!important;
}
.x-tab-strip-active .x-tab-right{
background-color: #eee!important;
background:-webkit-gradient(linear, 64 64, 100, 765 59, 40, from(#fff), to(#eee))!important;
background:-moz-radial-gradient(left 1% ,#fff,#eee)!important;
}
.x-tab-strip-active .x-tab-strip-text{
color: #98279F!important;
text-shadow: 1px 1px 0px #fff!important;
}
.x-tab-strip-active .x-tab-strip-text:hover{
color: #B847BF!important;
}
.x-tab-strip-active .x-tab-right:hover {
background:#fff!important;
}
.x-border-layout-ct {
background-color: #f0f0f0;
}
Looks clean not ?
NOTE : its beta and may not be fully working with other browers than firefox for now.
☆ A M B ☆
