CSS/PHP - Using Different CSS for each PHP string

Question

I posted my original issue a while ago, back here:

CSS/PHP - Overlaying an Image with Hover and If Statements

Since then, I've fixed my main issue, and am now left with one more. The code which returns the server looks like this:

<?php 
  foreach($servers as $server): 

  $stats = \Minecraft\Stats::retrieve(new \Minecraft\Server($server)); 
?>
<center>
  <pre>
    <div class="server">
      <div class="overlay"></div>
      <div class="<?php echo($stats->is_online) ? 'online' : 'offline'; ?>"></div>
      <div class="numbers"><?php printf('%u/%u', $stats->online_players, $stats->max_players); ?></div>         
    </div>
  </pre>
</center>

As you can see, all of these servers are under one CSS "server" class. This is posing problems, as I need each server returned to have different images.

Here is the CSS for the server class:

.server {
    background: url('img/servers/hg.png') center no-repeat;
    width:  330px;
    height: 280px;
    overflow: hidden;
    position: relative;
 }
.server:hover { 
    background: url('img/servers/hg-hover.png') center no-repeat;
 }

How can I select the individual servers, or make a list of CSS to be executed?

Thanks!

score 1 · Answer 1 · answered Mar 19 '13 at 21:33

1

.server:nth-child(1) {
    background: url('img/servers/hg1.png') center no-repeat;
}
.server:nth-child(2) {
    background: url('img/servers/hg2.png') center no-repeat;
}
.server:nth-child(3) {
    background: url('img/servers/hg3.png') center no-repeat;
}
...

answered Mar 19 '13 at 21:33

isherwood

58,414
16
114
157

Doing this affected all of the returned servers. It is however, what I am looking for. Something similar. – LegacyP7 Mar 19 '13 at 21:36
I don't understand your comment. Is there still a problem? – isherwood Mar 19 '13 at 21:42
Yes, there are multiple servers. This changed all of their images, instead of just one. – LegacyP7 Mar 19 '13 at 21:45
But... that's what you asked for. Maybe you should clarify in your question above exactly what you want. – isherwood Mar 19 '13 at 23:47

jeroen · Answer 2 · 2013-03-22T21:46:44.090

1

If you want to add specific css for every server, you can add an extra class:

<div class="server background_image_class_<?php echo $server->ID; ?>">
                                                    ^^^^^^^^^^^^ some variable that uniquely identifies the server.

If you have the images stored in the same database as the server information, you could also use inline css:

<div class="server" style="background-image: url(<?php echo $server->backgroundImage; ?>);">

Edit: You could remove all non-word characters from the server url and use that as a class name:

<div class="server <?php echo  preg_replace("/[^\w]/", "", $server); ?>">

Now you can use the modified server name in your css:

.server {
  // general styles
  background-repeat: no-repeat;
  // etc.
}
.hg1playminezoneco {
  // image background form this specific server
  background-image: url(/path/to/hg1playminezoneco.png);
}
.hg1playminezoneco:hover {
  // image background form this specific server on hover
  background-image: url(/path/to/hg1playminezoneco-hover.png);
}
.pvpplayminezoneco {
  background-image: url(/path/to/pvpplayminezoneco.png);
}
.pvpplayminezoneco:hover {
  background-image: url(/path/to/pvpplayminezoneco-hover.png);
}
// etc.

edited Mar 22 '13 at 21:46

answered Mar 19 '13 at 21:42

jeroen

91,079
21
114
132

How should I add ID's to the servers which are listed in an array: http://pastie.org/private/lscbdr7ol4uyvbl8rcgeta – LegacyP7 Mar 19 '13 at 21:50
@LegacyP7 You would need to make sure that all characters are allowed as valid class name characters. Perhaps it would be easier to pick a (unique) property from the `$stats` object. – jeroen Mar 19 '13 at 22:07
The $stats object is a separate document. Could you elaborate on "all characters are allowed as valid class name characters"?. Thanks. – LegacyP7 Mar 19 '13 at 23:02
@LegacyP7 Well, for example dots are not allowed in class names, so you can't just use the server name as a class name. See here what is allowed: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – jeroen Mar 20 '13 at 00:13
@LegacyP7 I have added an example with classes where all non-word characters are removed from the server url and the result is used as the class name. – jeroen Mar 22 '13 at 21:47

score 0 · Answer 3 · answered Mar 19 '13 at 21:27

0

Remove the image specific CSS, e.g. background from the server class. Assign the specific CSS to the images' ID.

answered Mar 19 '13 at 21:27

suspectus

16,548
8
49
57

The server's aren't ID'd. They are just in an array like this: $servers = array( "hg1.play-minezone.co", "pvp.play-minezone.co", "skywars.play-minezone.co", "dvz.play-minezone.co", "volaxia.play-minezone.co" ); – LegacyP7 Mar 19 '13 at 21:31

CSS/PHP - Using Different CSS for each PHP string

3 Answers3