Design75:
To give the login screen a bit more 3D look I added
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
>
> to stylesheet.css, so body#login fieldset looks like this
>
> ```
body#login fieldset{
margin:0 auto;
padding:30px;
width:600px;
background: #686868; /* Old browsers */
background: -moz-linear-gradient(top, #686868 0%, #656565 5%, #5b5b5b 13%, #585858 18%, #525252 21%, #515151 23%, #424242 33%, #3e3e3e 38%, #383838 41%, #323232 49%, #313131 51%, #343434 59%, #323232 62%, #323232 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#686868), color-stop(5%,#656565), color-stop(13%,#5b5b5b), color-stop(18%,#585858), color-stop(21%,#525252), color-stop(23%,#515151), color-stop(33%,#424242), color-stop(38%,#3e3e3e), color-stop(41%,#383838), color-stop(49%,#323232), color-stop(51%,#313131), color-stop(59%,#343434), color-stop(62%,#323232), color-stop(100%,#323232)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #686868 0%,#656565 5%,#5b5b5b 13%,#585858 18%,#525252 21%,#515151 23%,#424242 33%,#3e3e3e 38%,#383838 41%,#323232 49%,#313131 51%,#343434 59%,#323232 62%,#323232 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #686868 0%,#656565 5%,#5b5b5b 13%,#585858 18%,#525252 21%,#515151 23%,#424242 33%,#3e3e3e 38%,#383838 41%,#323232 49%,#313131 51%,#343434 59%,#323232 62%,#323232 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #686868 0%,#656565 5%,#5b5b5b 13%,#585858 18%,#525252 21%,#515151 23%,#424242 33%,#3e3e3e 38%,#383838 41%,#323232 49%,#313131 51%,#343434 59%,#323232 62%,#323232 100%); /* IE10+ */
background: linear-gradient(to bottom, #686868 0%,#656565 5%,#5b5b5b 13%,#585858 18%,#525252 21%,#515151 23%,#424242 33%,#3e3e3e 38%,#383838 41%,#323232 49%,#313131 51%,#343434 59%,#323232 62%,#323232 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#323232',GradientType=0 );*/ /* IE6-9 */
-moz-border-radius: .5em 4em .5em 4em;
-webkit-border-radius: .5em 4em .5em 4em;
border-radius: .5em 4em .5em 4em;
border:0px solid #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
DivaVocals:
Thanks for sharing..
I originally used the box shadow effect for the menu and the login page.. However, I found that box shadow isn't supported well or even consistently by all browsers and it doesn't look good across all browsers/platforms which is why I didn't include the effect in the final package..
I wanted to keep the admin look/feel changes simple as as consistent as possible.. What I realized is that honestly it really only takes a FEW minor changes to improve the look of the stock Zen Cart admin.. I could have modified sooo much more like previous admin template packages attempted to do. However from my experience using those other templates they all ran smack into IE quirks (collapse errors), and other issues due to hardcoded HTML hat is RAMPANT all over the Zen Cart admin.. Trying to modify ALL of that only leads to making the admin a PITA to upgrade when a Zen Cart upgrade is needed..
Well I stand corrected.. tee hee hee.. I tried your change.. Tested on a few browsers and found it does work..
I modified it a bit for a little more drama.. Gonna run through all of the variations and tweak each one.. PLUS I found that I need to put back the changes I made to tweak the CSS button on the login page.. The Admin CSS Buttons module apparently doesn't affect this one button (no biggie)..
I will update the Github this morning and submit an IMMEDIATE update if/when this module is approved..
