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

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 changer quelques 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
Peu de nuages weather-day-fewclouds weather-night-fewclouds
Pluie légère weather-day-lightrain weather-night-lightrain
Brume weather-day-mist weather-night-mist
Nuages couverts weather-day-overcastclouds weather-night-overcastclouds
Pluie weather-day-rain weather-night-rain
Neige weather-day-snow weather-night-snow
Pluie ensoleillée 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 changer quelques 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;
}

Limiter mes 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 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;
}

Barre de recherche

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

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

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