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

968

November 25, 2005 11:47 PM

Quote:Original post by Michael Tanczos
http://www.gamedev.net/?csslink=black

A pseudo-try at a light blue bottom. It would be easier just to load up photoshop and create the left-side graphic with some cool button style and be done with it.

---
Michael Tanczos

The same top might work (as the white site), maybe just convert the menu bar from light blue to something like neutral gray.

Or with the bar maybe you can span the menu across like on classical gamedev (top menu). I wanted to try that but wasn't sure how to go about it. One other idea I had was to put the menu directly under the logo (again not sure how from the style sheet).

google

MrEvil

970

November 26, 2005 12:00 AM

Maybe not the best place for this, since it's about black styles, but I didn't want to start a new thread.
I'm working on a nice pink scheme at the moment [inlove]:

		.dummy {font-size: 10px}    	body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; margin: 0px; background: #ffe6fb; color: #000000}	P, TD, OL, UL, DL {font-family: verdana,arial; font-size: 10pt;}		A:link {text-decoration: none; color: #a6001d} /* 1D3A7F */	A:visited {text-decoration: none; color: orangered}	A:active {text-decoration: none; color: #000000}	A:hover {text-decoration: underline; color: #dd1100}		#recentthreadslink {text-decoration:none; color: #FFFFFF}	#recentthreadslink:hover { text-decoration:underline; color:#CCCCCC}	a.rss, a.rss:link, a.rss:visited {color: #FF0000; width: 30px; height: 14px; background-color: #ffe1e7; 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}	  	.boxheader { font-family: verdana, arial; font-size: 9pt; font-weight: bold; background: #5B82B6; border-top: solid 1px #88BBEE; border-left: solid 1px #88BBEE; border-right: solid 1px #336699; border-bottom: solid 1px #336699; color: white}	.boxbody, .boxtext { font-family: verdana, arial; font-size: 8pt; border: 0px; background: #EEEEF3 }	.headerlink { color: white }	.menuheadr, .boxheadr { font-family: verdana, arial; font-size: 9pt; font-weight: bold; background: #ff1637; border:1px outset #ff1637; color: #ffe1e7; }	.spotlighthdr { font-family: verdana, arial; font-size: 9pt; font-weight: bold; background: #ff4062; border: 1px outset #ff4062; color: #ffe1e7; }		/* featbody, spotlightbody are legacy styles */	.featbox, .featbody, .spotlightbody, .featmenu { font-family: verdana, arial; font-size: 8pt; background: #ffe1e7; border: 1px outset #ffe1e7;}	.spotlightbox { font-family: verdana, arial; font-size: 8pt; background-color: pink; border: 1px outset pink;}	.purplehdr { font-family: verdana, arial; font-size: 17px; font-weight: bold; color: #9B5952 }	.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 { background: pink; border-style: outset; cursor: default; }        input[value=Update] { background: pink; border: 2px outset pink; }	.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-color: hotpink; border: 1px outset pink;}	.ZWNewsFmt01-Headline { background-color: pink; font-family: verdana, arial; width: 100%; font-size: 10pt; font-weight: bold; padding: 3px; border: 1px outset #ffe1e7; padding-bottom: 2px; color: #501020; }	.ZWNewsFmt01-Byline { font-family: verdana, arial; font-size: 10px }	.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: #ff4062;}		.stats_bold {font-family: verdana, arial; font-size:8pt; font-weight:bold; color: #ff4062;}    		/* Top searchbar */  	.contextNav {		position: relative; 		top: -6px;		}		  	.hdrTopLinks, .hdrSearchBox {		font-size: 10px;		font-family: verdana, arial;		color: #400013;		width: 100%;/*		height: 15px; */		vertical-align: top;		text-align: right;	}		.hdrbreadcrumbs		{		font-size: 10px;	}		.searchinput { font-size: 10px; height: 17px; background-color: #ffe1e7; border: 2px inset #ffe1e7; }	.searchbutton { position: relative; top: 2px }		/* Javascript Pulldown Menu Styles */		.topMenuHdr {	  text-align: center;	}		.topMenu {	  background: transparent; 	  text-align: center;	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	  	}		.submenu {	  background-color: #FFFFFF;	  border-width: 1px;	  border-style: solid;	  border-color: #AAAAAA;	}		.topItemNormal {	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	  color: crimson;	  border-right: solid 1px crimson;	  text-indent: 3px;	  cursor: pointer;	}		.topItemNormal_Start	{	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	  color: crimson;	  border-left: solid 1px crimson;	  border-right: solid 1px crimson;	  text-indent: 3px;	  cursor: pointer;	}		.topItemOver {	  font-family: Verdana;	  font-size: 12px;	  font-weight: bold;	  text-decoration: none;	  background-color: #ffd2da;/*#004D7E;*/	  text-indent: 3px;	  color: orangered;	  cursor: pointer;	  border: 1px solid #ff1837;	}		.itemNormal {	  font-family: Verdana;	  font-size: 11px;	  color: crimson;	  cursor: pointer;	  background-color:#ffd2da; /*#004D7E;*/	  border-left: solid 1px #ff4062;	  border-right: solid 1px #ff4062;	  border-bottom: solid 1px #ff4062;	}		.itemOver {	  font-family: Verdana;	  font-size: 11px;	  color: #ffe1e7;	  cursor: pointer;	  background-color: #ff4062;	  border-bottom: solid 1px #ff4062;	}			/* Informative textbox decoration */		.roundedBox {	  position: relative;	  left: 0;	  top: 0;	  width: 100%;	}		.boxCorners {	  text-align: right;	  //background-image: url('../pics/int_hdbkg.png');display: none;	}	.boxCorners_MM {	  text-align: right;display: none;	  //background-image: url('../pics/int_drk_bkg_hdr.gif');	}		.boxLeft {	  position: absolute;	  top: 0px;	  left: 0px;	}	.boxContentHeadr {	  padding-bottom: 2px;	  text-indent: 8px;	  font-family: verdana, arial;	  font-size: 12px;	  font-weight: bold;	  vertical-align: top;	  //background-image: url('../pics/int_hdbkg_wrt.png');	  background-color: hotpink;	border: 1px outset pink;	color: white;	}		.boxCImgR {		display: none;		position: absolute; right: 0px; top: 0px; 	}		.boxCImgL {		display: none;		position: absolute; left: 0px; top: 0px	}			.boxContentHeadr_MM {	  //background-image: url('../pics/int_drk_bkg_bdy2.gif');	  border-bottom: solid 1px white;	  border-right: solid 3px white;	background-color: hotpink;	border: 1px outset pink;	  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: #000000;	  font-family: verdana, arial;	  font-size: 11px;	  vertical-align: top;	  background-color: #ffe1e7;  	  border-left: solid 1px #EEEEFA;	  border-top: solid 1px #EEEEFA;	  border-bottom: solid 1px #CCCCCC;	  border-right: solid 1px #CCCCCC;	}		.boxContent {	  padding: 7px;	  color: #000000;	  font-family: verdana, arial;	  font-size: 11px;	  vertical-align: top;	  background-color: #ffe1e7;	  border-left: solid 1px #DDDDDD;	  border-right: solid 1px #DDDDDD;	  border-top: solid 1px #EEEEEE;	  border-bottom: solid 1px #CCCCCC;	}/* 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:38px;	/* 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: 325px;/*296px;*/	  height: 99px;	  padding: 0px;	  margin: 0px;	  border: 0px;  	  background-image: url('../mirror/images/hdrmain-new4.gif');	   /*.gif');*/	}		#CM_AdSpace {	  padding-right: 4px;	  height: 73px;	  width: 100%;	  text-align: right;	  vertical-align: middle;	  background-image: url('../pics/default8_02.gif');	}		#CM_AdSpaceTrailer {	  margin: 0px;	  padding: 0px;	  width: 4px;	  height: 73px;	  background-image: url('../pics/default8_03.gif');	  background-repeat: no-repeat;	}		#CM_AdContainer {	position: relative;	top: 0px;	right: 2px;	}		#CM_MidSpace {	  margin-top: 0px;	  margin-bottom: 0px;	  font-size: 1px;	  height: 3px;	  background-image: url('../pics/default8_05.gif');	}		#CM_MidSpaceTrailer {	  width: 4px;	  height: 3px;	  background-image: url('../pics/default8_06.gif');	  background-repeat: no-repeat;	}		#CM_NavSpace {	  padding: 0px;	  height: 22px;	  background-image: url('../pics/default8_08.gif');	}		#CM_NavSpaceTrailer {	  width: 4px;	  height: 22px;	  background-image: url('../pics/default8_09.gif');	}		#CM_ExOptA {	  height: 4px;	  font-size: 1px;	  background-image: url('../pics/default8_11.gif');	}		 	#CM_ExOptB {	  width: 4px;	  height: 4px;	  font-size: 1px;	  background-image: url('../pics/default8_12.gif');	}/* Footer */	#footer {		font-size: 11px; 		font-family: verdana, arial; 		color: black;		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: hotpink}  .smallfontwhite { font-size:10px; color: #CCCCCC}    .head {color: crimson; background: #ffb0ba; border: 2px outset #ffb0ba}  .headsmall {font-family: verdana, sans-serif; font-size: 10px; color: crimson; background: #ff909d; border: 1px outset #ff909d; }  .headsmalllink { color: orangered; }  .category {color: white; background: #ff909d; border: 1px outset #ffe1e7; }  .postcell {font-size: 12px; background: #ffb0ba; color: crimson; border: 1px outset #ffe1e7; }  .altforumcell {background: #ffd2da; border-left: 1px outset #ffd2da; border-top: 1px outset #ffd2da; border-right: 1px solid #ffc0c8; border-bottom: 1px solid #ffc0c8;}  .forumcell {background: #ffe1e7; border-left: 1px outset #ffe1e7; border-top: 1px outset #ffe1e7; border-right: 1px solid #ffd2da; border-bottom: 1px solid #ffd2da;}  .announcecell {overflow: auto; color: black; background: pink; border: 1px outset #ffe1e7;}  .post_trailer {background: pink; font-size: 10px; border: 1px outset pink; }  .post_dateline {background: pink; font-size: 10px; border: 1px outset pink;}  .post_author {background: pink; font-size: 11px;vertical-align: middle; border: 1px outset pink;}  .post_body {background: #ffe1e7; padding: 5px 5px 5px 5px; border-style: outset; border-color: #ffe1e7; border-width: 2px 1px 1px 1px}  .post_separator {font-size: 10px; background: #ff4062; width: 95%; border-left: 1px outset #ff4062; border-right: 1px outset #ff4062;}    .threadhighlight {background: #003366}  .time {color: #560000;}  .staff { color: hotpink;/*21BC21;*/ font-weight: bold/*#32CD32/*#00781A;*/ }  .moderator { color: /*#DC143C;*/#CB021A; font-weight: bold /*#BD282D*/ }  .premium { color: orangered; font-weight: bold }  .premiumusernames { color: orangered; font-weight: bold }    .suspended { color: red; text-decoration: line-through;}  .banned {	color: red;	text-decoration: line-through; }  .quote { font-size: 11px; background: #ffd2da; border: 1px outset #ffd2da;}  .quote .quote { font-size: 11px; background: #ffc0c8; border: 1px outset #ffc0c8}  .quote .quote .quote { font-size: 11px; background: #ffa5b5; border: 1px outset #ffa5b5}  .quote .quote .quote .quote { font-size: 11px; background: #ff93a6; border: 1px outset #ff93a6; }  .forumrules {border: outset #ffd2da 2px; background: #ffd2da; font-family: verdana, sans-serif; color: black; font-size: 10px}  .source {background: #ffffff; border: solid 2px; font-family: Courier New; color: black; font-size: 9pt; width: 95%; height: 250px; overflow: auto; padding: 3px;}  .editedby {color: #332323; 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: #ff1637;				}    .calendar {	font-family:verdana, arial, sans-serif;	color:crimson;	background:#ffe1e7;	font-size:10px;	font-weight:normal; 	padding:4px;			}  		  .calendarsel {		font-family:verdana, arial, sans-serif;		background:#ff1637;		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 crimson;	margin: 0;	}		ul#tabnav li {	float: left;	height: 21px;	background-color: #ffd2da;	margin: 2px 2px 0 2px;	border: 1px solid crimson;	}		body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {	border-bottom: 1px solid crimson;	background-color: #ff4062;	}		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: crimson;	text-decoration: none;	padding: 4px;	}		#tabnav a:hover {	background: #ff1637;	color: white;	}

