The online racing simulator
#51 - SJB
A little addon for the previous php script:


<?php 
php

// name of the jpg background (any size you want, mine is 400x100)
$background "lfsstatus.jpg";

$im imagecreatefromjpeg($background);

// edit to change textcolor e.g. black: 0, 0, 0 white: 255, 255, 255 blue: 0, 0, 255
$textcolor imagecolorallocate($im000);

// imagestring($im, fontsize (1-5), position x, position y, text, color )
imagestring($im575$host$textcolor);
imagestring($im3725"Mode: ".$mode$textcolor);
imagestring($im3740"Track: ".$track$textcolor);
imagestring($im3755"Cars: ".$cars$textcolor);
imagestring($im5775"Connections: ".$conns$textcolor);

header('Content-Type: image/jpeg');

imagejpeg($im);
imagedestroy($im);

?>

.htaccess

<?php 
RewriteEngine on
RewriteRule status
.jpgstatus.php
?>


Demo:


As attachment the background I used for this

Regards, SJB
Attached images
lfsstatus.jpg
How i can put host-http://www.lfsworld.net/hoststatus/?h=Blackwood%20XFG%20XRG with photos?
Hi was just wondering if it was possible for this to be used as html if so could someone help.
#54 - SJB
Do you mean how to include e.g. http://www.lfsworld.net/hoststatus/?h=![AMG]+GTR+MotorSport into your page?

<iframe src="[B]http://www.lfsworld.net/hoststatus/?h=![AMG]+GTR+MotorSport[/B]" width="320" height="160" align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="server1"> </iframe>

And if you want to have the Iframe reloaded every 60seconds:
<iframe src="[B]http://www.lfsworld.net/hoststatus/?h=![AMG]+GTR+MotorSport[/B]" width="320" height="160" align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="server1" onload="server1.setTimeout(function(){ server1.location.reload();}, 60000);"> </iframe>

Regards, SJB
Victor,replace here the code in this link http://www.lfsworld.net/hoststatus/?h=AlkoSpirt,%20Practice

<?php 
<!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" dir="ltr" lang="en"><head><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="http://www.lfsworld.net/hoststatus/styles/default.css" /><title>LFS HostStatus</title></head><body background="ffffff"><div class="HostName"><span style="color: #FF0000;">AlkoSpirtPractice</span></div
<
div id="Mode" class="DataCont"><div class="Field1">Mode</div><div class="Field2">S2Practice</div></div
<
div id="Track" class="DataCont"><div class="Field1">Track</div><div class="Field2">Westhill International Rev</div></div
<
div id="Cars" class="DataCont"><div class="Field1">Cars</div><div class="Field2">FXR</div></div
<
div id="Settings" class="DataCont"><div class="Field1">Settings</div><div class="Field2"><strong><span title="Racers are allowed to vote">V</span></strong> <i><span title="Joining mid-race is allowed">m</span></i></div></div
<
div id="Version" class="DataCont"><div class="Field1">Version</div><div class="Field2">0.5Z28</div></div
<
div id="Conns" class="DataCont"><div class="Field1">Conns</div><div class="Field2">47</div></div
<
div id="Users" class="DataCont"><div class="Field3"></div></div
</
body></html>
?>

Bit of help, pls: anyone knows hot to alterate the text color inside this iframe with the server status ? (our forum uses a dark grey background and it's veeery difficult to read who's racing, for example). Thank you.
there's no quick option to change the overal font color.
You can give me a stylesheet replacement if you know how to get the current one and adjust it, or you could tell me the colour you'd like the font to be in and I can make a custom stylesheet for you to use.
Unfortunately, I don't know how to use CSS. If you can lean a hand that would be great Victor. I think a good color, and inline with our site, would be greenish #9BC21B. This is for the list of who's connected (that today is dark blue and very difficult to spot on dark gray). The rest can remain as it is. Btw, great help the option you have added for changing the color of server name.
For refference, if needed, our forum is here RLR

