Pamasich, 5 months ago to kbinMeta in Feature Requests/feedback from a Kbin magazines' moderator.

Okay, so I've created a magazine and tested some stuff out.

In the first code I posted, I used the child selector (>) to select <header> elements directly inside <main> elements. For some reason, custom CSS doesn't seem to support the child selector. No matter where I try to use it, the style isn't applied.

The following code worked for me on my magazine:

main header:has(h1[hidden]) {
    height: 300px;
    background-image: url(https://i.imgur.com/wbZa4eI.png);
    background-size: 100% auto;
    background-position-y: -150px;
}

I removed the child selector and instead used :has(hi1[hidden]) to make sure I only get the target element. Without it, it would also replace the background of the individual thread titles.

The image you're trying to use is a bit large, so I've included an example usage of background-size and background-position to change the size of the image and what part of it actually gets displayed.
With background-size, the first value is how wide the image should be, while the latter value is how high. Percentage values are relative to the element's size. So the width and height properties. You can also set absolute values, like I did with height in pixels in this example.

The big issue with this one though is that it'll only apply to the Threads and All Content views. Other views, including Microblog and individual threads, don't have the <header> element I'm looking for here.

I modified it to apply to more views:

h1[hidden] {
    height: 300px;
    background-image: url(https://i.imgur.com/wbZa4eI.png);
    background-size: 100% auto;
    background-position-y: -150px;
    display: block;
    color: transparent;
    user-select: none;
}

The last two lines are there because this actually displays the name of the magazine on the banner. Since that's kind of redundant, since it's already in the bar at the top, I'm hiding the text and making it not selectable.

This one does work in all the views I tested except for when looking at a thread and its comments.

Though, something worth considering in case you intend to just use this code as-is: I just used pixels for simplicity. But the result might look entirely different on other screen resolutions than mine. Here's a list of better units to use if you want it to look the same on all screens. You can use percentages, pixels, and these other units interchangeably anywhere.

---

About the second code I posted, for some reason :before, much like the child selector, doesn't seem to work. I can very much target the #middle and #header elements from custom magazine CSS, but :before doesn't do anything.

I'm not sure why this is. I see no security reason to block them, so I assume it's not intentional. It's a bit hard to debug :before specifically because I don't know any way to get its styles without making it visible. So I have no idea if something is overwriting the style or if the selector just doesn't work, like is the case with the child selector. I'll have to look into this a bit more over the weekend.

hitstun, 10 months ago to random in header test

Not bad. Your #header height is getting overriden by Fedia's .topbar #header height. You'll want to add this CSS to change your .topbar #header height specifically.

.topbar #header {
	height: 8.7rem;
}

atocci, 11 months ago (edited 11 months ago) to AskKbin in Why is no one decorating their magazines?

Edit: Added a comment and updated the option bar to match the navbar.
Sure, here you go! I've never done anything like this before so it's probably a formatting disaster, but I've done my best to clean it a bit and add some comments about what does what here. This is what I've come up with after a few hours of just poking around with the inspect element feature and reading some tutorials:

/* Navbar */
#header {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
position: relative; z-index: 4001
}

/* Page background image */
#middle {
background: url(https://toaru-project.com/railgun_t/core_sys/images/main/common/logo_t.svg) no-repeat center center fixed;
background-size: contain;
}

/* Post box transparency */
.section {
opacity: 0.96;
}

/* kbin footer background */
#footer {
background: linear-gradient(to top right, rgba(229, 0, 32, 1) , rgba(242, 151, 57, 1));
}

/* The little arrow button in the bottom right that takes you back to the top of the page */
#scroll-top {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
}

/* Options bar */
#options {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
position: relative
}

/* upvote color */
.vote .active.vote__up button {
color: rgba(242, 151, 57);
}

/* Media viewer background blur */
.goverlay {
background: rgba(0,0,0,.5);
backdrop-filter: blur(15px);
}

Pamasich, 9 months ago to kbinStyles in Share your CSS and JS snippets here

Several snippets I wrote to customize my experience, which might be useful to others too:

---

When a comment is too long, the content is truncated in height and a bar is shown that expands the comment when pressed. This snippet makes the bar more narrow and also adds some visual feedback when you hover over it.

.subject .more {
    margin-left: 40%;
    width: 30%;
    border-radius: 15px;
    
    &:hover {
        filter: opacity(85%);
    }
}

---

I'm using KES (Kbin Enhancement Script) and it adds this settings button to the rightmost of the header, past the user button. This placement, and the different size of the button, makes it very disorienting for me. This snippet moves the KES button to the left of the user, and makes it look more like the other buttons as well.

#header li {
    &.dropdown:has(a.login) {
        order: 2;
    }

    &#kes-settings #kes-settings-button {
        padding-left: 0px !important;
        padding-right: 0px !important;
        min-width: 0px !important;
    }
}

This snippet requires the :has() selector to function. It's relatively new and only supported out of the box in recent-ish Chromium browser versions, so if you use Firefox check here for how to make it work.

---

When hovering over menu items on kbin, the item being hovered over has the same white line below it as the active item. This snippet makes it visually distinct by changing the shade a bit.

.options >* a:hover, #header a:hover {
    border-bottom-color: hsl(0,0%,70%) !important;
}

---

KES adds an OP label with customizable colors, but it enforces that the label has both a foreground and a background color. This snippet removes the background color.

a.user-inline::after {
    background-color: unset !important;
}

---

KES adds collapsible comments with colored lines. I'm not personally a big fan of the colors, but especially the white line for the first level was bothering me. It just didn't look good to have white on my dark theme. This snippet changes all lines to be gray, matching the theme I'm using. You'll probably have to change the color to match your own theme.

.expando {
    & > .threadLine {
        background-color: hsl(0,0%,40%);
    }
    
    &:hover > .threadLine {
        background-color: hsl(0,0%,60%);
    }
}

---

One more for KES's collapsible comments: when a comment is collapsed, you can click on it to uncollapse it. In the version I have, this does not work in the full width of the comment. The right half of comments isn't clickable and doesn't uncollapse the comment. This snippet changes that so you can click in the full width.

.collapsed-comment {
    grid-template-columns: 20px 20px 1fr !important;
}