Extraits de style

Bonjourr est personnalisable via son interface de paramètres, mais il y a encore plein de choses que vous pouvez faire ! Copiez-collez ces extraits de style dans la section dédiée des paramètres pour débloquer de nouvelles possibilités.

Vous voulez voir votre propre extrait de style ici ? Contactez-nous !

Arrière-plans

Je veux que mes arrière-plans soient rapides.

/* Faster background transition on startup */


#background_overlay {
  transition: transform 0.2s, opacity 0s;
}

L’uni, c’est la nouvelle tendance

/* Makes background a uniform color. */
/* Replace '#CC7722' with your color of choice. */


#background_overlay {
  background-color: #cc7722;
}


#background,
#background-bis {
  display: none;
}

Horloge

Voir AM & PM en même temps

[data-ampm="pm"] .digital-am,
[data-ampm="am"] .digital-pm {
  display: inline;
  opacity: .2
}


[data-ampm] .digital-ampm {
  display: inline-flex;
  flex-direction: column;
}

J’aime les horloges bien larges

/* Change analog clock width */


#interface {
  /* Change size here */
  --anlg-w: 6px;
}


.analog .analog-center {
  width: calc(var(--anlg-w) * 4);
  height: calc(var(--anlg-w) * 4);
}


.analog {
  border-width: calc(var(--anlg-w) * 2);
}


.analog span {
  width: calc(var(--anlg-w) * 2);
  margin-left: calc(var(--anlg-w) * -1);
}


.analog .analog-seconds {
  width: var(--anlg-w);
}

Rolex 😎

/* Rolex 😎 */


.analog-face,
.analog-face:hover {
  border-radius: 100%;
  border-width: 1px;
  background-size: cover;
  background-image: url('https://bonjourr.fr/misc/rolex.png') !important;
}

Salutations

Je veux mon propre message de bienvenue

/* Sets a custom greeting phrase */


#interface #greetings:before {
  content: 'Your custom greeting';
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: none;
}


#interface #greetings {
  visibility: hidden;
  position: relative;
}

Polices

Je veux que mes textes soient noirs (ou une autre couleur 😯)

/* Changes font color. */
/* "black" can be any CSS-safe color or hexadecimal code. */


#linkblocks span,
#interface,
#credit,
#credit a {
  color: black;
}

Et l’horloge aussi, en noir

.analog {
  border-color: black;
}


.analog .analog-center,
.analog span {
  background-color: black;
}

Autres

Je me fiche des crédits aux artistes

/* Hides photo author credits. */


#credit {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s, visibility 0.4s;
}


#credit-container:hover #credit {
  visibility: visible;
  opacity: 1;
}

23 quoi, des carottes ?

/* Adds a C after the temperature. */


#current::after,
#tempContainer p::after {
  content: 'C';
}

Pas de GPU, que du CPU 😠

/* This disables graphics intensive "backdrop-filter" style property on some elements. */


#bookmarks_container,
#bookmarks,
#element-mover,
.move-overlay {
  backdrop-filter: none !important;
}


#editlink,
#bookmarks,
#element-mover {
  background-color: #f2f2f7;
}


body.dark #editlink,
body.dark #bookmarks,
body.dark #element-mover,
body.autodark #editlink,
body.autodark #bookmarks,
body.autodark #element-mover {
  background-color: #222;
}

Pour les ordinateurs lents

/* Disables most settings transitions and animations. */


#settings .as,
#settings,
.move-overlay {
  transition: none;
}


#interface {
  transform: translateX(0) !important;
  transition: none !important;
}
/* centers the searchbar placeholder */


#searchbar::placeholder {
    text-align: center;
}
/* adds logo to the searchbar */


#searchbar {
  /* use any direct link to an image you want */
  background: url('https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg') no-repeat 10px center;
  /* you might need to play around with the two following values to get to a fitting result */
  background-size: 20px;
  padding-left: 40px;
}


#searchbar::placeholder {
  color: white;
  opacity: 0.7;
}
Proposé par Kim Visnes