Why is no one using CSS to make their magazine’s visual appearances more unique? That was the main draw of old Reddit for me.

(I mean I am, but that is why I asked)

    • joobeejoo47@kbin.social
      0·
      1 year ago

      Can you share your code for that? It looks really good! If you’re okay with it, I’d like to copy it and tweak a bit for my own magazine.

      • atocci@kbin.social
        1·
        1 year ago

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

  • wjrii@kbin.social
    0·
    1 year ago

    So you’d need mods who (1) came over, (2) believe in the platform, (3) believe in the instance, (4) want to do custom CSS, (5) know how to do custom CSS, (6) are willing to put for the effort for a readership that’s still fairly small, and (7) feel that the odds of a change that will break their CSS are low.

    That’s a tall stack of filters, and you may not have a lot of company yet on the other side of it. /m/neverwinternights looks really nice, though. Well done!

  • wahming@kbin.social
    0·
    1 year ago

    I’m the type to tick the ‘Ignore custom css’ checkbox, so obviously not everybody’s interested in that feature.