Custom CSS

Ask Page...

Moderators: JettJackson, Infinity, Page

Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

I think you have to give the beta members the rights to view attachments.
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

I looked and the Halloween css I did was for 1.5 and I don't think you are using that css file in 1.6. So I download the default.css from the beta game and have started adjusting and commenting it so its more readable. For thing I wanted to say is that the file is not W3C compliant because all of the properties are in upcase. "W3C calls for lowercase letters" So I am changing them to lowercase.
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

First thing, I'm fairly sure none of the properties in default.css are upper case (but if you download css with IE6 I know it can mangle it horribly).
Second thing I did just try running some css through the w3c validator and it passed regardless of upper/lower case. Although I know lowercase is the norm.

default.css

Code: Select all

body,html {
	height:100%;
}

body {
	background:#0B2121;
	font-family: Arial, sans-serif;
	font-variant:normal;
	margin:0px;
	padding:0px;
	margin-top:10px;
	color:#ffffff;
}

h1 {
	color : #80C870;
	font-size : 125%;
	font-family: Arial, sans-serif;
	font-weight:bold;
	padding:0px;
	margin:0px;
}

h2 {
	color : #80C870;
	font-size : 110%;
	font-family: Arial, sans-serif;
	font-weight: bold;
	padding:0px;
	margin:0px;
}

h3 {
	color : Fuchsia;
	padding:0px;
	margin:0px;
}

th {
	background : #0A4E1D;
	color : #80C870;
	text-align:center;
}

#InputFields, .InputFields {
	background : #06240E;
	color : #FFFFFF;
	border : 1px solid #80C870;
	font-family: Arial;
	font-size:inherit;
}
.submitStyle:link{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font-family: Arial;
	font-size:inherit;
	padding: 0px 8px;
}
.submitStyle:visited{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font-family: Arial;
	font-size:inherit;
	padding: 0px 8px;
}
.submitStyle:hover{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font-family: Arial;
	font-size:inherit;
	padding: 0px 8px;
}
.submitStyle:active{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font-family: Arial;
	font-size:inherit;
	padding: 0px 8px;
}
.submitStyle{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font-family: Arial;
	font-size:inherit;
	padding: 0px 8px;
	display: inline-table; /* Fixes the problems with vertical overlap in FF, but not IE :( */
}

#InputFieldsText {
	background : #06240E;
	color : #FFFFFF;
	border : 1px solid #80C870;
	font-family: Arial;
	font-size:inherit;

}

#help_content {
	margin-bottom : 50px;
	margin-left : 20px;
	margin-right : 20px;
	margin-top : 10px;
}

#help_menu {
	margin-bottom : 10px;
	margin-left : 10px;
	margin-right : 10px;
	margin-top : 10px;

}

form {
	margin: 0px;
}

a.scan_btn {
	background : #060e88;
	border : 1px solid #8070c8;
	font-weight:bold;
	font-size: 80%;
	padding:0.1em 0.5em 0.1em 0.5em;
	text-align:center;
	color:#bbbbbb;
	position:relative;
	top:-1.6em;
}
a.scan_btn:hover {
	background : #060e88;
	color:#ffffff;
}

td.sector {
	padding:0px;
	height:3.5em;
	width:4.5em;
	text-align:center;
}

img {
	border: none;
}

img.vote_site {
	width:98px;
	height:41px;
}

big {
	font-size:125%;
}
.big {
	font-size:125%;
}

small {
	font-size:75%;
}

.small {
	font-size:75%;
}

.attack_warning {
	text-align:center;
	border:1px solid #bbbb00;
	background-color:#550000;
	font-weight:bold;
	color:#ff0000;
	padding:0px;
	margin:0px;
}

/* */

table {
	font-size:100%;
}

.auto {
	width:auto;
}
.shrink {
	width:1%;
}

td {
	padding:3px;
	color:#ffffff;
	font-family: Arial, sans-serif;
	font-variant:normal;
	vertical-align:middle;
}

.top {
	vertical-align:top;
}

.blank {
	margin:0px;
	padding:0px;
}

.nowrap {
	white-space:nowrap;
}

td.footer_left {
	padding:10px;
	border:1px solid #0b8d35;
	background-color:#06240e;
	border-top:none;
	border-right:none;
	vertical-align:bottom;
	text-align:left;
	font-size:75%;
	white-space:nowrap;
}

