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.

Arotrios, 9 months ago to alternative in last post here 4 awhile cuz im tired of being the only 1 posting, not like anyone looks at these anyway. wish others would participate 🤧 edit: this isnt 'reverse psychology'. i was petty & sad at 0 engagement & nearly left this mag. i regret my wording

Offering a bit of support as a fellow mod of a small kbin community and who has built them up from scratch in the past. I've been subbed for a bit and had some suggestions.

First, off - keep going. Your content is what draws potential contributors. It will feel like you're dancing alone for awhile, but you dance beautifully and you've got a lot of support. It takes a while for folks to feel confident enough to contribute, and if there's more content, they'll feel less on the spot when they do submit content.

Secondly, reach out to people on the Fediverse that are posting similar content. Crosspost to your magazine and thank and credit them with an @. If they know they have a supportive community to post in, they'll be more likely to participate.

Third, I'd suggest widening your focus from fashion to include music and art. This helps the visual and atmospheric appeal of your magazine, and integrates well with your fashion content as well as your magazine name. Plus, there are a lot of people, like me, who love the alt-goth culture and would like to post, but look horrible in fishnets.

Along those lines, to personalize your magazine a bit more, there's a trick you can do in your mod settings to get a background image. In the css box in the appearance tab, use the following code:

#middle { background: url(https://[YOUR IMAGE HYPERLINK HERE].jpg) }

Example in action - The 13th Floor

Finally, frequency of posting is key - try to post multiple times a day to keep your feed fresh and your community engaged.

Don't stop - you have an audience and they appreciate what you're doing. The first few months are the hardest, but once it gets rolling (which it will if you keep going), it will be worth it.

minnieo, 10 months ago (edited 10 months ago) to kbinMeta in Kbin is sending " to the browser instead of an actual quote (") in my custom CSS

There is some issues with quotes for some reason in magazine styling. I have had to eliminate them entirely in some cases for it to work. For example, instead of this which would be correct (this changes the mag title font, btw):

section.magazine.section h4 { font-family: "DM Serif Display"; }

I had to eliminate the quotes and use this for it to work:

section.magazine.section h4 { font-family: DM Serif Display; }

And for adding a background image to your mag, instead of this, which would be correct usually:

#middle { background: url('imageURLhere'); }

You must do this in order for it to work:

#middle { background: url(imageURLhere); }

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

minnieo, 11 months ago to kbinStyles in A couple questions about Magazine icons and background URLs.

not sure about if its a wip, but here is some CSS for a background image url for mags:

#middle { background-image: url(INSERT URL HERE); background-repeat: no-repeat; background-size: cover; }

as for icons, idk how to find out the recommended size, but I do know they are rendered at 260ps × 217px

minnieo, 11 months ago to boycottreddit in "Heads-up: Reddit is quietly restoring deleted AND overwritten posts and comments"

i did it through the CSS section of the appearance section of the magazine panel/settings. this will add a basic background with the link you specify:

#middle { background-image: url(INSERT IMAGE URL); background-repeat: no-repeat; background-size: cover; }

i'm currently using this

raltsm4k, 11 months ago to kbinMeta in How do I add a background image (from a url) to my new magazine?

Figured it out, you need to target #middle instead of body for the background to appear :)

raltsm4k, 11 months ago to kbinMeta in How do I add a background image (from a url) to my new magazine?

No worries, you need to include the pound sign before middle. So
#middle { background-image: url('https://imgur.com/9Ns6RVS.png'); background-repeat: no-repeat; background-size: cover; }
should work.

uwu, 11 months ago to kbinStyles in Share your CSS and JS snippets here

I have this in the custom CSS:

#middle { background: url(https://karab.in/build/images/shape2.png); height: 100%; }

.vote .active.vote__up button  {
  color: #ff8f65;
}

.vote .active.vote__down button  {
  color: #9494ff;
}

But only the background works. Is that how you intended or should it be in a #middle or something? The votes are just both still white. Does the site theme override it?