[web] New Challenge : GDNet Black (or alternate skins!)

Michael Tanczos · 2005-12-08T10:17:38

Well, we implemented a new style for the site. All colors are controlled by the site stylesheet. In fact, the entire graphical header for the most part is controlled by stylesheets as well. Right now people are complaining about the white, and we unfortunately can't focus on making alternative themes in the mean time. So check this out, the styles at this point gives a user the ability to do some pretty interesting things with the site look. Examine the front page source to see what tags are just waiting to be customized. The winner(s) of this challenge will get free GDNet+ for a year if their design is chosen in whole or as a basis for a new site skin. If you already have GDNet+, then participate just for the creative aspects of the challenge. Don't worry so much about icons and such.. Link to main style sheet If you use Mozilla Firefox, you can install this Add-on/Extension to your firefox browser to tweak the CSS in real time. Just go to Tools -> Web Developer -> CSS -> Edit CSS. If you click on the "Stick" button in the side window that opens, your style will be applied from page to page. Post links to your uploaded styles so we can all apply them against the existing site. Oh, and as an added benefit.. you will be given credit in the theme description and will be the savior of many gdnet users not quite satisfied with the white theme. --- Michael Tanczos

Snaily

151

November 27, 2005 02:58 AM

Anyone actually thought about adding a bit more space between different item on the front page? As it stands now, I find it overly cluttered (yes, I know about programmer's preferred information density).

¨@_

oscinis

209

November 27, 2005 03:14 AM

Quote:Original post by johnhattan
My votes in the above are for Classic Black 2 (pretty), Pink! (funny), and Slim (decent alternative).

when you do something right, people won't be sure you've done anything at all.

Deranged

668

November 27, 2005 09:55 AM

I'm posting this from the smart_idiot theme, very slick and resembles the new theme. I love it.

SticksandStones

629

November 27, 2005 11:26 AM

Quote:Original post by Deranged
I'm posting this from the smart_idiot theme, very slick and resembles the new theme. I love it.

Same. I'm thining about even using it more than the original theme, although it still has that problem wih white looking bad on black background for some reason...eh maybe it's just my monitor.

EDIT: Weird...after posting this it went back to the normal theme...

hippopotomonstrosesquippedaliophobia- the fear of big words

Michael Tanczos

5,681

Author

November 27, 2005 11:33 AM

Yeah, because that variable gets reset when you post. This isn't intended to be a permanent way of accessing these css styles. It's just for the duration of the contest. Depending on if we use any of them, most likely there will be a free selection that you can make and others might be reserved for gdnet+ members. Either way if we do use a theme for the site that person a) must agree to allow us to use it and b) will get free gdnet+ for a year. If they just feel like helping contribute, then that's cool too. Every little bit helps a lot at this point in time.

---
Michael Tanczos

chaosgame

146

November 27, 2005 11:34 AM

The old theme is available at www2.gamedev.net

"Are you threatening me, Master Jedi?" - Chancellor Palpatine

Michael Tanczos

5,681

Author

November 27, 2005 11:35 AM

Quote:Original post by chaosgame
The old theme is available at www2.gamedev.net

This availability is temporary, however. Also, I updated ra's gray theme. I think that perhaps it is a little too dark. Particularly in terms of the links on the page.. the dark green doesn't seem to be meshing well.

---
Michael Tanczos

Ra

1,062

November 27, 2005 12:10 PM

I was wondering where all the dark green talk was coming from until I realized I had my history set to 0 days, making none of the links appear "visited".

Anyway, that's fixed. I also made the source boxes black on white again because the highlighting got in the way with the dark background.

