¿Comprobando el sitio y decidiendo entonces el estilo CSS?

Question

Mi objetivo es tener una barra similar en la parte superior como aquí: http://www.keltainenporssi.fi/ El color del sitio actual está en rojo, mientras que otros sitios están en negro.

¿Cómo alcanzarías mi objetivo? Tal vez por php?

La sintaxis en pseudocódigo puede ser

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

Answer 1

Enfoque no dinámico:

Puedes usar una regla de CSS para cada sitio, así:

/* 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>

Answer 2

Es común usar un script del lado del servidor como PHP para hacer tal cosa. Por ejemplo:

<?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>';

?>

Esto produciría un resultado como: (formateado para facilitar la lectura)

<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

Puede tener un solo css para la barra que todos los dominios buscarán. Asegúrese de agregar reglas importantes en ese css para que sus reglas no sean anuladas por ninguna otra cosa. De lo contrario, proteja la barra en un " espacio de nombres " agregando un ID en la lista / div o lo que sea que utilices para implementarlo.

Answer 4

Sí, podría asignar la clase del elemento delimitador en función del sitio actual.