Style snippets

Bonjourr is customisable 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.

I don't care about artist exposure

Hides Unsplash photo author credits.

#credit {
    display: none;
}

No more shadows

Removes shadows from interface elements.

* #date::before,
* #weather::before {
    box-shadow: none !important;
}

More shadows

Makes interface texts more readable with shadows

body #interface {
    text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
}

I like my backgrounds fast.

Faster background transition on startup.

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

Makes Quick Links larger.

* #linkblocks_inner {
    transform: scale(1.2);
}

Makes Quick Link lower.

* #interface #linkblocks {
    align-items: center;
}

Hides everything but Quick Links (and centers them).

#interface #time, #interface #main, #interface #sb_container, #interface #quotes_container {
    display: none;
}

#interface #linkblocks {
    flex-grow: unset;
}

Unicolor is the new meta

Makes background a uniform color. Replace 'rebeccapurple' with your color of choice.

* #background {
    opacity: 0;
}
* #background_overlay {
    background-color: rebeccapurple;
}

23 what, carrots?

Adds a C after the temperature.

* #widget p::after {
    content: 'C';
}

I like my clocks thick

Makes analog clock thicker.

* #interface #time #time-container #analogClock #center {
    width: 16px;
    height: 16px;
}
* #interface #time #time-container #analogClock span {
    width: 8px;
    margin-left: -4px;
}
* #interface #time #time-container span#analogSeconds {
    width: 4px;
}
* #interface #time #time-container #analogClock {
    border-width: 8px;
}

Left-aligned interface

Aligns interface to the left instead of center.

#interface #main,
#interface #time,
#interface #sb_container,
#interface #linkblocks {
    margin-left: 23%;
    align-items: flex-start;
}

#interface #main #weather #widget {
    justify-content: flex-start;
}

#interface #main #greetings {
    text-align: left;
}

#interface #sb_container #searchbar {
    margin-left: 0px;
}

#interface #linkblocks #linkblocks_inner {
    justify-content: flex-start;
}

Right-aligned interface

Aligns interface to the right instead of center.

#interface #main,
#interface #time,
#interface #sb_container,
#interface #linkblocks {
    margin-right: 23%;
    align-items: flex-end;
}

#interface #main #weather #widget {
    justify-content: flex-end;
}

#interface #main #greetings {
    text-align: right;
}

#interface #sb_container {
    width: auto;
}

#interface #sb_container #searchbar {
    margin-right: 0px;
}

#interface #linkblocks #linkblocks_inner {
    justify-content: flex-end;
}

Rolex 😎

Makes analog clock look like a Rolex.

* #interface #time #time-container #analogClock, * #interface #time #time-container #analogClock:hover {
    border-width: 1px;
    background-size: cover;
    background-image: url('https://bonjourr.fr/rolex.png')!important;
}

You're breathtaking!

Cyberpunk 2077 inspired colors.

* #w_icon {
    display: none;
}
* #date,
#credit a {
    color: #00d8f3;
}

#interface #main {
    align-items: flex-start;
}

* #clock {
    color: #fdf800;
    text-shadow: 5px 5px #00d8f3;
}

* #greetings,
* #weather_desc {
    text-shadow: none;
    background-color: #fdf800;
    padding: 10px 20px;
    color: black;
}

Want your own style snippet here? Contact us!