Style snippets

Bonjourr is customizable through its settings interface, but there are many more things you can do! Copy and paste those style snippets in their dedicated section of the settings to unlock some new possibilities.

Want your own style snippet here? Contact us!

Backgrounds

Portrait background

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

Transparent backgrounds (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;
}

Colors and icons

Add or change some colors

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

Custom weather icons

/* 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;
}
Icon Condition Day ID Night ID
Broken clouds weather-day-brokenclouds weather-night-brokenclouds
Clear sky weather-day-clearsky weather-night-clearsky
Few clouds weather-day-fewclouds weather-night-fewclouds
Light rain weather-day-lightrain weather-night-lightrain
Mist weather-day-mist weather-night-mist
Overcast clouds weather-day-overcastclouds weather-night-overcastclouds
Rain weather-day-rain weather-night-rain
Snow weather-day-snow weather-night-snow
Sunny rain weather-day-sunnyrain
Thunderstorm weather-day-thunderstorm weather-night-thunderstorm

Custom settings icon

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

Colors

Add or change some colors

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

Limit my most visited

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

Clock

I like my clocks thick

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

Search bar

/* 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;
}
Submitted by Kim Visnes

Other

I don't care about artist exposure

/* Hides photo author credits. */


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


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

No GPU, only 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;
}

For laggy computers

/* Disables most settings transitions and animations. */


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


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