Really appreciate your help, thank you.

PS: I managed to find something identified as CSS on the administration panel of our forum; is that maybe what you need ? (attached)
Attached files
CSS_maybe.txt - 4.6 KB - 607 views
Quote from Dygear :http://sixrevisions.com/css/20_websites_learn_master_css/

Hi Dygear, I know that you might've tried to help, but basically you are sugesting that I should start studying CSS for a few hours/days/weeks in order to find what I am looking for (that beeing changing the color of maximum 16 names in the connection list). It's like if I was asking you to help me write "Hello" on a cartonboard, you would suggest me to go to school and after one year I would know to write it myself.
I don't mean to be ignorant, or seem that I don't appreciate the value of everybody's time, but I really never worked with CSS, have no ideea how to use it, and have no ideea what I should look for inside CSS to be able to do the small job that I need.
Thank you for treating this as a constructive comment.

PS: and Google IS my friend
Quote from luchian :Unfortunately, I don't know how to use CSS. If you can lean a hand that would be great Victor. I think a good color, and inline with our site, would be greenish #9BC21B. This is for the list of who's connected (that today is dark blue and very difficult to spot on dark gray). The rest can remain as it is. Btw, great help the option you have added for changing the color of server name.
For refference, if needed, our forum is here RLR

Really appreciate your help, thank you.

PS: I managed to find something identified as CSS on the administration panel of our forum; is that maybe what you need ? (attached)

try this : http://www.lfsworld.net/hostst ... Romania&css=2&c=3
Works like a charm . Thank you Victor.
Quote from Victor :try this : http://www.lfsworld.net/hostst ... Romania&css=2&c=3

Me again . If I'm not too boldy, would it be possible to have the css file that I suppose you had to create ? This way I could study it, and play with the setting inside, giving the fact that now I have so much study material thanks to Dygear's post. If too much trouble, then just ignore my post; promise I won't mind
This is your CSS file that Victor made for you; http://www.lfsworld.net/hoststatus/styles/luchian.css from there you can see how most property of CSS work.

