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!

isherwood · Accepted Answer · 2013-03-19 21:33:18Z

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, 2013 at 21:33

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LegacyP7 Over a year ago

Doing this affected all of the returned servers. It is however, what I am looking for. Something similar.

isherwood Over a year ago

I don't understand your comment. Is there still a problem?

LegacyP7 Over a year ago

Yes, there are multiple servers. This changed all of their images, instead of just one.

isherwood Over a year ago

But... that's what you asked for. Maybe you should clarify in your question above exactly what you want.

jeroen · Accepted Answer · 2013-03-22 21:46:44Z

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, 2013 at 21:46

answered Mar 19, 2013 at 21:42

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

5 Comments

LegacyP7 Over a year ago

How should I add ID's to the servers which are listed in an array: pastie.org/private/lscbdr7ol4uyvbl8rcgeta

jeroen Over a year ago

@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.

LegacyP7 Over a year ago

The $stats object is a separate document. Could you elaborate on "all characters are allowed as valid class name characters"?. Thanks.

jeroen Over a year ago

@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: stackoverflow.com/questions/448981/…

jeroen Over a year ago

@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.

suspectus · Accepted Answer · 2013-03-19 21:27:03Z

0

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

answered Mar 19, 2013 at 21:27

suspectus

17.4k8 gold badges56 silver badges63 bronze badges

1 Comment

LegacyP7 Over a year ago

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" );

Collectives™ on Stack Overflow

CSS/PHP - Using Different CSS for each PHP string

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related