visit SlimOrganizer

Download the new Pixelpost Admin Theme (Right-Click -> Save Target As …)

Preview

/* .............................. */
/* Admin Theme for Pixelpost by Michael Kirste */
/* (http://www.webdesign.mkirste.de) */
/* SVN file version: */
/* $ID$ */
/* Basic */
/* .............................. */

body {
   background:#606060;
   margin:0px;
   padding:0px;
   text-align:center;
   font-family:Verdana, Helvetica, sans-serif;
   font-size:12px;
   color:#606060;
   }

/* .............................. */
/* Links */
/* .............................. */

a {
   color:#606060;
   text-decoration:none;
   }

/* .............................. */
/* Wrapper */
/* .............................. */

#wrapper {
   margin:20px auto;
   padding:0px;
   width:90%;
   text-align:left;
   background:#fff;
   color:#3a3739;
   border:10px solid #fff;
   }

/* .............................. */
/* Header */
/* .............................. */

#header {
   margin:0px;
   padding-top:6px;
   padding-bottom:30px;
   padding-left:6px;
   padding-right:0px;
   font-family:Helvetica, verdana, sans-serif;
   font-size:16px;
   font-weight:100;
   color:#fff;
   background:#627d90;
   letter-spacing:2px;
   text-transform:uppercase;
   }

#header a {
   color:#fff;
   text-decoration:none;
   }

#header a:hover {
   color:#fff;
   text-decoration:underline;
   }
/* .............................. */
/* Navigation */
/* .............................. */

#navigation {
   clear:right;
   margin:0px;
   background:#627d90;
   color:#fff;
   font-size:11px;
   text-align:left;
   padding-bottom:4px;
   font-weight:bold;
   }

#navigation a {
   color:#fff;
   text-decoration:none;
   padding:8px;
   }

#navigation a:hover {
   color:#fff;
   text-decoration:underline;
   }

#submenu {
   padding-top:6px;
   padding-bottom:6px;
   background:#ebeae8;
   color:#606060;
   font-size:10px;
   margin:1px 0 15px 0;
   text-align:left;
   }

#submenu a {
   padding:5px;
   }

#submenu a:hover {
   text-decoration:underline;
   color:#606060;
   }

/* .............................. */
/* Captions */
/* .............................. */

#caption {
   margin:10px 0px 0px 0px;
   padding:7px;
   font-size:14px;
   color:#606060;
   font-weight:100;
   text-align:left;
   background:#dedddb;
   }

.jcaption, .addon_on, .addon_off, .addon_error {
   border-top:0px solid #abe048;
   border-bottom:1px solid #abe048;
   margin:10px 0px 0px 0px;
   padding-top:4px;
   padding-bottom:4px;
   padding-left:5px;
   padding-right:0px;
   font-family:Helvetica, verdana, sans-serif;
   font-size:11px;
   font-weight:bold;
   letter-spacing:1px;
   color:#5d7d22;
   }

.jcaption  br {display:none;}

.jcaption a {
   color:#5d7d22;
   }
.jcaption a:hover {
   color:#76b501;
   }

.jcaption {
   background:#e0f0c3;
   }

.addon_on {
   background:#e0f0c3;
   }

.addon_off {
   background:#ebeae8;
   color:#9b9b9b;
   border-bottom:1px solid #b0b0b0;
   }

.addon_error {
   background:#eac8c8;
   color:#9b3b3b;
   border-bottom:1px solid #c46464;
   }
/* .............................. */
/* Content and titles */
/* .............................. */

.content {
   border:0px solid #ace149;
   margin-left:0px;
   margin-right:0px;
   margin-top:0px;
   margin-bottom:12px;
   padding:10px 5px;
   font-size:11px;
   color:#606060;
   background:#f1f8e7;
   }

.content ul {
   list-style:none;
   display:block;
   margin:-5px -5px 5px -5px;
   padding:10px 0;
   background:#fff;
   font-size:11px;
   }

.content ul li {
   padding:5px;
   margin:0px 0px 0px 0px;
   border-top:0px;
   border-left:0px;
   border-right:0px;
   border-bottom:1px solid #fff;
   background:#f4f3f2;
   }

