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;
}
Links are too small!
Makes Quick Links larger.
* #linkblocks_inner {
transform: scale(1.2);
}
Links are too high!
Makes Quick Link lower.
* #interface #linkblocks {
align-items: center;
}
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!