td.footer_right {
	padding:10px;
	border:1px solid #0b8d35;
	background-color:#06240e;
	border-top:none;
	border-left:none;
	vertical-align:bottom;
	text-align:right;
	font-size:75%;
	font-family: Arial, sans-serif;
	white-space:nowrap;
}

table.standardnobord {
	border:none;
}

.standardnobord tr,.standardnobord td,.standardnobord th{
	border:none;
}

table.standard {
	border:1px solid #0b8d35;
	border-spacing: 0px;
}

table.standard td, table.standard th{
	border:1px solid #0b8d35;
}
table.create {
	border:0px solid #0b8d35;
}
.create td,th{
	padding:3px;
	border:1px solid #0b8d35;
	border-color:white;
	border-left-width:0px;
	border-right-width:0px;
	border-bottom-width:0px;
	border-top-width:0px;
}
td.border_left {
	border-left-width:3px;
}
td.border_right {
	border-right-width:3px;
}
td.border_bottom {
	border-bottom-width:3px;
}
td.border_top {
	border-top-width:3px;
}
td.has_port {
	background-color:gray;
}
td.vert_cent{
	vertical-align:middle;
}
table.quote {
	border:1px solid #0b8d35;
}
th{
	padding:3px;
	font-size:110%;
}

.inset {
	width:95%;
}

.fullwidth{
	width:100%;
}
.fullheight{
	height:100%;
}
table.nobord td{
	border:none;
}

table.nohpad td{
	padding-left:0px;
	padding-right:0px;
	margin:0px;
}

.right {
	text-align:right;
}

.center {
	text-align:center;
}

td.button {
	padding:0px;
	text-align:center;
	width:1%;
	white-space:nowrap;
	vertical-align:middle;
}

div.bar1 {
	border:1px solid #0B8D35;padding:5px;
}

div.bar1 div {
	padding:2px;background-color:#0B8D35;text-align:center;
}

input {
	background : #06240E;
	color : #FFFFFF;
	border : 1px solid #80C870;
	font-family: Arial;
	font-size:100%;
}

textarea{
	background : #06240E;
	color : #FFFFFF;
	border : 1px solid #80C870;
	font-family: Arial;
	font-size:100%;
	width:30em;
	height:15em;
}

a{
	color:#ffffff;
	text-decoration:none;
	padding:0px;
	margin:0px;
}

a:hover {
	background:#0A4E1D;
}

a.header {
	color:#80C870;
}

.yellow {
	color:#ffff00;
}

.red {
	color:#ff0000;
}

.green {
	color:#00ff00;
}

.cyan {
	color:#00ffff;
}

.blue {
	color:#0000ff;
}
.purple {
	color:#7F00FF;
}
.npcColor {
	color:#66ccff;
}
.sectorColor {
	color:#00ffff;
}
.bold {
	font-weight:bold;
}
.italic {
	font-style:italic;
}
.underline {
	text-decoration: underline;
}
.smallCaps {
	font-variant:small-caps;
}
.smallFont {
	font-size:75%;
}
hr {
 	color:#80C870;
	background-color:#A0F890;
	height:2px;
}

img.alliance {
}

div.buttonA {
	margin: 0px;
	font-size:100%;
	height: 1.0em;
	display:inline;
}

a.buttonA  {
	font-size: inherit;
	text-decoration: none;
	height: 1.0em;
	display:inline;
	border-width: 2px;
	background-color: #0B8D35;
	border-style: solid;
	color:#ffffff;
	border-bottom-color: #2a6e2a;
	border-right-color: #2a6e2a;
	border-left-color: #a3cca3;
	border-top-color: #a3cca3;
	white-space:nowrap;
}

a.buttonA:hover {
	background-color: #0B8D35;
}

a.buttonA:active {
	background-color: #0B8D35;
	border-bottom-color: #a3cca3;
	border-right-color: #a3cca3;
	border-left-color: #2a6e2a;
	border-top-color: #2a6e2a;
}