[grin] I still need to change all the images though, to sparkly pink images [grin]

Revision: Calendar
Revision: Bookmarks, Main Page panels,

[Edited by - MrEvil on November 26, 2005 1:00:38 AM]

smart_idiot

1,298

November 26, 2005 03:29 AM

This is my attempt at something. There's probably a bunch of stuff missing from it. All well.

stylesheet

[Edited by - smart_idiot on November 26, 2005 7:29:03 AM]

Chess is played by three people. Two people play the game; the third provides moral support for the pawns. The object of the game is to kill your opponent by flinging captured pieces at his head. Since the only piece that can be killed is a pawn, the two armies agree to meet in a pawn-infested area (or even a pawn shop) and kill as many pawns as possible in the crossfire. If the game goes on for an hour, one player may legally attempt to gouge out the other player's eyes with his King.

SpreeTree

396

November 26, 2005 05:32 AM

That one looks really nice, just like the old GameDev, but it still has the clean, professional look of the new site.

Rating++

Spree

johnhattan

2,354

November 26, 2005 07:08 AM

Dunno what to do about the news icons. Far as I know, there's not a good way to blend against any color background, short of putting complementary-colored borders around everything.

For example, the text in my games. Much of it is a light color with a dark border. That way it's visible no matter what kind of color or pattern you make as a background. Case in point, the score-text here.

