Admin styles for sNews 1.7

One thing you may (or may not) have noticed is the default theme style.css for sNews is totally lacking any of the classes and ids for the admin interface. I had noticed this and added a few here and there where I found them, but I missed a lot of them. Thankfully, Poppoll has at some point gone through and collected all (we think) of the styles for sNews, and he was kind enough to send a base stylesheet along to me.

What I have done with this is taken the admin styles out of the sheet and placed them into a separate file, I put this in my styles folder and then linked to it in my header, but only when someone is logged in as an admin. After all, there's no reason normal users should have to load 5KB or whatever of stylesheet for something that they can't see.

This stylesheet makes numerous improvements over a standard un-styled admin interface, such as making right-sized text boxes for the article titles, SEF, button styling, etc. Obviously you can change any styles you don't like, and if you want to experiment with them live you can, because your users will never see them. I have cleaned up some things, but you may want to remove the comments, etc, if you choose.

With proper styling, the admin interface should look something like this picture;

To do this first copy the following styles to a new file called admin.css and upload it your css folder;

/* Admin New category page */
#t { width: 300px; background: #fff; border: 1px solid #D6D6D6} /* textfield name */
#s { width: 300px; background: #fff; border: 1px solid #D6D6D6} /* textfield Search engine friendly title (will be used as link to the category) */
#desc { width: 300px; background: #fff; border: 1px solid #D6D6D6} /* textfield Description */
#subcat {width: 200px;} /* Selectbox Subcategory of: */

/*Admin New article and Admin edit article  */
#cat {width:200px} /*Selectbox Category */

/*Admin New article  Customize */
#dm {width: 98%} /* textfield Description META Tag (for search engines) */
#km {width: 98%} /* textfield Keywords META Tag (keywords separated by comma) */

/* Admin New Extra Contents - Customize */
#dp {width: 200px} /* Selectbox Appear only on Page: */

/* Admin New Page  and Admin New article   */
#at { width: 350px; background: #fff; border: 1px solid #D6D6D6} /*textfield Title */
#as { width: 350px; background: #fff; border: 1px solid #D6D6D6} /* textfield Search engine friendly title (will be used as link to the article) */
#txt { width: 98%;  height: 600px;background: #fff; border: 1px solid #D6D6D6} /* /* textarea Text */
.buttons, .em, .underline, .del{font: bold 12px Arial, Sans-serif; height: 25px;margin: 0;	padding: 2px 3px; color: #666;background: #ccc;border-width: 1px;  	border-style: solid;border-color: #ccc #999 #999 #ccc; cursor: pointer; margin-right: 3px} /*Buttons Formatting  and Insert 

/*  Extra Contents  */
.buttons, .em, .underline, .del{font: bold 12px Arial, Sans-serif; height: 25px;margin: 0;	padding: 2px 3px; color: #666;background: #ccc;border-width: 1px;  	border-style: solid;border-color: #ccc #999 #999 #ccc; cursor: pointer; margin-right: 3px}
#ext {width:200px}/*Appear under Extra Grouping:*/

/* Admin - Site - Settings */
/* Settings */
#webtitle {width: 300px} /* Website Title: */
#webSEF {width: 300px} /* Home SEF (used as link to Home): */
#wdesc {width: 98%}/* Default description META Tag (for search engines): */
#wkey {width: 98%} /* Default keywords META Tag (keywords separated by comma): */
/* Contact info */
#we {width: 300px} /* Email */
#cs {width: 300px} /* Contact form Subject */
/*Time and Local setting */
#lang {width: 150px} /* sNews Language: */
#char {width: 150px} /* Default charset: */
#dt {width: 150px} /* Date Format:  */

/*Contents */
#artl {width: 30px} /* Articles per page limit: */
#rssl {width: 30px} /* RSS Articles Limit: */
#fileext{width:98%} /*Allowed file extensions for includes (Separated by comma) */
#all_file {width:98%} /*Allowed file extensions for Uploads (Separated by comma): */
#all_img {width:98%} /*Allowed image extensions for Uploads (Separated by comma): */
/* Comments */
#crt {width: 30px} /* Comment repost timer - Delay before user can post on same article */
#co {width: 200px}/* Comments Order: */
#cl {width: 30px}/* Comment results per page: */
#wff {width: 250px}/* Badwords filter file: */
#wfc {width: 98%}/* Badwords replacement word: */
/* Change Username and Password */
#uname {} /* Username: === already styled === */
#pass1 {width: 150px} /* Password: */
#pass2 {width: 150px} /* Repeat password: */

/* Admin - Site - Files */
/*Upload file to: */
#ud1 {width:200px;margin-left:15px} /* Selectbox  Upload file to: */
/*View files in  root */
#ud2 {width: 200px;} /*Selectbox  View files in  root */

Ok, upload admin.css and then you want to add the following code in the head of your index.php file;

<?php if (_ADMIN) { echo '<link rel="stylesheet" type="text/css" href="css/admin.css" />'; } ?>

Upload your index.php file and now when you're logged in it should load your admin.css styles. Again, thanks to Poppoll for his efforts in gathering all this information!