Extraits CSS

Bonjourr est personnalisable via son interface de réglages, mais il est possible d’aller encore plus loin. Copiez et collez ces extraits de style dans la section dédiée des paramètres pour débloquer de nouvelles possibilités.

Vous souhaitez proposer votre propre extrait CSS ? Contactez-nous !

Arrière-plans

Arrière-plan portrait

/* shows the full background image with no cropping (black bars), useful if you have a portrait orientation background */
#background-media .background-image {
  background-size: contain!important;
  background-repeat: no-repeat;
  transform: scale(1); /* try 0.9 if you want margins at the top and bottom as well */
}

body {
  /* accepts any hexadecimal color value, like #417781 */
  background-color: black;
}

Arrière-plans transparents (Zen browser)

/* Hides regular backgrounds to make Bonjourr transparent. */
#background-media, #background-color {
  display: none!important;
}

.tabbing {
  background-color: transparent !important;
}

body {
  background-color: transparent !important;
}

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

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

Couleurs et icônes

Ajouter ou modifier des couleurs

:root {
  /* overrides the built-in font color option (only rgb values) */
  --font-color: 60 45 40!important;

  /* for text on blurry elements (notes, searchbar... (only rgb values)) */
  --font-on-blur-color: 60 45 40;

  /* weather & settings icon (any kind of color code) */
  --icon-color: #c26d3b;

  /* the following are mostly just for the settings ⤵️ */
  /* blue accents all over (only rgb values) */
  --accent-color: 234 88 12;

  /* settings toggles (only rgb values) */
  --color-green: 245 158 11;
}

Icônes météo personnalisées

/* overrides the default weather icons */

/* replaces the day clear sky icon */
.weather-icon#weather-day-clearsky {
    /* replace the link with any other direct URL to an image */
    background-image: url("");
}

/* you only need this once for all icons*/
.weather-icon * {
    display: none;
}

Icône	Condition	ID jour	ID nuit
	Nuages fragmentés	weather-day-brokenclouds	weather-night-brokenclouds
	Ciel dégagé	weather-day-clearsky	weather-night-clearsky
	Quelques nuages	weather-day-fewclouds	weather-night-fewclouds
	Pluie légère	weather-day-lightrain	weather-night-lightrain
	Brouillard	weather-day-mist	weather-night-mist
	Ciel couvert	weather-day-overcastclouds	weather-night-overcastclouds
	Pluie	weather-day-rain	weather-night-rain
	Neige	weather-day-snow	weather-night-snow
	Averses ensoleillées	weather-day-sunnyrain
	Orage	weather-day-thunderstorm	weather-night-thunderstorm

Icône de paramètres personnalisée

/* custom settings icon */

#show-settings svg {
  /* replace the link with any other direct URL to an image */
  background-image: url("https://i.imgur.com/n6C8rGA.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#show-settings svg * {
  display: none;
}

Couleurs

Ajouter ou modifier des couleurs

:root {
  /* overrides the built-in font color option (only rgb values) */
  --font-color: 60 45 40!important;

  /* for text on blurry elements (notes, searchbar... (only rgb values)) */
  --font-on-blur-color: 60 45 40;

  /* weather & settings icon (any kind of color code) */
  --icon-color: #c26d3b;

  /* the following are mostly just for the settings ⤵️ */
  /* blue accents all over (only rgb values) */
  --accent-color: 234 88 12;

  /* settings toggles (only rgb values) */
  --color-green: 245 158 11;
}

Liens rapides

Limiter les sites les plus visités

/* Sets a limit to your most visited links (replace 5 with how many links you want) */

.synced .link-list > :nth-child(n+5) {
  display: none;
}

Horloge

J’aime les horloges plus épaisses

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

Barre de recherche

Centrer le texte indicatif de la barre de recherche

/* centers the searchbar placeholder */

#searchbar::placeholder {
    text-align: center;
}

Ajouter un logo à gauche de la barre de recherche

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

Autre

Je ne me soucie pas de la visibilité des 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;
}

Pas de GPU, uniquement 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 peu puissants

/* Disables most settings transitions and animations. */

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

#interface {
  transform: translateX(0) !important;
  transition: none !important;
}