Checking site and deciding then CSS style?

Question

I aim to have a similar Bar at the top as here: http://www.keltainenporssi.fi/ The colour of the current site is in red, while other sites are in black.

How would you reach my aim? Perhaps by php?

The syntax in pseudo-code may be

if $site = A
    use-styleA
if $site = B
    use-styleB
else
    use-FinalStyle

Answer 1

You can have a single css for the bar which all the domains will be fetching. Make sure you add !important rules on that css so it's rules are not overriden by anything else. Otherwise shield the bar in a "namespace" by adding an id on the list/div or whatever you'll use to implement it.

Answer 2

It is common to use a server-side script such as PHP to do such a thing. For example:

<?PHP

echo '<ul id="top-nav">';

foreach($page as $pageId => $text) {
    echo '<li';
    if($curPage == $pageId)
        echo ' class="active"';
    echo '>';
    echo '<a href="pages/' . htmlspecialchars($pageId) . '">';
    echo htmlspecialchars($text);
    echo '</a>';
    echo '</li>';
}

echo '</ul>';

?>

This would produce output like: (Formatted for readability)

<ul id="top-nav">
    <li><a href="pages/home">Home</a></li>
    <li class="active"><a href="pages/one">Page one</a></li>
    <li><a href="pages/two">Page two</a></li>
</ul>

Answer 3

Yes, you could assign the anchor element's class based on the current site.

Answer 4

Non-dynamic approach:

You can use a CSS rule for each site, like so:

/* site-one.css */
#top-nav li.site-one a {
    color: red;
}

/* site-two.css */
#top-nav li.site-two a {
    color: red;
}

/* site-three.css */
#top-nav li.site-three a {
    color: red;
}

HTML:

<ul id="top-nav">
    <li class="page-one"><a href="pages/one">Page one</a></li>
    <li class="page-two"><a href="pages/two">Page two</a></li>
    <li class="page-three"><a href="pages/three">Page three</a></li>
</ul>