Verificando o site e decidindo o estilo CSS?

Question

Pretendo ter um bar semelhante no topo como aqui: http://www.keltainenporsi.fi/A cor do site atual está em vermelho, enquanto outros sites estão em preto.

Como você alcançaria meu objetivo? Talvez por PHP?

A sintaxe no código pseudo

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

Answer 1

Abordagem não dinâmica:

Você pode usar uma regra CSS para cada site, assim:

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

É comum usar um script do lado do servidor, como o PHP, para fazer isso. Por exemplo:

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

?>

Isso produziria saída como: (Formatado para legibilidade)

<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

Você pode ter um único CSS para a barra que todos os domínios estarão buscando. Certifique -se de acrescentar! Regras importantes sobre esse CSS para que suas regras não sejam substituídas por mais nada. Caso contrário, proteja a barra em um "namespace" adicionando um ID na lista/div ou o que você usará para implementá -lo.

Answer 4

Sim, você pode atribuir a classe do elemento âncora com base no site atual.