Adding display text to a text property? - css

Question

I have a style sheet that is used to display server status text and a colored bar (green = good, red = down, yellow = maintenance).
The way I have these set up are:
#status.Normal{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/greenbar.jpg) no-repeat;
}
#status.Down{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/red.jpg) no-repeat;
}
And the way they are used is just by declaring Normal or Down in my server list xml file.
For example, if the site status was normal for a site the xml would read:
<site name="template">
<title>Title</title>
<systemStatus>Normal</systemStatus>
<networkNotes>notes etc</networkNotes>
<maintenanceInformation>
information about maintenance etc.
</maintenanceInformation>
</site>
The HTML where this is used:
<td>
<tr><td id="status"></td></tr>
</td>
The HTML reads from the "status" in the XML and the site would get the "Normal" and the green bar and show those as the status for that server based on the CSS.
Is there a way, with my current setup, to declare a new property in the css (translating to French for French users currently) where I can make the new property (for "Down") as:
#status.EnPanne{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/red.jpg) no-repeat;
}
And have the text display on the red bar be En panne instead of EnPanne?
Basically I'm trying to add a custom text attribute to the EnPanne property so that it displays what I want it to while still using the right property.
Edit:
With the solution posted by jme, I was able to produce these results.
Below is an example of what the English "Down" status will display, above is what I need to do for French display. It appears that the follow-up text is cutting off the "redbar.jpg" and preventing the bar from extending to the other end of the page.
I would assume my two options here are somehow force the redbar over the following text or somehow remove that following text so the bar can fully stretch to the end of the page?
Edit 2:
Here is the portion of the script that connects the XML with the html and CSS - specifically for the system status:
<script> <!--Loads the Status_Pages.xml file-->
var root = null;
$(document).ready(function ()
{
$.get("Status_Page.xml",
function (xml)
{
...
var status=$(root).find("systemStatus").text();
$("td#status").html(status);
$("td#status").attr("class", status);
...
});
});
</script>

Answer 1

How I would do this is to simply set the class attribute and allow your css to add the content, versus adding the status text into the table cell in your ajax call. So, to do this you would remove this line: $("td#status").html(status);
Then in your css you could do this:
#status{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
}
#status.Normal{
background: url(images/greenbar.jpg) no-repeat;
}
#status.EnPanne, #status.Down {
background: url(images/red.jpg) no-repeat;
}
/*Now set your messages*/
#status.EnPanne:before {
content: "Le système est en panne";
}
#status.Normal:before {
content: "Operations Normal";
}
#status.Down:before {
content: "The system is currently down";
}
Here's a fiddle demo.
If you're against the idea of not adding the text into the table cell, here is an example that uses a technique to hide the table cell text while absolutely positioning the content: demo 2. If you want an explanation of this method, let me know.

Answer 2

What about escaping a space?
#status.En\ Panne {...}
And in your XML normally
<systemStatus>En Panne</systemStatus>