The KC Forum JanluUI Dark Mode

Any discussion that doesn't fit into any of the other categories goes here.
Post Reply
User avatar
JanluOfficial
Posts: 9
Joined: Tue Dec 27, 2022 11:12 pm

The KC Forum JanluUI Dark Mode

Post by JanluOfficial »

The KC Forum JanluUI Dark Mode
This is a custom CSS made for the KC Forums, inspired by my own JanluUI. Specifically JanluUI 2023, as it's still WIP but already finished enough for this. It's currently only optimized for the Home Page, with all the other pages comming soon.

Here's the CSS Code:

Code: Select all

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

html {
    font-family: "Nunito";
}

body#phpbb.notouch.section-index.ltr.hasjs {
    background-color: rgba(17,17,17,1)
}

button {
    background: rgba(34,34,34,1);
    border-radius: 20px;

    padding: 10px 20px;
    font-family: "Nunito";
    font-size: 15px;
}

.forabg {
    background: rgba(34,34,34,1)
}

.wrap {
    border: 0px solid rgba(0,0,0,0);
    box-shadow: none;
    border-radius: 16px;
    background-color: rgba(24,24,24,1);
}

div.headerbar {
    background-color: rgba(22,28,76,1);
    background-image: linear-gradient(to bottom, rgba(35,42,120,1) 0%, rgba(30,37,100,1) 1%, rgba(35,42,120,1) 20%, rgba(40,48,140,1) 75%, rgba(50, 60, 160, 1) 100%);
}

div.navbar {
    background: rgba(34,34,34,1)
}

span {
    color: rgba(0,192,255,1);
}

li.row {
    background-color: rgba(51,51,51,1);
}

ul.topiclist li {
    color: rgba(175,175,175,1);
}

a.forumtitle {
    color: rgba(0,192,255,1);
    font-family: "Nunito";
}

.icon {
    color: rgba(0,192,255,1);
}

p {
    color: rgba(175,175,175,1);
    font-family: "Nunito";
}

h3 {
    font-family: "Nunito";
    font-size: 16px;
    border-bottom-color: rgba(0,0,0,0);
    color: white;
}

a {
    color: white;
}

.dropdown-contents.dropdown-nonscroll {
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(45px);
}
Dance Dance Dance Dance Dance Dance Dance Dance Dance Dance
User avatar
JanluOfficial
Posts: 9
Joined: Tue Dec 27, 2022 11:12 pm

Re: The KC Forum JanluUI Dark Mode

Post by JanluOfficial »

This is a very early version, more comming soon
User avatar
MattKC
Site Admin
Posts: 323
Joined: Mon Aug 22, 2022 1:05 am
Contact:

Re: The KC Forum JanluUI Dark Mode

Post by MattKC »

Ooh this is interesting, though I should mention I don't think the forum should have more than a handful of forum styles. Since I've manually customized these styles to get some specific features working, it could quickly become a maintenance nightmare if there are too many.

That being said, I'm interested in improvements if there are any to be made. Do you have any screenshots of what this looks like so far?
User avatar
JanluOfficial
Posts: 9
Joined: Tue Dec 27, 2022 11:12 pm

Re: The KC Forum JanluUI Dark Mode

Post by JanluOfficial »

MattKC wrote: Wed Dec 28, 2022 12:49 am Ooh this is interesting, though I should mention I don't think the forum should have more than a handful of forum styles. Since I've manually customized these styles to get some specific features working, it could quickly become a maintenance nightmare if there are too many.

That being said, I'm interested in improvements if there are any to be made. Do you have any screenshots of what this looks like so far?
I'm currently makiing things up as I go, aswell as making things consistent and work as I go aswell. I have a few of the UI Elements made in FIgma, which include the Button, Input and List Box. I can provide the screenshot of what the figma UI elements look like aswell as what the current development status is.

Figma:
Image

Development Status which is basically Alpha 0.0000001
Image

It's really difficult overwriting all css properties to make it look like how I want it to, and the shadow/glow on the side is not supposed to be there, but broke due to something with the box-shadow property...

An Inspiration for JanluUI 2023 is my EarthOS Concept, which I've been working on for a large part of 2022.
Image

The blur is represented in the dropdown element, and glow (which is also a part of the concept) will be present in UI elements once I get around to it.

Can't really show more right now sadly.
User avatar
acidiclight
Posts: 88
Joined: Tue Dec 27, 2022 10:53 pm
Location: MeteoTech Premises
Contact:

Re: The KC Forum JanluUI Dark Mode

Post by acidiclight »

Oh my god I should hire you to design the UI for my hacking game...
acidic light

I'm a blind game developer. I write code because it's fun.
User avatar
JanluOfficial
Posts: 9
Joined: Tue Dec 27, 2022 11:12 pm

Re: The KC Forum JanluUI Dark Mode

Post by JanluOfficial »

acidiclight wrote: Wed Dec 28, 2022 4:22 am Oh my god I should hire you to design the UI for my hacking game...
I'd be more then happy to help...
User avatar
JanluOfficial
Posts: 9
Joined: Tue Dec 27, 2022 11:12 pm

Re: The KC Forum JanluUI Dark Mode

Post by JanluOfficial »

I am currently running into issues with the tool that I'm using for applying the custom CSS. Development may or may not be haulted until I fix this

Edit: Ive gotten it working again
Post Reply