If your using Google Chrome, you can do live edits to what you see on the screen. Just go here, that's your host, using the CSS file that Vic made, right click anywhere in the document window and go to Inspect Element. From there you should see a 'DOM' at the bottom of your screen. If you can only see the HTML tag, then press the little triage next to it to show it's child elements, from there expand the body also. Now as you move your mouse over the items you see in the DOM list, you should see in the top of your screen where that element is on the HTML page as it highlights it's area when you mouse over it in the DOM list. Clicking on the element in the DOM list, you'll be able to edit it's properties on the right side of the DOM element inspector screen. Scroll down and you should see color with the color of the text on your screen. Just click on the color'ed square (that's the same color as the text within the HTML document) and you'll be able to input any value you want, but keep it to hex. If you don't know what hex is, you've already told me that Google is your friend so you'll have to look that part up for homework.

The problem with teaching someone how to use CSS is that I don't know, at all what you know. I need to know if you know what hex is, because it's a FUNDAMENTAL part of knowing how to manipulate a CSS document, and this is even before you learn how to make a CSS document in the first place. From there, we have to ensure that you know inheritance and specificity works so you don't confuse your self. Asking someone to teach you how to learn CSS is not a simple task, it's hugly time consuming process. But I think one that should be undertaken, but not just for you. Because your asking a question that I bet a lot of people are asking. I could use this as a way to teach you how to make a CSS file for your host info page, but in doing some provide a blueprint for other people to follow so they can do the same themselves for their host. Because of this, I do hope you know nothing about CSS, Hex, HTML or anything so we can teach the widest possible audience from the basic questions that you ask that needed to be answered so that everyone understands it. So please, do ask the stupid questions (and I mean that in the kindest way) because asking is the only way everyone can learn.

And yes, I am a bit of an arse that need to be kicked every now and again, so thanks.
Honestly, I am impressed. By the exact needed detail of your post (thank you) and also by the attitude (not so oftenly found on the net these days).
Second, I'm gladly accepting your offer 'cause it's not the first time I'm coming face-to-face with CSS, and ussually I don't know how to hide faster.

Coming to facts:

CSS - don't know a single thing about it; no, wait, THE single thing I know is that it has a great power of making your pages look exactly as you imagine, and almost totally independent of the content.
Hex - know what it is and how to find it for any color I would need. Where ? here, for example. Nothing more.
inheritance and specificity - the terms themselves don't tell me much, but from the context I would suspect that you are talking about the hierarchy between diferent elements in the code. A simple analogy would be the rules of parantheses: {[( )]} ?. On th other hand, if I am wrong, would you care to explain the concept only ?
HTML - have some basic idea about it, from interfering when needed to modify some things here and there.

Q1:
What would be the basic structure/parts of a CSS file ?

Q2:
How do you link a CSS to a web page ?

Remarks:
If some of the things would seem obvious to you, still don't hesitate to post as much detail as possible when writing here (your post above is a great example)
If some times you don't feel that an aspect should be explain here, don't hesitate to suggest the use of Google. The ideea would be to use your time to get the most relevant information on our assigned task >> creating the supreme looking server stats page :P.

And last, thank you for the cool idea.
Yeah, I relized that something that is simple to me might be quite complex for someone else. It reminds me of a quote from the 61th episode of Star Trek: The Next Generation, from the Third season, Episode 13 entitled "Déjà Q" where Q says to Geordi LaForge, "Simple. Change the gravitational constant of the universe." expecting Geordi to know how to do that.

Quote from Data :Can you recommend a way to counter the effect?

Quote from Q :Simple. Change the gravitational constant of the universe.

Quote from LaForge :What?

Quote from Q :Change the gravitational constant of the universe, thereby altering the mass of the asteroid.

Quote from LaForge :Redefine gravity. And how am I supposed to do that?

Quote from Q :You just do it! Ow! Where's that doctor anyway?

Quote from Data :Geordi is trying to say that changing the gravitational constant of the universe is beyond our capabilities.

Quote from Q :Oh. Well, in that case, never mind.

----

Quote from luchian :Q1:
What would be the basic structure/parts of a CSS file ?

Q2:
How do you link a CSS to a web page ?
  1. Anatomy of the CSS file.
    The CSS file it's self is just a plain text document, in much the same way that HTML is just a plain text document. The file it's self is not special until you insert data into it. It's most common that a CSS file, CSS by the way stands for Cascading Style Sheet, to end with the extension .css, although that is not required for it to work within your user-agent. The data structure of the CSS file is however special, in a CSS file's most basic form, of selecting one element and altering one property of that element is as follows;
    target {
    property: value;
    }

    This is the simplest CSS file that one can produce, but an important first step in understanding CSS as a whole. Where you see target is where the name of the element you would like to change could go. But it's not limited to just HTML elements, you can also target classes by adding a period before the class name, or ID's by pre-pending a hash (#) before the ID's name that you wish to target. These would look like this.
    html {
    background: #002040;
    }
    .ClassName {
    font-size: 12pt;
    }
    #ID {
    font-size: 12pt;
    }

    But none of this is any good unless we use it on a HTML document, so how do we do that?
  2. Making CSS Work.
    Anyone well formed, by well formed I mean a document that conforms to the standards it's written in, CSS document can be both embedded within a HTML document and linked to it. Now embedding is not what the LFS hosts file does, so we are going to focus on the linked portion of CSS style sheets. Linking a CSS style sheet is as simple as adding a link element to the head of a HTML document, with some special properties.
    <link rel="stylesheet" type="text/css" href="style.css" />

    The first thing you might notice is rel property. Rel is short hand for relationship, meant to tell the user-agent (also known as browser), what this link has to do with the rest of the html file it's reading. The second imporant bit of information it's rel's value, of "stylesheet". This as you might expect, tells the user-agent that this link is the documents style sheet. This can change how the file's prioritization within some user agents that will try to download the style before anything else to that it can display the information to the end user faster. So it's an important first step. The link's type is also spesified as "text/css" telling the user agent that it's a text document that contains css syntax. It should be noted that in HTML5, you can drop this type as long as the rel property is Stylesheet as there is only one language used to markup style within HTML and that is CSS. Last is the href property telling us the "Hypertext REFerence" or simply the location of the linked file. Within a very small HTML5 document that could look like this;
    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML5 & CSS Example 1</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <h1><a href="lfs://host%20name"Host Name</a></h1>
    </body>
    </html>

I'm going to expand on this later, but I have to get ready for a meeting at my Ambulance Corps.
: )) that is for the Star Trek part.
Back to work, it doesn't sound so complicated keeping it to the basics. Ok, understood about the structure of file, and how to link it to the HTML document. The next important thing is:

