Personnalisation

Personnalisation CSS de Bookstack

La personnalisation CSS se trouve dans les Préférences > Personnalisation > HTML personnalisé dans l'en-tête.

<script type="module">
    /* Ouvrir les liens dans un nouvel onglet par défaut */
    const links = document.querySelectorAll('.page-content a');
    for (const link of links) {
        link.target = '_blank';
    }
</script>

<style>

/* Cacher le titre des page ayant le tag "Hide Title" */
.tag-name-hidetitle h1#bkmrk-page-title {display: none;}

/* Cacher le titre de la page d'accueil */
body:has(#recently-updated-pages) .page-content h1#bkmrk-page-title {display:none;}

/* Animation de survole des images */
img {
  transition: transform 0.3s ease;
}  
img:hover {
  transform: scale(1.02);
}
  
/* Dissimulation du formulaire d'inscription et de connexion */
#login-form,
#login-form + hr {
  display: none;
}
  
/* Rendre les liens hypertextes bleu */
main div div a {
  color: #4287f5;
}
 
/* Grossissement de la description des livres */
.grid-card-content .text-muted {
  font-size: 0.925em;
}

/* Rendre les infos de mise à jours/création des livres plus discrètes*/
.grid-card-footer {
  color: #cfcfcf !important;
  }

/* Rendre le hover des livres blanc */
.bg-book {
    background-color: #f5f5f5;
}

/* Rendre le hover des étagères blanc */
.bg-bookshelf {
    background-color: #f5f5f5;
}

/* Personnalisation du bouton de login AZURE */
#social-login-azure span{
  display: none;
}
#social-login-azure:after {
  content: 'Connexion avec identifiants [Nom de l\'entreprise]';
}
</style>

Il s'agit ici de légères améliorations graphiques.

Bien évidement tout est possible et vous pouvez totalement changer l'apparence de votre instance Bookstack.