/***************************/
table.m {
	height:100%;
 	width:80em;
	border-spacing:0px;
	padding:0px;
}
td.l0 {
	padding:0px 10px 0px 0px;
	vertical-align:top;
}
td.mb {
	width:225px;
}
div.l1 {
	text-align:right;
	width:10em;
}
td.m0 {
	padding:10px;
	border:1px solid #0b8d35;
	background-color:#06240e;
	border-bottom:none;
	vertical-align:top;
	width:100%;
}
div#middle_panel{
	text-align:left;
	width:100%;
}
td.r0 {
	padding:0px 0px 0px 10px;
	vertical-align:top;
	text-align:left;
}
div#right_panel {
	width:13em;
}

/*** CS Stuff ***/

div.cs_box {
	position: relative;
}
div.cs_box div.scan {
	position: relative;
	width: 250px;
	height: 250px;
}
div.cs_box div.no_scan {
	position: relative;
	width: 210px;
	height: 210px;
	top:-20px;
	left:-20px;
}
div.cs_box div.scan_up {
	position: absolute;
	top: 0px;
	left: 84px;
	width: 60px;
	height: 20px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060e88; /* scan blue */
}
div.cs_box div.move_up {
	position: absolute;
	top: 22px;
	left: 84px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_left {
	position: absolute;
	top: 84px;
	left: 0px;
	width: 20px;
	height: 60px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060e88;
}
div.cs_box div.move_left {
	position: absolute;
	top: 84px;
	left: 22px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.cs_mid {
	position: absolute;
	top: 84px;
	left: 84px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_right {
	position: absolute;
	top: 84px;
	left: 208px;
	width: 20px;
	height: 60px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060e88;
}
div.cs_box div.move_right {
	position: absolute;
	top: 84px;
	left: 146px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_down {
	position: absolute;
	top: 208px;
	left: 84px;
	width: 60px;
	height: 20px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060e88;
}
div.cs_box div.move_down {
	position: absolute;
	top: 146px;
	left: 84px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_warp {
	position: absolute;
	top: 161px;
	left: 221px;
	width: 20px;
	height: 60px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060e88;
}
div.cs_box div.move_warp {
	position: absolute;
	top: 161px;
	left: 159px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.move_warp:hover {
	background: #500000; /* hover red bg */
}
div.cs_box div.move_hover:hover {
	background: #005000; /* hover green bg */
}
div.cs_box div.scan_hover:hover {
	color: #FFFFFF; /* hover white text */
}
.scan_text_vert {
	font-size:90%;
	text-align:center;
	line-height:15px;
}
.scan_text_hor {
	font-size:90%;
	text-align:center;
	line-height:20px;
}
.move_text {
	line-height:60px;
	/*font-size:125%;*/
	font-weight:bold;
	text-align:center;
}
a.warp_link:hover {
	background: #500000; /* hover red bg */
}

table.csl {
	width:27em;
}

.dgreen {
	color:#00aa00;
}

.blue {
	color:#0000ff;
}

.nopad {
	margin:0px;
	padding:0px;
}


/* Weapon Drag Drop */

ul.sortable li {
	position: relative;
}

ul.boxy {
	list-style-type: none;
	padding: 4px 4px 0 4px;
	margin: 0px;
	width: 10em;
	font-size: 13px;
	font-family: Arial, sans-serif;
    border: 1px solid #0b8d35;
}
ul.boxy li {
	cursor:move;
	margin-bottom: 4px;
	padding: 2px 2px;
	border: 1px solid #0b8d35;
}
#left_col {
    width: 500px;
    float: left;
    margin-left: 5px;
}

/* LM */

table.lmt {
	border-collapse: collapse;
	border-spacing: 1px;
}

/*Local up link Icon*/
div.lm_sector div.lmup {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 10px;
	width: 120px;
}

/*Local Plot/Warp Area*/
div.lm_sector div.lmp {
	position: absolute;
	top: 10px;
	left: 0px;
	height: 18px;
	z-index:2;
}

/*Local trader and forces*/
div.lm_sector div.lmtf {
	position: absolute;
	top: 10px;
	right: 0px;
	height: 18px;
	text-align:right;
	z-index:2;
}

/*Local locations*/
div.lm_sector div.lmloc {
	position: absolute;
	top: 28px;
	left: 0px;
	height: 18px;
	z-index:2;
}

/*Local left link Icon*/
div.lm_sector div.lmleft {
	position: absolute;
	top: 46px;
	left: 0px;
	height: 20px;
	width: 20px;
}

/*Local sector number*/
div.lm_sector div.lmsector {
	position: absolute;
	top: 46px;
	left: 20px;
	height: 20px;
	text-align:center;
	width: 80px;
}

/*Local right link Icon*/
div.lm_sector div.lmright {
	position: absolute;
	top: 46px;
	left: 100px;
	height: 20px;
	text-align:right;
	width: 20px;
}

/*Local port section*/
div.lm_sector div.lmport {
	position: absolute;
	top: 66px;
	left: 0px;
	height: 44px;
	z-index:2;
	/*width: 120px;*/
}

/*Local down link Icon*/
div.lmdown {
	position: absolute;
	top: 110px;
	left: 0px;
	height: 10px;
	/*width: 120px;*/
}

div.lm_sector {
	position: relative;
	width: 120px;
	height: 120px;
}
div.connectSeclm {
	background-color:#33784b;
}
div.connectSeclm:hover{
	background-color:#14645F;
}
div.currentSeclm {
	/*background-color:#14642f;*/
	background: url('../images/currentsector.png');
}
div.currentSeclm:hover{
	/*background-color:#337873;*/
	background: url('../images/currentsector_hover.png');
}
div.normalSeclm {
	background-color:#0b4c1c;
}
div.normalSeclmu {
	background-color:#000000;
}
div.lm_sector img.move_hack {
	height:120px;
	width:120px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
}
a.mp_as {
	display:block;
	height:120px;
	width:120px;
	text-decoration:none;
	background-color:transparent;
	color:inherit;
}

/* Layout Sprite Map */

#layout {
	width: 1024px; height: 768px;
	background: transparent url('../images/smr_layout.png') no-repeat;
	margin: 10px auto; padding: 0;
	position: relative;
}
#layout li {
	margin: 0; padding: 0; list-style: none;
	position: absolute;
}
#layout li {
	display: block;
}
#smr_logo, #smr_logo a {left: 0; width: 185px; height: 100px;}
#player_name, #player_name a {left: 190px; top: 30px; width: 120px; height: 50px;}
#player_info, #player_info a {left: 316px; top: 16px; width: 318px; height: 70px;}
#ship_name, #ship_name a {left: 662px; top: 29px; width: 110px; height: 53px;}
#ship_info, #ship_info a {left: 785px; top: 14px; width: 219px; height: 71px;}
#main_window {left: 195px; top: 125px; width: 772px; height: 588px;}

/* wep drop down */
div.wep_drop1 {
	cursor:pointer;
}
div.wep_drop1 .wep1 {
	color:#f6ff00;
}

/* Gal Map */
li.gal {
	font-size:95%;
	height:1.5em;
}

div.connectSecgm {
	background-color:#33784b;
}
div.currentSecgm {
	/*background-color:#14642f;*/
	background: url('../images/currentsector.png');
}
.gpsubheader
{
	font-style:italic;
	margin-top:0px;
	margin-bottom:0px;
}
.gpeditornote
{
	font-size:smaller;
}
.gpcolumn
{
	width:50%;
	vertical-align: top;
}

.shiplistdescription
{
	white-space: nowrap;
}

.newbie
{
	font-style: italic;
}

ie_specific.css

Code: Select all

body{
	scrollbar-face-color:#06240E;
	scrollbar-highlight-color:#0B2121;
	scrollbar-shadow-color:#0B8D35;
	scrollbar-3dlight-color:#0B8D35;
	scrollbar-arrow-color:#0B8D35;
	scrollbar-track-color:#0B2121;
	scrollbar-darkshadow-color:#0B2121;
}

div.lm {
	width:612px;
	height:612px;
}

div.lms {
	height:122px;
	width:122px;
}

div.lmsv {
	height:122px;
	width:122px;
}

div.lmsa {
	height:122px;
	width:122px;
}

div.lmsc {
	height:122px;
	width:122px;
}
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

You must be right about IE messing with the download. Thanks for the files I will copy them.

Code: Select all

.standardnobord TD {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
.standardnobord TH {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
TABLE.standard {
	BORDER-BOTTOM: #0b8d35 1px solid; BORDER-LEFT: #0b8d35 1px solid; BORDER-SPACING: 0; BORDER-TOP: #0b8d35 1px solid; BORDER-RIGHT: #0b8d35 1px solid
}
TABLE.standard TD {
	BORDER-BOTTOM: #0b8d35 1px solid; BORDER-LEFT: #0b8d35 1px solid; BORDER-TOP: #0b8d35 1px solid; BORDER-RIGHT: #0b8d35 1px solid
}
TABLE.standard TH {
	BORDER-BOTTOM: #0b8d35 1px solid; BORDER-LEFT: #0b8d35 1px solid; BORDER-TOP: #0b8d35 1px solid; BORDER-RIGHT: #0b8d35 1px solid
}
TABLE.create {
	BORDER-BOTTOM: #0b8d35 0px solid; BORDER-LEFT: #0b8d35 0px solid; BORDER-TOP: #0b8d35 0px solid; BORDER-RIGHT: #0b8d35 0px solid
}
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

For those using a mozilla based browser (eg Firefox) you will need to follow the instructions here if you are trying to link to local files.
http://kb.mozillazine.org/Links_to_loca ... #LocalLink

For IE you may or may not need to lower security settings (I didn't have to with IE8 but that won't necessarily be the case for everyone)
In IE7, Go to Tools > Internet Options... > Security(tab) > Trusted Sites (icon) > Sites (button).
I assume it'll be similar in the other IE's as well

For other browsers I have no idea, guess it's a case by case thing.
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

I am redoing my Halloween css so it will work on 1.6 and am going to rename it orangefly. LOL Anyway I have part of it done you can try it here is the address link.

Code: Select all

http://video.smrealms.de/css/orangefly.css  
Just keep in mind it not finished.
I am thinking of doing about 6 different color themes with one of them being a star field type. After I get some of these done maybe Page will load them on the server and put a dropdown option so users can use them.

btw: Page the css links idea is the best that we have had in a long time.
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

Btw if you tidy up the css as you go along it'd be great to update (I didn't write the css and some bits seem fairly redundant) or add extra id/classes then I'm happy to do that. Could also try changing the main table structures to divs with the property that makes them act like tables in css so that if people want they can possibly do slightly cooler things with them.
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

CSS2 does have the css table and now that IE8 passed the Acid2 test you could try to go CSS most of the way. Its going to take me a few days to familiarize myself with all the selector in the css file. I am willing to give it a try, who knows it make work but some of the older browsers may have a problem displaying.
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

I am going to love this css tables, I have been playing around with them today. It seem so easy to create a table style layout with css2. I also checked and it displays good in IE8 and Firefox. Now keep in mind this is about as simple example as you can get but you should get the point. I think I am going to try a full layout with css tables. I know that some of your tables are dynamically inserted but that should not be a problem because you would just be inserting the table within a div tag.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="tablecss.css" rel="stylesheet" type="text/css" />
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" style="margin: 0px; padding: 0px; height: 100%; width: 100%;">
    <div class="tblContainer">
        <div class="tblRow">
            <div class="tblCellLeftMenu">Cell1</div>
            <div class="tblCellMain">Cell2</div>
            <div class="tblCellRightMenu">Cell3</div>    
        </div>    
    </div>
    </form>
</body>
</html>

Code: Select all

html, body {
    height: 100%;
    width: 100%;
    margin: 0px 0px 0px 0px;    
}
.tblContainer {
     display: table;
     width: 100%;
     height: 100%;
}
.tblRow {
     display: table-row;
}
.tblCellMain {
     display: table-cell;
     background-color: Black;
     width: 80%;
     height: 100%;     
     border-top: 1px solid #0b8d35; 
     border-left: 1px solid #0b8d35;
	 border-right: 1px solid #0b8d35;
}
.tblCellLeftMenu {
     display: table-cell;
     background-color: Gray;
     width: 10%;
     height: 100%;
}
.tblCellRightMenu {
    display: table-cell;
    background-color: Gray;
    width: 10%;
    height: 100%
}
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

Will have to do somemore research found out display: table; does not have a colspan or rowspan. Looks like you have to use more nested div tags as a work around. So it looks like its moving from nested tables to nested div tags, I am starting to lose my love for css tables.
Post Reply