CSS Buttons for Admin [Support Thread]

[lat9]

I'm about to upload this contribution to the Plugins area ... it's a small change that can totally change the look of your admin console, changing the display from something like

to something like this

Once I've got the plugin's download URL, I'll update here.

[lat9]

Once reviewed, the plugin will be available here: http://www.zen-cart.com/downloads.php?do=file&id=1804

[DivaVocals]

Once reviewed, the plugin will be available here: http://www.zen-cart.com/downloads.php?do=file&id=1804

I LOVE you!!! this will go GREAT with my admin templates.. My templates are simple templates which use some CSS3 and no images, but they make a nice change to the drab stock green admin (no offense.. ).. Just like the storefront CSS buttons eliminates the need for cumbersome storefront image button sets, I would LOVE LOVE LOVE to replace ALL the admin image buttons with CSS buttons.. It eliminates the need for creating buttons for contributions which have an admin interface..

[lat9]

It eliminates the need for creating buttons for contributions which have an admin interface..

That was the main reason I created the plugin; I was getting eye-strain from all the differently-formatted buttons ... although I do like the look of the button-pack provided by Super Orders. Have you ever considered just packaging up those buttons as an admin-level plugin?

[DivaVocals]

That was the main reason I created the plugin; I was getting eye-strain from all the differently-formatted buttons ...

That's why I eventually replaced the three Super Order buttons with CSS buttons. I thought the original SO buttons looked too "ugly". CSS buttons were cleaner..

although I do like the look of the button-pack provided by Super Orders. Have you ever considered just packaging up those buttons as an admin-level plugin?

I never thought about that.. I have to admit I "borrowed" those buttons and icons from one of the few available admin templates.. (Can't remember which one..) I loved the way those buttons looked and how they spruced up the look of the admin which is why I included them in the SO package.. Maybe I will package them up and submit them..

[lat9]

The plugin is now available for download ...

[DivaVocals]

The plugin is now available for download ...

Downloaded earlier this morning and now I am incorporating it into my admin template so I can submit it.. Well done.. installed SMOOTH as glass!!!

[DivaVocals]

Wanted to share a small change I made so that the buttons on the login page match the rest of the admin CSS buttons..

In "YOUR_ADMIN/includes/stylesheet.css" find the following:

body#login legend{
background:#ffffff;
border:1px solid #003D00;
color:#333333;
font-size:90%;
padding:0.2em 0.5em;
text-align:right;
}

After that add this:

/* <<<<<<<<<<<<<<<<< Begin CSS Login Buttons >>>>>>>>>>>>>>>>>>>> */
.button, input.button, input[type=button] {
    background-color:white; 
    border:1px solid #003366; 
    color:#404040; 
    border-radius:6px; 
    display:inline-block; 
    font-family:Verdana; 
    font-size:11px; 
    font-weight:bold; 
    margin: 0; 
    padding:3px 8px; 
    text-decoration:none; 
}
.button:hover, input.button:hover, input[type=button]:hover {
    background-color:#ccc; 
    border: 1px solid #003d00; 
    cursor: pointer;
}
/* <<<<<<<<<<<<<<<<< End CSS Login Buttons >>>>>>>>>>>>>>>>>>>> */

[lat9]

Instead, how about

1. Moving the @import url("stylesheet_admin_css_buttons.css"); statement to the bottom of the stylesheet.css
2. Modifying stylesheet_admin_css_buttons.css to include the additional selectors:

.cssButton, .cssButton:hover, input.cssButton, .button, input.button, input[type=button] { background-color:white; border:1px solid #003366; color:#404040; border-radius:6px; display:inline-block; font-family:Verdana; font-size:11px; font-weight:bold; margin: 0; padding:3px 8px; text-decoration:none; }
span.cssButton:hover { background-color: #dcdcdc; }
input.cssButton:hover, .button:hover, input.button:hover, input[type=button]:hover { background-color:#ccc; border: 1px solid #003d00; cursor: pointer; }

[DivaVocals]

Instead, how about

1. Moving the @import url("stylesheet_admin_css_buttons.css"); statement to the bottom of the stylesheet.css
2. Modifying stylesheet_admin_css_buttons.css to include the additional selectors:

.cssButton, .cssButton:hover, input.cssButton, .button, input.button, input[type=button] { background-color:white; border:1px solid #003366; color:#404040; border-radius:6px; display:inline-block; font-family:Verdana; font-size:11px; font-weight:bold; margin: 0; padding:3px 8px; text-decoration:none; }
span.cssButton:hover { background-color: #dcdcdc; }
input.cssButton:hover, .button:hover, input.button:hover, input[type=button]:hover { background-color:#ccc; border: 1px solid #003d00; cursor: pointer; }

Why not.. **lol**