Q3:
How to identify, in the web page, each "target" I wish to alterate, in order to define custom properties for it and only for it ? (I will explain myself: supposing I want to make the first line appear in black color, the second in red and bold, the third in blue, and so on..)

Q4 (bonus):
Supposing I would convince Victor to modify the href in the HTML doc to point to a CSS file on my own server, any modification I would make after that in the CSS would not require Victor's intervention anymore, right ? Or is it not possible ?
Quote from luchian :Q3:
How to identify, in the web page, each "target" I wish to alterate, in order to define custom properties for it and only for it ? (I will explain myself: supposing I want to make the first line appear in black color, the second in red and bold, the third in blue, and so on..)

Q4 (bonus):
Supposing I would convince Victor to modify the href in the HTML doc to point to a CSS file on my own server, any modification I would make after that in the CSS would not require Victor's intervention anymore, right ? Or is it not possible ?
  • Specific Selection
    When you wish to select a specific target, there is no best way. There are more then one way to go about it too. You can in the case of Victor's HTML markup, select each element you want by it's unquie ID (Mode, Track, Car, Settings, Ect ...) That would allow you to color each line a different color like so;
    #Mode { color: #000000; }
    #Track {color: #FF0000; }
    #Car {color: #00FF00; }
    #Settings {color: #FFFF00; }
    #Version {color: #0000FF; }
    #Conns {color: #FF00FF; }
    #Users {color: 00FFFF; }

    You could change the color of each sub item by;
    #Track .Field1 { color: #FFAA00; }
    #Track .Field2 { color: #AAFF00; }
    #Car .Field1 { color: #00FFAA; }
    #Car .Field2 { color: #00AAFF; }
    // And so on

    You could also make all of the Field1 parts bold in one state like so;
    .Field1 { font-weight: bold; }

  • Good Luck
    I don't think that Victor would be willing to do that, as something on the LFS domain to like to a third part domain might cause a secuirty problem on some older browsers.
Great !
Now I have all I need to be able to personalise the look the way I wish. Once it will be finished, I hope Victor won't mind to place it on lfsworld.
Dygear, a big thank you for your patience and time to share your knowledge with me/us.

Regarding Q4, didn't know about the possible glitch, so I'll drop it.
Glad you got what you needed. I hope that's enough for everyone else also.
After a bit of play with the settings, I made a css closer to what I had in mind. I suspect there might be some redundant lines in it, but the end result looks ok.

Would you mind replacing the initial file with the one in attachment, Victor ? Thank you.

LE: you are right again Dygear. Done
Attached files
luchian.rar - 355 B - 582 views
.Field3 {

}

You can get rid of that one for sure.
Vic, please ?
ah hadn't noticed sooner - it's updated now.
Thank you Vic.
Dygear, could you please take a look ? I probably made a mistake, 'cause the background of the server status "square" (on my page) is different from the main background of the page.

Q5:
If I remove completely the background parameter in the css, will the page automatically get the background of the main site ? (Remark:I was working locally when I made the testing, so didn't had a possibility to test the comportment).

FGED GREDG RDFGDR GSFDG