Admin CSS

[Marcus Kreusch]

Hallo Zusammen,

da ich gerade für ein anderes Projekt (http://www.modified-shop.org/forum/index.php?topic=28462.msg288582#msg288582) ein wenig am Basteln bin, möchte ich an der Stelle etwas mit euch teilen.

Ich habe im Admin-Stylesheet ein paar Kleinigkeiten angefügt, um ihn - zumindest für meinen Geschmack - optisch ein wenig erträglicher zu machen, ohne irgendwelche anderen Dateien anfassen zu müssen.

Das ist mein Zwischenergebnis (am Ende von /admin/includes/stylesheet.css einzufügen):

Code: CSS  [Auswählen]

.button, a.button, span.button, input.button,
a.button:link,
a.button:visited,
a.button:active
 {
  background: #f4f4f4;
  background-image: -webkit-linear-gradient(top, #f4f4f4, #bbb);
  background-image: -moz-linear-gradient(top, #f4f4f4, #bbb);
  background-image: -ms-linear-gradient(top, #f4f4f4, #bbb);
  background-image: -o-linear-gradient(top, #f4f4f4, #bbb);
  background-image: linear-gradient(to bottom, #f4f4f4, #bbb);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  text-shadow: 1px 1px 0px #eee;
  font-family: Arial;
  color: #333;
  font-size: 11px;
  line-height:15px;
  padding: 6px 10px 6px 10px;
  border: solid #aaa 1px;
  text-decoration: none;
  margin:3px 5px;
  display:inline-block;
  min-width:100px;
  text-align:center;
  min-height:15px;
}

input.button{
    min-height:30px;
}

.button:hover,
a.button:hover,
span.button:hover,
button.button:hover

 {
  background: #f0f0f0;
  background-image: -webkit-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: -moz-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: -ms-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: -o-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: linear-gradient(to bottom, #f0f0f0, #a6a6a6);
  text-decoration: none;
}

.boxCenter{
    border:0;
    background:#fff;
}

.contentTable{
    border-radius:5px;
    margin:5px;
    padding:5px;
    color:#444;

}

.contentTable:first-child{
    margin-top:0;
}

.contentTable td{
    border-radius:5px
}

.infoBoxHeading{
    padding:10px;
    background:none;
    font-size:1.2em;
    text-shadow: 2px 2px 0px #fff;

}

.infoBoxHeading:last-child{
    border-bottom:0;
}

.infoBoxContent{
    background:none;
    color:#444;
}

input[type=text], input[type=password], select{
    border:1px solid #aaa;
    border-radius:5px;
    padding:5px;
}


.searchbar{
    height:35px !important;
}

.dataTableHeadingContent{
    padding:7px;
    border-right:none;
    background: #f6f6f6;
}

.dataTableHeadingContent:last-child{
    border-right: 1px solid #cccccc;
}
.dataTableRow{
    background:#fafafa;
}
.dataTableRowSelected{
    background:#eaeaea;
}

.dataTableContent{
    padding:4px;
}
.pageHeading{
    font-size:22px;
    text-shadow: 1px 1px 0px #ddd;
    color:#333;

}

body{
    color:#333;
}

Vorher:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Nachher:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Was sagt ihr dazu?
Würde mich über ehrliche Meinungen und oder Anregungen freuen

Viele Grüße
Marcus

Linkback: https://www.modified-shop.org/forum/index.php?topic=31716.0

[Buggyboy]

Hallo Markus!

Coole Sache das... ;-}

Habs in meinem 105D eingesetzt und funzt.

Vielen Dank dafür.
Peter

[jannemann]

Hallo Marcus,

vielen Dank fürs Teilen
Gefällt mir. 

Schöne Grüße,
Jan

[ralph_84]

Hallo Markus

  für das Teilen.

Leider sieht es im Footer nicht so schön aus.

Gruß Ralph

[Marcus Kreusch]

Herzlichen Dank euch für das Feedback!

Du hast natürlich Recht, Ralph, die Geburtstagsliste ist so nicht schön.
Ich habe noch folgendes ergänzt:

Code: CSS  [Auswählen]

#AutoNumber1{
    border-top: 1px solid #b40076 !important;
    border-radius:5px;
    margin:5px;
    padding:5px;
   
}

#AutoNumber1 *{
    background:none !important;
}

Es sieht nun so aus:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Noch einmal das zusammengefasste CSS:

Code: CSS  [Auswählen]

.button, a.button, span.button, input.button,
a.button:link,
a.button:visited,
a.button:active
 {
  background: #f4f4f4;
  background-image: -webkit-linear-gradient(top, #f4f4f4, #bbb);
  background-image: -moz-linear-gradient(top, #f4f4f4, #bbb);
  background-image: -ms-linear-gradient(top, #f4f4f4, #bbb);
  background-image: -o-linear-gradient(top, #f4f4f4, #bbb);
  background-image: linear-gradient(to bottom, #f4f4f4, #bbb);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  text-shadow: 1px 1px 0px #eee;
  font-family: Arial;
  color: #333;
  font-size: 11px;
  line-height:15px;
  padding: 6px 10px 6px 10px;
  border: solid #aaa 1px;
  text-decoration: none;
  margin:3px 5px;
  display:inline-block;
  min-width:100px;
  text-align:center;
  min-height:15px;
}

input.button{
    min-height:30px;
}

.button:hover,
a.button:hover,
span.button:hover,
button.button:hover

 {
  background: #f0f0f0;
  background-image: -webkit-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: -moz-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: -ms-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: -o-linear-gradient(top, #f0f0f0, #a6a6a6);
  background-image: linear-gradient(to bottom, #f0f0f0, #a6a6a6);
  text-decoration: none;
}

.boxCenter{
    border:0;
    background:#fff;
}

.contentTable{
    border-radius:5px;
    margin:5px;
    padding:5px;

}

.contentTable:first-child{
    margin-top:0;
}

.contentTable td{
    border-radius:5px
}

.infoBoxHeading{
    padding:10px;
    background:none;
    font-size:1.2em;
    text-shadow: 2px 2px 0px #fff;

}

.infoBoxHeading:last-child{
    border-bottom:0;
}

.infoBoxContent{
    background:none;
    color:#444;
}

input[type=text], input[type=password], select{
    border:1px solid #aaa;
    border-radius:5px;
    padding:5px;
}


.searchbar{
    height:35px !important;
}

.dataTableHeadingContent{
    padding:7px;
    border-right:none;
    background: #f6f6f6;
}

.dataTableHeadingContent:last-child{
    border-right: 1px solid #cccccc;
}
.dataTableRow{
    background:#fafafa;
}
.dataTableRowSelected{
    background:#eaeaea;
}

.dataTableContent{
    padding:4px;
}
.pageHeading{
    font-size:22px;
    text-shadow: 1px 1px 0px #ddd;
    color:#333;

}

body{
    color:#333;
}

#AutoNumber1{
    border-top: 1px solid #b40076 !important;
    border-radius:5px;
    margin:5px;
    padding:5px;
   
}

#AutoNumber1 *{
    background:none !important;
}

Nochmal Danke und viele Grüße
Marcus