CSS Buttons for Admin [Support Thread]

lat9:

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

DivaVocals:

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

lat9:

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

lat9:

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?

lat9:

The plugin is now available for download ...

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

/* <<<<<<<<<<<<<<<<< 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 >>>>>>>>>>>>>>>>>>>> */

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

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

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

span.cssButton:hover { 
    background-color: #dcdcdc; /* Grey Hover Color */ 
    }
input.cssButton:hover, .button:hover, input.button:hover, input[type=button]:hover { 
    /*background-color:#599659;*/ /* Green Hover Color */ 
    background-color:#dcdcdc; /* Grey Hover Color */ 
    border: 1px solid #003d00; 
    /*color: white;*/
    cursor: pointer;
    }

simon1066:

A small point but I've noticed that in Option Values Manager the Update & Delete buttons are stacked rather than side-by-side.

When I have 50 attributes displayed the first part of the page load (the attribute list) shows them as side-by-side but once the copy options at the bottom kick in the Update & Delete revert to being stacked.

.attributes-odd td:last-child, .attributes-even td:last-child { width: 12%; }
.attributes-even .button_edit, .attributes-odd .button_edit, .attributes-even .button_delete, .attributes-odd .button_delete { font-size: smaller; }

lat9:

Add the following to the bottom of the stylesheet_admin_css_buttons.css file. It makes the text size for the edit/delete buttons smaller and widens up the last column for tables that use the attributes-even (and -odd) class.

.attributes-odd td:last-child, .attributes-even td:last-child { width: 12%; }
.attributes-even .button_edit, .attributes-odd .button_edit, .attributes-even .button_delete, .attributes-odd .button_delete { font-size: smaller; }

DivaVocals:

The second line may not be necessary as it makes the buttons too small (IMHO..:smile:)..

.attributes-odd td:last-child, .attributes-even td:last-child { width: 15%; }

lat9:

Add the following to the bottom of the stylesheet_admin_css_buttons.css file. It makes the text size for the edit/delete buttons smaller and widens up the last column for tables that use the attributes-even (and -odd) class.

.attributes-odd td:last-child, .attributes-even td:last-child { width: 12%; }
.attributes-even .button_edit, .attributes-odd .button_edit, .attributes-even .button_delete, .attributes-odd .button_delete { font-size: smaller; }