Améliorer le rendu visuel des onglets Drupal par défaut

Même s’ils sont efficaces dans leur utilisation, les onglets par défaut du thème de base Drupal ne sont pas des plus jolis. Voici quelques propriétés CSS de base pour améliorer facilement leur rendu tout en ne chamboulant pas leur disposition sur la page.

ul.tabs {
  border: none;
  padding: 0;
}

ul.tabs.primary {
  margin: 0 0 30px;
}

ul.tabs.secondary {
  margin: -15px 0 30px;
}

ul.tabs li a {
  background: #f6f6f6;
  border: none;
  color: #000;
  padding: 5px 10px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  text-decoration: none;
}

ul.tabs li a:hover,
.user .user-reviews .item-list a:hover {
  background: #3f3b3c;
  color: #fff;
}

ul.tabs li a.active,
ul.tabs li.active a {
  background: #0c76ab;
  color: #fff;
  border: none;
}

ul.links li {
  list-style: none;
}

ul.secondary li {
  padding: 0;
  margin-right: 5px;
  border: none;
}

ul.secondary li a {
  padding: 3px 10px;
}

 

Pour rappel, les onglet de base de Drupal, c’est ça :

Après application du CSS, le rendu est tout de même plus satisfaisant :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *