This css will transform the look of your magazine to be glassy-like!

Demo

Usage

  • To be used by magazine owners to style their magazines. Add the CSS to Appearance > CSS.
  • Modify the background: url() to use any image you want. Do not use quotation marks in the custom CSS -> This is currently broken.

Notes

  • Doesn’t play well with light themes (you could add specific styling to solve this)
  • Expect some funkiness, the property backdrop-filter does weird things to layers/z-index for some reason. <del>This is the reason why the options bar appears to not have that glassy look. The dropdown menu’s would get rendered under other surrounding elements.</del> Fixed in v1.1
  • Have fun !

CSS

body::before {
  height: 100%;
  background: url(https://user-images.githubusercontent.com/20504972/245808671-5382aab6-d16b-4e9a-8536-f79ef0f9f7fd.jpg);
  background-position-x: center;
  background-position-y: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  filter: opacity(.5);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: url();
}
#content,
#footer,
#options,
#sidebar {
  position: relative
}
#middle {
  background: transparent
}
#middle .kbin-container {
  margin-top: 0!important;
  padding-top: .5rem
}
#comment-add.section,
#footer,
#header .kbin-container,
#options,
#sidebar .options,
#sidebar .section,
.badge-add,
.ban-add,
.comments .section,
.entry.section,
.moderator-add,
.page-entry-create .section,
.page-magazine-panel .section,
.page-people .users .section,
.page-post-front .options:not(#main .options),
.page-post-front .section,
.section--muted,
.section.theme {
  -webkit-backdrop-filter: blur(20px) brightness(1.25);
  backdrop-filter: blur(20px) brightness(1.25)
}
#header {
  background-color: transparent
}
#header .kbin-container {
  border-radius: 0 0 .5rem .5rem;
  background-color: hsla(0,0%,100%,.07)
}
#footer,
.magazine.section,
.options,
.page-magazine-panel .section,
.section:not(.section.users) {
  background-color: hsla(0,0%,100%,.05)
}
#comment-add.section,
#content .section:not(.page-people #content .section),
#sidebar .section,
.comments .section,
.entry--single,
.magazine.section,
.options--top,
.page-entry-front #settings,
.page-magazine-stats #content,
.page-magazine-theme #content,
.section--top,
.section-top,
.users .section {
  border: 1px solid hsla(0,0%,100%,.2)!important
}

Changelog

<ins> v1.0 - 2023-06-15 </ins>

  • Release

<ins> v1.1 - 2023-07-08 </ins>

  • Sidebar sections added to border styling.
  • Top options is now correctly styled.
  • Background of middle section is now set to be transparent, a fix for last kbin update.