But that'd be ugly to do everywhere on icons. We'll probably just have to have an extra set of icons blended against black. Thankfully we've already got that, although the news icons just had black backgrounds and no alpha-channel as they have now.

(my byline from the Gamedev Collection series, which I co-edited) John Hattan has been working steadily in the casual game-space since the TRS-80 days and professionally since 1990. After seeing his small-format games turned down for what turned out to be Tandy's last PC release, he took them independent, eventually releasing them as several discount game-packs through a couple of publishers. The packs are actually still available on store-shelves, although you'll need a keen eye to find them nowadays. He continues to work in the casual game-space as an independent developer, largely working on games in Flash for his website, The Code Zone (www.thecodezone.com). His current scheme is to distribute his games virally on various web-portals and widget platforms. In addition, John writes weekly product reviews and blogs (over ten years old) for www.gamedev.net from his home office where he lives with his wife and daughter in their home in the woods near Lake Grapevine in Texas.

OrangyTang

1,298

November 26, 2005 09:24 AM

Quote:Original post by smart_idiot
This is my attempt at something. There's probably a bunch of stuff missing from it. All well.

stylesheet

Thats rather nice. [grin]

[size="1"][[size="1"]TriangularPixels.com[size="1"]] [[size="1"]Rescue Squad[size="1"]] [[size="1"]Snowman Village[size="1"]] [[size="1"]Growth Spurt[size="1"]]