.dummy {font-size: 10px}    	body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; margin: 0px; background: #000000; color: #FFFFFF; }	P, TD, OL, UL, DL {font-family: verdana,arial; font-size: 10pt;}		A:link {text-decoration: none; color: #5086B4}	A:visited {text-decoration: none; color: #5086B4}	A:active {text-decoration: none; color: #808080}	A:hover {text-decoration: underline; color: #5086B4}		#recentthreadslink {text-decoration:none; color: #FFFFFF}	#recentthreadslink:hover { text-decoration:underline; color:#CCCCCC}	a.rss, a.rss:link, a.rss:visited {color: #0000FF; width: 30px; height: 14px; background-color: #FFDD66; font-weight: bold; font-face: Tahoma; line-height: 11px; font-size: 11px; text-decoration: none; padding: 0 2px; 0 2px; border: 1px solid; border-color: #FFDD33 #887711 #442200 #FFDD33;}    	a.rss:hover {background-color: #FFEEAA; text-decoration: none;}		/* Font sizing */	.maintext {font-size: 10pt}	.maintext1 {font-size: 15px}	.maintext2 {font-size: 16px}	.maintext3 {font-size: 18px}	.maintext4 {font-size: 20px}	.maintext5 {font-size: 19pt}	.maintext6 {font-size: 28px}	.maintext-1 {font-size: 12px}	.maintext-2 {font-size: 11px}	.caption {font-size: 11px; font-weight: bold}	.maintext-3 {font-size: 8px}	.maintext-4 {font-size: 10px}	   	H1 {font-size: 18px; font-weight: bold; color: black}	H2 {font-size: 15px; font-weight: bold; color: black}	H3 {font-size: 10pt; font-weight: bold; color: black}			/* MAIN PRESENTATION CSS */		.feathdr {font-weight: bold; background: #993333; color: #FFFFFF}	.feattitle {font-size: 10pt; font-weight: bold;}	.featbody {font-size: 11px; background: #1B1B3D}	  	.boxbody, .boxtext { font-family: verdana, arial; font-size: 8pt; border: 0px; background: #303030 }	.headerlink { color: white }	.menuheadr, .boxheadr, .boxheader, .spotlighthdr { font-family: verdana, arial; font-size: 9pt; font-weight: bold; background: black; border: none; color: white}		/* featbody, spotlightbody are legacy styles */	.featbox, .featbody, .spotlightbody, .spotlightbox, .featmenu { font-family: verdana, arial; font-size: 8pt; background: #404040; border: none;}	.purplehdr { font-family: verdana, arial; font-size: 17px; font-weight: bold; color: #C0C0C0 }	.tblhdr {font-family: Verdana, sans-serif; font-size: 10pt; color: #FFFFFF; font-weight: bold; background: #666699; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}		.articletitle { font-family: trebuchet MS, tahoma, verdana, arial; font-size: 23px; font-weight: bold; color: #9B5952 }	.articleauthor { font-family: trebuchet MS, verdana; font-size: 13px}	.articlehr, .sectionhr { height: 1px; color: #FFFFFF; border-top: 0px; border-bottom: 1px solid #0B315D; margin-bottom: 15px; }	.newshr { height: 1px; color: #FFFFFF; border-top: 0px; border-bottom: 1px solid #CCCCCC;}		.sectiontitle { font-family: tahoma, verdana, arial; font-size: 25px; font-weight: bold; color: #9B5952 }	.subsectiontitle { font-family: verdana, arial; font-size: 17px; font-weight: bold; color: #9B5952 }	.threadmessage {font-family: verdana, arial; font-size: 8pt;}	.threadtime {font-size: 11px; color: #444444}		.submitbutton {/*font-family: Verdana, sans-serif; font-size: 11px; font-weight: bold; background: #666666; color: white*/}	.textfield {background: #000000; color: #FFFFFF; font-family: Verdana, sans-serif; font-size: 11px}		.inlinebox { padding: 10px; background: #EAEAEA; border-top: solid 1px #F3F3F7; border-left: solid 1px #F3F3F7; border-bottom: solid 1px #E7E7EF; border-right: solid 1px #E7E7EF;}	.subtle {font-size: 11px; color: #666666; font-weight: normal}	/* TEMPORARY FOR DEMONSTRATION OF LEGACY NEWS */  		.ZWNewsFmt01-Date { position: relative; font-family: verdana, arial; padding-bottom: 2px; padding-top: 2px; font-size: 11pt; font-weight: bold; color: white; background: #484848; border: none;}	.ZWNewsFmt01-Headline { font-family: verdana, arial; width: 100%; font-size: 10pt; font-weight: bold; padding: 3px; border: none; background: #404040; padding-bottom: 2px; }	.ZWNewsFmt01-Byline { font-family: verdana, arial; font-size: 10px; color: #C0C0C0; background: #303030; }        .newshr { display: none; }	.ZWNewsFmt01-Story { font-family: Verdana, Tahoma, Arial; font-size: 10pt }	/* END TEMPORARY FOR DEMONSTRATION OF LEGACY NEWS */		.BlockNews-Date { position: relative; font-family: verdana, arial; padding-bottom: 2px; padding-top: 2px; font-size: 11pt; font-weight: bold; color: white; background-image: url('../pics/int_drk_bkg_bdy2.gif'); border: solid 1px black;}	.BlockNews-Headline { font-family: verdana, arial; width: 100%; font-size: 9pt; font-weight: bold; background-image: url('../pics/int_hdbkg.png'); padding: 5px; border-bottom: solid 1px #DDDDDD; border-right: solid 1px #DDDDDD}	.BlockNews-Byline { font-family: verdana, arial; font-size: 11px }	.news-table {}	.news-headline {font-family: verdana, tahoma, arial; font-size: 16pt; font-weight: bold; color: #9B5952}	.news-byline {font-family: verdana, arial; font-size: 8pt }	.news-author {font-family: verdana, arial; font-size: 8pt}	.news-date {font-family: verdana, arial; font-size:8pt;}	.news-story {font-family: Verdana, Arial; font-size: 10pt}	.Newsbody { font-family: verdana, arial; font-size: 8pt; padding: 5px; background-color: #FAFAFA; border-left: solid 1px #F3F3F9; border-top: solid 1px #F3F3F9; border-right: solid 1px #BBBBC3; border-bottom: solid 1px #BBBBC3}	.news_headline {font-family: verdana, arial; font-size: 8pt; font-weight:bold;}	.news_comment {font-family:verdana, arial; font-size:7pt; font-weight:none;}	.news_body {}	.news_author {font-family: verdana, arial; font-size: 7pt; font-weight:none; color: #999999}	.news_date {font-family: verdana, arial; font-size:10pt; font-weight:bold; color: #4D96E3;}	  	.jobs_count {font-family:verdana, arial; font-size:7pt; font-weight:none;}	.jobs_jobtype {font-family:verdana, arial; font-size:7pt; font-weight:none;}	.jobs_jobtypecount {font-family:verdana, arial; font-size:7pt; font-weight:none; color: #999999;}		.events_date {font-family: verdana, arial; font-size:7pt; font-weight:none; color: #999999;}		.stats_bold {font-family: verdana, arial; font-size:8pt; font-weight:bold; color: #4D96E3;}    		/* Top searchbar */  	.contextNav {		position: relative; 		top: -6px;		}		  	.hdrTopLinks, .hdrSearchBox {		font-size: 10px;		font-family: verdana, arial;		color: white;		width: 100%;/*		height: 15px; */		vertical-align: top;		text-align: right;	}		.hdrbreadcrumbs		{		font-size: 10px;	}		.searchinput { font-size: 10px; height: 17px }	.searchbutton { display: none;position: relative; top: 2px }		/* Javascript Pulldown Menu Styles */		.topMenuHdr {	  text-align: right;	}		.topMenu {	  background: transparent; 	  text-align: center;	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	}		.submenu {	  background-color: #FFFFFF;	  border: none;	}	.topItemNormal {	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	  color: #C0C0C0;	  border-left: solid 1px #808080;          border-right: solid 1px #808080;	  cursor: pointer;          text-indent: 0px;	}		.topItemNormal_Start	{	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	  color: #C0C0C0;	  border-left: solid 1px #808080;          border-right: solid 1px #808080;	  cursor: pointer;          text-indent: 0px;	}		.topItemOver {	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	  background-color: #404040;/*#004D7E;*/	  color: #FFFFFF;	  cursor: pointer;          border-left: solid 1px #808080;	  border-right: solid 1px #808080;          border-top: none;          border-bottom: none;          text-indent: 0px;	}		.itemNormal {	  font-family: Verdana;	  font-size: 10px;	  color: #5086B4;	  cursor: pointer;	  background-color: #303030; /*#004D7E;*/          text-indent: 0px;	}		.itemOver {	  font-family: Verdana;	  font-size: 10px;          text-decoration: underline;	  color: #5086B4;	  cursor: pointer;	  background-color: #303030;	  border: none;          text-indent: 0px;	}			/* Informative textbox decoration */		.roundedBox {	  position: relative;	  left: 0;	  top: 0;	  width: 100%;	}		.boxCorners {	  text-align: right;	  display: none;	}	.boxCorners_MM {	  text-align: right;	  display: none;	}		.boxLeft {	  position: absolute;	  top: 0px;	  left: 0px;	}	.boxContentHeadr {	  padding-bottom: 7px;	  text-indent: 8px;	  color: #FFFFFF;	  font-family: verdana, arial;	  font-size: 12px;	  font-weight: bold;	  vertical-align: top;	  background: black;	  border: none;	}		.boxCImgR {                display: none;	}		.boxCImgL {                display: none;	}			.boxContentHeadr_MM {	  background: black;	  border: none;	  height: 21px;	}		.boxContentHeadr_Title {	  text-indent: 8px;	  color: #FFFFFF;	  font-family: verdana, arial;	  font-size: 12px;	  font-weight: bold;	  vertical-align: middle;	  padding-top: 3px;	}		.boxContent_MM {	  padding: 7px;	  color: #FFFFFF;	  font-family: verdana, arial;	  font-size: 11px;	  vertical-align: top;	  background-color: #404040;  	  border: none;	}		.boxContent {	  padding: 7px;	  color: #FFFFFF;	  font-family: verdana, arial;	  font-size: 11px;	  vertical-align: top;	  background-color: #303030;          border: none;	}/* Specific textbox formatting, for left hand navigation menu */	/* Based off of .roundedBox */	#CMS_Features, #CMS_Resources, #CMS_Community, #CMS_Members {	  position: relative;	  left: 0;	  top: 0;	  width: 99%;	}		.CMS_Spacer {		font-size: 5px;	}		#CMS_LogoAlt {	display: none;	}	/* Quote of the day */	.qotd {	 position: static; float: left; font-size: 11px; font-family: verdana, arial; width: 100%; margin-top: 15px; margin-bottom: 15px; text-align: center;	}/* Layout markup */	.leftcolumn	{		float:left;		width:135px;		margin-left:5px;		margin-top:33px;	/* comment this line out if we're not lining up the tops of all columns */	}		#centercolumn {		margin-right:180px;		font-family:"\"}\"";		font-family:inherit;		margin-right:183px;	}	#centercolumn_2col {		margin-left:135px;		font-family:"\"}\"";		font-family:inherit;		margin-left:138px;	}		.centerpadding {	 margin-left: 0px;	 margin-right: 0px;	 padding: 5px; 	 width: 99%	}		#rightcolumn {		float:right;		width:180px;		/*margin:0px 0px 0px 0px;*/		margin-top: 5px;	}	* html #rightcolumn {		/*margin:0px 0px 0px 0px;*/		width:180px;		margin-top: 5px;	}	body>div #rightcolumn {		/*margin:0px 0px 0px 0px;*/	}		/* Central page boxes, for making one, two, and three equal width boxes */	.wrapper { position: static; }	.singlebox {/*float: left;*/ position:static; display:block; width:100%; margin:0; padding:0;}	.wrapper>.singlebox { width: 100% }		.doublebox { /*float: left;*/ position: static; display: block; width: 48%; margin: 0;}	.wrapper>.doublebox { width: 100% }	.triplebox { float: left; position: static; display: block; width: 32.5%; margin-right: 4px; padding: 0;}	.wrapper>.triplebox { width: 33.3% }		/* Graphical header CSS for table */	#CM_Wrapper {	  position: relative;	  height: 99px;	  margin: 0px;	  padding: 0px;	  border: 0px;	 /* overflow: hidden;*/	}		#CM_Logo {	  width: 296px;          height: 0px;	  padding: 0px;	  margin: 0px;	  border: 0px;  	  background: url('http://www2.gamedev.net/community/forums/themes/theme1/sitelogo.gif') no-repeat center;	}		#CM_AdSpace {	  padding-right: 4px;	  height: 73px;	  width: 100%;	  text-align: right;	  vertical-align: middle;	  background: black;	}		#CM_AdSpaceTrailer {	  margin: 0px;	  padding: 0px;	  width: 4px;	  height: 73px;	  background: black;	}		#CM_AdContainer {	position: relative;	top: 0px;	right: 0px;	}		#CM_MidSpace {	  display: none;        }		#CM_MidSpaceTrailer {	  display: none;	}		#CM_NavSpace {	  padding: 0px;	  height: 22px;	  background: black;          vertical-align: bottom;	}		#CM_NavSpaceTrailer {	  width: 4px;	  height: 22px;	  background: black;	}		#CM_ExOptA {	  display: none;	}		 	#CM_ExOptB {	  display: none;	}/* Footer */	#footer {		font-size: 11px; 		font-family: verdana, arial; 		color: white;		text-align: center;	}		/* Forum Style */  .img { border: 0px solid #000; vertical-align: middle; }  .smallfont {font-size: 10px}  .mediumfont {font-size: 11px}  .largefont {font-size: 18px}  .regularfont {font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif}  .path {font-size: 10px; color: silver}  .smallfontwhite { font-size:10px; color: #CCCCCC}    .head {color: white; background: #1476B5;}.head IMG {display: alt}  .headsmall {font-family: verdana, sans-serif; font-size: 10px; color: white; background: #1476B5; border: none;}  .headsmalllink { color: White; }  .category {color: white; background: #1E87C7; border-top: solid 1px #46A4D1; border-left: solid 1px #46A4D1; border-bottom: solid 1px #035180; border-right: solid 1px #035180;}  .postcell {font-size: 12px; background: #0071BC; color: white}  .altforumcell {background: #303030; border: none;}  .forumcell {background: #202020; border: none;}  .announcecell {overflow: auto; color: white; background: #404040; border: none;}  .post_dateline {background: #303030; font-size: 10px; border: none; color: #C0C0C0;}  .post_author {background: #404040;/*#9CAAC7;*//*#ADBBD8;*//*#CFDDF1*//*#C0CAD5*//*#DAE0E6;*/ font-size: 11px;vertical-align: middle; border: none;}