.content ul li:hover {background:#ebeae8;}

.content ul li img {
   border:0px solid black;
   float:left;
   margin:2px 10px 0px 0px;
   height:62px;
   }

.content ul a:hover {
   text-decoration:underline;
   color:#000;
   }

/* .............................. */
/* Misc. */
/* .............................. */

input {padding:0px;}

.right {margin-left:2%;}
.smaller {font-size:9px;font-weight:normal;}

.item {
   border:0px;
   float:left;
   padding-right:5px;
   margin-right:5px;
   font-weight:bolder;
   font-size:110%;
}

hr {
   background-color:#fff;
   height:1px;
   border:0px;
   }

.selectedsubmenu {color:#666;}
.published-comment {background-color:#f4f6f1;color:#666;}
.unpublished-comment {background-color:#fff9e1;color:#666;}

.cmnt-buttons {
   font-size:10px;
   }

.confirm {
   font-size:11px;
   font-weight:bold;
   color:#fff;
   background:#f26925;
   border:0;
   position:relative;top:-23px;
   margin:0 0 -23px 0;
}

.confirm a {color:#fff;}
.confirm br {display:none;}

#cattable {
   width:100%;
   margin:0px;
   padding:1px;
   clear:both;
   }

#cattable td {
   width:25%;
   }

#logo {
   position:relative;
   float:left;
   border:0px;
   margin:0px 18px;
   padding:0px;
   }

#itemimg {
   margin-left:20px;
   margin-top:5px;
   border:1px solid #000;
   }

#photonumb {
   color:#89d200;
   font-weight:bold;}

#warning {
   font-size:12px;
   color:#722c2c;
   margin:20px 0 0 0;
   background-color:#eccdcd;
   border-top:1px solid #c46464;
   border-bottom:1px solid #c46464;
   font-family:arial,verdana,sans-serif;
   text-align:center;
   padding:6px;
   }

#datetable {
   text-align:center;
   }

#datetable td {
   width:30px;
   }

#datetable td.gap {
   width:5px;
   }

.images-checkbox{
   margin-bottom:0px;
   margin-top:0px;
   margin-left:0px;
   margin-right:0px;
   position:relative;top:3px;
   }

/* Kommentare */
body > p {padding:10px;margin:0px auto;background:#fff;color:606060;}
body p:first-child  {margin-top:100px;}

Persönliche Botschaften: Erstelle deine eigenen persönlichen Botschaften, indem du Wörter und Zeichnungen kombinierst. Grüße einen Freund zum Geburtstag und male ihm z.B. seine eigene Geburtstagstorte. Gibt es eine Situation an die du dich besonders gern erinnerst? Zeichne und kommentiere sie, schicke das Werk an deine Freunde, und mach die Situation wieder lebendig! Nutze unsere Clip-Art Datenbank, um deine Zeichnungen aufzuwerten. Mit WallEver sind deine Botschaften individuell und kreativ, weil nur du bestimmst was du malst, schreibst oder einfügst.

Grüße die Welt! Denke stets daran: Wallever ist öffentlich. Jeder kann deine Message auf der virtuellen Wall sehen. Du kannst die Werke der anderen User ansehen, kommentieren und bewerten Sortiere die Wall nach Kategorien wie z.B. News, Gerüchte, Sport um alles gut im Blick zu haben. Werde berühmt! Jeden Monat wird das Bild mit dem besten Rating gekürt, und der Künstler wird auf der Startseite verlinkt, sodass jeder Nutzer den Künstler direkt kontaktieren kann. Entdecke die WallEver-Wel

www.wallever.com

Usage/Code

First you just have to create a div layer with class “grid” (<div class=”grid”></div>). In this div layer you must put another div layer with the class “grid_XXX”. For XXX you choose a number for the witdh. For example “grid_50″ (<div class=”grid_50″></div>) for a 50% box. (Possible numbers are 5% 10% 20% 25% 30% 33% 40% 50% 60% 70% 75% 80% 90% and 100%). You can also put several div layers in the main div layer. The sum of all grids_XXX may not exceed 100%. The margins are 1%. Feel free to change the margins.

For example the code for two 20% boxes and one 60% box looks like this (20+20+60=100):

Three 20% boxes an one 60% box won’t work because its lenght is 120% (20+20+20+60=120 > 100).

CSS-Code

/* -----------------------------------------------------------------------

 LiquidGrid a flexible/adaptive Grid System

http://www.webdesign.mkirste.de

 * License under GPL: http://www.gnu.org/licenses/gpl.html

----------------------------------------------------------------------- */

div.grid {
height:auto;
width:102%;
margin:0 0 0 -1%;
clear:both;
}
div.grid > div {
margin:0 1%;
float:left;
}
div.grid_5 {width:3%;}
div.grid_10 {width:8%;}
div.grid_20 {width:18%;}
div.grid_25 {width:23%;}
div.grid_30 {width:27.9%;}
div.grid_33 {width:31.333%;}
div.grid_40 {width:38%;}
div.grid_50 {width:48%;}
div.grid_60 {width:58%;}
div.grid_70 {width:68%;}
div.grid_75 {width:73%;}
div.grid_80 {width:78%;}
div.grid_90 {width:88%;}
div.grid_100 {width:98%;}

Demo Page

You can see a Demo page here.

Download

You can download the source here.

Credits

License under GPL. Feel free to use and edit it! I would be happy if you link back.

Feedback

If you have some notes, just send me some feedback.