WHy are Custom CSS files bad or how to go around IG?

[Freon22]

Tonight I will do a video on how to add extension for the Google Chrome browser. I will also show you how to set it up and we will write a few rules. From there you can let your artistic imagination go wild.

Edit: While I was putting together some css rule for my video tonight I noticed that the Examine Ship page that Infinity showed is within a td tag. So while you can increase the font size there it will also increase the font size for all td tags. So it is not something that you would want to do. I am going to do some cool things like add rounded corners, change the background color, border size and colors. This extension will allow anyone using Chrome to play with the SMR display. I am hoping to see some cool looking display from the players.

[Page]

While I was putting together some css rule for my video tonight I noticed that the Examine Ship page that Infinity showed is within a td tag. So while you can increase the font size there it will also increase the font size for all td tags. So it is not something that you would want to do.

Code: Select all

div#middle_panel div table tr td small {
	font-size: 200%
}

You can use that code if you want to target just the info Infinity did and although it could potentially hit a small number other places in SMR I don't think it'd be much of a problem.

[Freon22]

Thanks Page I did not dig into the css very far. But it will make a nice extra bit of code for the video.

Thanks again.

[Freon22]

Ok here is a link to the video on how to install the plugin and setting it up so you can effect the CSS rules in the game.

http://video.smrealms.de/videos/Chrome_ ... e_CSS.html

Here is the CSS rules that I used in the video and thanks again to Page for adding the rules for increasing the font size for one of the pages.

Code: Select all

td.m0 { 
    background-color: #1F1F1F;   
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border: solid #FBF5E6;
    border-width: 2px 2px 0px 2px;
}
td.footer_left {
    background-color: #1F1F1F; 
    border-bottom-left-radius: 15px;
    border: solid #FBF5E6;
    border-width: 0px 0px 2px 2px;
}
td.footer_right {
    background-color: #1F1F1F; 
    border-bottom-right-radius: 15px;
    border: solid #FBF5E6;
    border-width: 0px 2px 2px 0px;
}
div#middle_panel div table tr td small {
   font-size: 200%;
}

[Infinity]

It is possible to make a rather small combat oriented CSS file that will increase font sizes for important things.

You do not need selectors so deep to do that. Actually, you want selectors like those to override back the specific cases that your initial changes to the CSS screwed up. Probably won't work in IE, cause IE has this special affection towards tables. Luckily, for my little experiment here, I don't have to care about IE, only the browser I actually use.

What this CSS file achieves is easier (read: faster) determination of current combat situation, it possibly goes around some features that were made to slow down.

Now, you said it was legal.

[Page]

Well I don't mind making changes like that as long it it doesn't make it look really ugly, after all the colouring of ship defenses is purely in order to make it easier to judge the combat situation. So yea, feel free to point out more places and I'm happy to change it, after all I'm sure no one will really mind :P

[Infinity]

It looks really ugly

[Freon22]

I don't have much free time this last week or so and it is looking like I will have less free time in the next few weeks. Anyway I have been working on a new color layout for the Freon22 layout. I asked Page to check it out but he has less free time then I do right now. So if anyone of you that are using the Freon22 layout and are also using Google Chrome could you test this and see how you like it. If it is good then I will ask Page to added it as an option under the freon22 layout.

Code: Select all

html {
    background-color: #000000;
} 
span#ship_name {
    display: block;
    word-wrap: break-word;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
}
.smrBanner {
    color: #8E8E8E;
}
span#tod {
    color: #8E8E8E;
}
.bar1Separator {
    border-top-color: #3D3D3D;
}
.tableHeight {
    color: #FFF;
}
.topleftCell {
    color: #98C1F4;
}
.topcenterCell {
    color: #707070;
}
.rightCell {
    color: #707070;
}
.leftCell {
    color: #9DCEFF;
}
.name {
    color: #98C1F4;
}
.TopInfo {
    background-color: #141414;
    border-color: #3D3D3D;
}
.LeftNavOne {
    background-color: #141414;
    border-color: #3D3D3D;
}
.LeftNavTwo {
    background-color: #141414;
    border-color: #3D3D3D;
}
.MainContentArea { 
    border-color: #3D3D3D;
}
.rightInfo {
    background-color: #141414;
    border-color: #3D3D3D;
}
div.rightInfoShip a { 
    color: #767897;
}
div.rightInfoShip a:hover {
    color:  #CC3300;
    background: none;
}
.wep1 {
    color: #1E90FF;
}
a {
    color: #9DCEFF;
}
a:hover {
    color: #CC3300;
    background: none;
}
a.leftNav {
 color: #9DCEFF;
}
a:hover.leftNav {
    color: #CC3300;
    background: none;
}
a.nav {
    color: #6699FF;
}
a:hover.nav {
    color:  #CC3300;
    background: none;
}
a.buttonA {
    border-color: #292929 #575757 #575757 #292929;
    background-color: #141414;
}
a.buttonA:hover {
 background-color: #141411;
}
a.buttonA:active {
 background-color: #40F;
 border-color: #5B3100 #9B7141 #9B7141 #5B3100;
}
table.standard td, table.standard th {
     border-color: #3D3D3D;
}
table.standard th {
    color: #6B6699;
    background-color: #141414;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
th {
   background-color: #002346;
   color: #39F;
}
h1, h2, h3, h4, h5, h6 {
   color: #8E8E8E;
}
input {
   background: #111;
   color: #FFF;
   border-color: #3D3D3D;
}
input.submit {
   border-color: #3D3D3D;
}
input.submit:active {
   border-color: #3D3D3D;
}
input[type="submit"] {
   border-color: #3D3D3D;
}
input[type="submit"]:active {
   border-color: #3D3D3D;
}
textarea {
   background: #111;
   color: #FFF;
   border-color: #3D3D3D;
}
div.secNavBox div div {
   border-color: #3D3D3D;
}
.scan_hover {
   background-color: #767897;
}
.scan_hover a {
   background-color: #767897;
   color: #000;
}
.scan_hover a:hover {
   background-color: #6699FF;
}
.lastVisited {
    color: #66FFCC;
}
.visited, .currentSector {
   color: #6699FF;
}
div.connectSeclm {
   background-color: #3D3D3D;
   filter: alpha(opacity=70);
   opacity: 0.7;
}
div.connectSeclm:hover {
   background-color: #5B5B5B;
}
div.currentSeclm {
   background-color: #3D3D3D;
}
div.currentSeclm:hover {
   background-color: #5B5B5B;
}
div.normalSeclm {
   background-color: #141414;
   filter: alpha(opacity=70);
   opacity: 0.7;
}

[Freon22]

Page I have been playing this CSS not for a few weeks and I like it. I even add a rule so that it show the Galaxy Map page with these colors. I like this css for the following reasons. It is easy on the eyes which is a big plus, it also highlight the areas that you need to see much better. I am hoping that you can make this css file the default for the Freon22 layout.

[N.ator]

care to upload it to a server so i can use the url? thanks