.post_body {background: #000000; padding: 5px 5px 5px 5px; border: none; }
.post_separator {font-size: 10px; background: #000000; width: 95%; border: none;}
.post_trailer {background: #404040; font-size: 10px; border: none;}

.threadhighlight {background: #003366}
.time {color: #c0c0c0}
.staff { color: #10AB10; }
.moderator { color: #CB021A; }
.premium { color: #D27A1E; }
.premiumusernames { color: #D27A1E; font-weight: normal; }
.suspended { color: pink; text-decoration: line-through;}
.banned { color: red; text-decoration: line-through; }
.quote { font-size: 11px; background: #303030; border: none;}
.quote .quote { font-size: 11px; background: #383838;/*#EBEBDF;*/ border: none;}
.quote .quote .quote { font-size: 11px; background: #404040;/*#E0E0D4;*/ border: none;}
.quote .quote .quote .quote { font-size: 11px; background: #484848;/*#D5D5C9;*/ border: none;}
.forumrules {border: solid #555555 2px; background: #000000; font-family: verdana, sans-serif; color: white; font-size: 10px}
.source {background: #FFFFFF; border: none; font-family: Courier New; color: black; font-size: 9pt; width: 95%; height: 250px; overflow: auto; padding: 3px;}
.editedby {color: #C0C0C0; font-size: 10px;}
.register_required { color: red}

/* The .code style is causing problems in articles because it is used inline with text, so I'm removing the border and reducing the padding - KH */
/* We will need an "inlinecode" style for use of inline functions/constants in articles. I like the original .code - it's just not working for these articles. */
/*.code {font-family: Courier New; font-size: 10pt; color: #477280; background: #F7F7EB; padding: 8px 8px 8px 8px; border: solid 1px #5B5D82}*/
.inlinecode { font-family: Courier New; font-size: 10pt; color: #477280; }
/* Once we get some articles converted to inlinecode we can put the code padding back to 8px */
.code {font-family: Courier New; font-size: 10pt; color: #477280; background: #F7F7EB; padding: 2px 2px 2px 2x; border: solid 1px #5B5D82}
.vbcode {font-family: Courier New; font-size: 11px; color: #ADD8E6}
.codecomment {font-family: Courier New; font-size: 10pt; color: #9999FF}

/* Developer Journal Calendar */
.calendarhead {
font-family:tahoma,verdana, arial, sans-serif;
color:white;
font-size:13px;
font-weight:bold;
padding:6px;
background: #1476B5;
}

.calendar {
font-family:verdana, arial, sans-serif;
color:#707070;
background:#EAEAEA;
font-size:10px;
font-weight:normal;
padding:4px;
}

.calendarsel {
font-family:verdana, arial, sans-serif;
background:#0071BC;
font-size:12px;
font-weight:bold;
padding:4px;
}

.calendarlink { color:white; }

/* Bookmarks tabs */

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #333399;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #20205C;
margin: 2px 2px 0 2px;
border: 1px solid #3333AD;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-bottom: 1px solid #333399;
background-color: #333399;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: white;
}

#tabnav a {
float: left;
display: block;
color: #a09dc3;
text-decoration: none;
padding: 4px;
}

#tabnav a:hover {
background: #5555DD;
color: white;
}

Ra

oscinis

209

November 27, 2005 12:39 PM

Quote:Original post by Michael Tanczos
Depending on if we use any of them, most likely there will be a free selection that you can make and others might be reserved for gdnet+ members.

It's very easy to set a custom stylesheet on a per-site basis in Firefox. Subscribing to GDNet+ has many incentives already, and I don't think crippling things for normal users would create many converts. $0.02.

when you do something right, people won't be sure you've done anything at all.

Michael Tanczos

5,681

Author

November 27, 2005 12:59 PM

Quote:Original post by oscinis
Quote:Original post by Michael Tanczos
Depending on if we use any of them, most likely there will be a free selection that you can make and others might be reserved for gdnet+ members.

It's very easy to set a custom stylesheet on a per-site basis in Firefox. Subscribing to GDNet+ has many incentives already, and I don't think crippling things for normal users would create many converts. $0.02.

It was hard enough as is to put together a package that didn't charge for content to sell to subscribers. What it does provide for us is some stability with income.. e.g. we don't have to continually depend on soliciting advertisers from month to month to stay afloat. The entire site is practically given away as is, so it's small incentives like themes for gdnet+ that add to the mix of features we worked hard to put together. Right now we don't have near the number of subscribers we could have or would like.. and we spend a good deal of time scratching our heads over what it would take to really sell it to everyone.

Each and every person who uses the site consumes some very real dollar amount of resources we have to pay for.. whether they are subscribers or not. It's the pitfalls of running a large site that the aggregate cost of these users can be immense. You have to find creative ways to keep things going. These are behind-the-scenes issues we deal with on a daily basis that most users never know about or have to worry about.

---
Michael Tanczos

[web] New Challenge : GDNet Black (or alternate skins!)

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

[web] New Challenge : GDNet Black (or alternate skins!)

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines