[Support Thread] Transcendence Series (Admin Templates)

[DivaVocals]

Hey Diva,

Very cool template. I couldn't wait for it to be available in the downloads, so i downloaded the one on git.
It installs almost perfect, but now the dropdowns from the navigation menu are transparent. I have the feeling I am missing a piece of css.
ps, I used theme #7

Before I update all the other themes can you download #7 again and let me know if you get a different result..

[Design75]

Before I update all the other themes can you download #7 again and let me know if you get a different result..

Downloaded and overwritten the three css files. All shows up fine now.

[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]

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);
}

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

[DivaVocals]

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);
}

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

[DivaVocals]

Okay for anyone following this, I have made a BUNCH of modifications to incorporate the box shadow on the login page per Design75's suggestion (I did not include the text shadow..) I also updated the Admin CSS Buttons stylesheet to incorporate the login page buttons.. (I coordinated this change with lat9 who I believe will include this change in an upcoming update to the Admin CSS buttons module)

I made a bunch of minor tweaks to adjust a lot of teensy weensy stuff.. When this is available for download I will submit an immediate update.. In the meantime the latest changes are available in the GitHub repository..

[Design75]

Okay for anyone following this, I have made a BUNCH of modifications to incorporate the box shadow on the login page per Design75's suggestion (I did not include the text shadow..) I also updated the Admin CSS Buttons stylesheet to incorporate the login page buttons.. (I coordinated this change with lat9 who I believe will include this change in an upcoming update to the Admin CSS buttons module)

I made a bunch of minor tweaks to adjust a lot of teensy weensy stuff.. When this is available for download I will submit an immediate update.. In the meantime the latest changes are available in the GitHub repository..

I'll go right over and check it out

[picandnix]

Oh, is it me or does anyone else now have their 'New orders' box on admin/index.php at the bottom of the centre column as opposed to the top of the right hand column?
It's a little out of 'sight out of mind' for my liking if this is by design rather than an installation oversight on my behalf.

Thank you in advance

[countrycharm]

Oh, is it me or does anyone else now have their 'New orders' box on admin/index.php at the bottom of the centre column as opposed to the top of the right hand column?
It's a little out of 'sight out of mind' for my liking if this is by design rather than an installation oversight on my behalf.

Thank you in advance

Yep I have the same problem with mine.

[DivaVocals]

Oh, is it me or does anyone else now have their 'New orders' box on admin/index.php at the bottom of the centre column as opposed to the top of the right hand column?
It's a little out of 'sight out of mind' for my liking if this is by design rather than an installation oversight on my behalf.

Thank you in advance

Yep I have the same problem with mine.

Well it doesn't look that way on ANY of my client's sites or test sites (see the screenshots I included as to what the admin index.php page should look like)

Make sure you have uploaded ALL the template files or feel free to play with the CSS to adjust...