Rob Loach

1,504

November 26, 2005 09:45 AM

It's getting there, I love the progress you guys have made on this... Keep it up.

Rob Loach [Website] [Projects] [Contact]

CJM

454

November 26, 2005 11:55 AM

Quote:Original post by johnhattan
Dunno what to do about the news icons. Far as I know, there's not a good way to blend against any color background, short of putting complementary-colored borders around everything.
...
But that'd be ugly to do everywhere on icons. We'll probably just have to have an extra set of icons blended against black. Thankfully we've already got that, although the news icons just had black backgrounds and no alpha-channel as they have now.

What would be nice is to have the white icons, maybe the black icons and also an original transparent .png. I'm no expert, but AFAIK most of the issue with transparent .pngs is in the past, and browser compatibility wouldn't be a huge issue if people are picking funny themes [because if the theme doesn't work on their particular browser, they probably won't use it]...

Unfortunately the biggest issue is providing an easy way to allow the guy making the styles to actually be able to pick which image they want, but some &#106avascript trickery seems like it might fit the job.<br><br>Just some thoughts.<br><br>--CJM

cowsarenotevil

3,015

November 26, 2005 12:46 PM

I now have all but one (who's online) of my icons "done." I still need to redo a couple of them, so if there are any glaring things that I should change before I send them in, please say so. Otherwise, what do you think?

-~-The Cow of Darkness-~-

johnhattan

2,354

November 26, 2005 01:21 PM

Quote:Original post by CJM
Quote:Original post by johnhattan
Dunno what to do about the news icons. Far as I know, there's not a good way to blend against any color background, short of putting complementary-colored borders around everything.
...
But that'd be ugly to do everywhere on icons. We'll probably just have to have an extra set of icons blended against black. Thankfully we've already got that, although the news icons just had black backgrounds and no alpha-channel as they have now.

What would be nice is to have the white icons, maybe the black icons and also an original transparent .png. I'm no expert, but AFAIK most of the issue with transparent .pngs is in the past, and browser compatibility wouldn't be a huge issue if people are picking funny themes [because if the theme doesn't work on their particular browser, they probably won't use it]...

Unfortunately the biggest issue is providing an easy way to allow the guy making the styles to actually be able to pick which image they want, but some &#106avascript trickery seems like it might fit the job.

Just some thoughts.

Yeah, we'll probably have two sets of icons, one set blended against black and one against white. Unless we've got a couple of graphics gods who can render us some new news-icons blended against pure transparency as opposed to our current set of icons that are photographs taken against colored backgrounds (usually white).

I'm not averse to having someone render up some real news icons. IMHO, our news icons are a sad lot. Some of 'em are so generic as to be meaningless (the computer keyboard), and some refer to stuff that'll never be newsworthy again (Cybiko).

My vision was always to have icons that would also categorize the news, ala slashdot. While some stuff would be pointed at a particular company or technology if it was something so important to game development that it would be inevitable (Microsoft, Sony, DirectX, OpenGL), most would just be categories like "3D graphics related", "2D graphics related", "Programming language related", "Programmer tools", "industry news", "new product announcement", etc.

Then we could collect up news related by its category, like in Slashdot. In Slashdot, I can click on the Apple icon on an apple-related news item, and it'll change the view to only show the recent news with the same icon (which would be all of the apple-related items).

I've been angling for this for a while, as it'd make our news icons actually meaningful instead of the "every other news site has icons, so let's throw some icons into our news items" paradigm that we have now.

Any 3D gods out there who could render us some news icons so I can start imposing my vision on the gamedev brass?

(my byline from the Gamedev Collection series, which I co-edited) John Hattan has been working steadily in the casual game-space since the TRS-80 days and professionally since 1990. After seeing his small-format games turned down for what turned out to be Tandy's last PC release, he took them independent, eventually releasing them as several discount game-packs through a couple of publishers. The packs are actually still available on store-shelves, although you'll need a keen eye to find them nowadays. He continues to work in the casual game-space as an independent developer, largely working on games in Flash for his website, The Code Zone (www.thecodezone.com). His current scheme is to distribute his games virally on various web-portals and widget platforms. In addition, John writes weekly product reviews and blogs (over ten years old) for www.gamedev.net from his home office where he lives with his wife and daughter in their home in the woods near Lake Grapevine in Texas.

[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