No.10413
Could you please limit the CSS to only the thread it's celebrating? Sometimes it makes the catalog unreadable and I'd rather not hide a thread that's being celebrated.
No.10414
>>10413I usually do that for the possibly disruptive stuff on /qa/, but /jp/ is supposed to be a bit randomly chaotic and I'd prefer not restricting people (or myself) from messing with it now and then, within reason. I don't like the idea of compartmentalizing CSS within a thread, however, as it's approaching the "condense your threads" 'general' attitude that I greatly loathe. If something really cool happens then all of kissu should be really cool for the day, not the "cool thing happened" thread. To me, ideally, there would be 20 "really cool thing happened" threads and I wouldn't have enough time to customize them all as it engulfs everything. But, back to practicality:
/jp/ antics do bleed into /all/, but people can choose to hide boards or individual threads from it if they desire. Something I never meant to do, but is a cool side effect, is that the Lala theme highlights CSS-enabled posts with yellow text: >>>/jp/38676
I did envision a possible "No Fun" toggle to disable CSS events, but I mostly follow pre-existing CSS guides and don't actually understand how that would work. It'd be up to vern to create it and I don't think it's important enough to spend time on.
I don't suppose you have any saved screenshots from that issue you mention? I usually give stuff 50% opacity to at least lessen the problems like that. I'd rather design things around that then restrict things inside threads. Maybe there's some "disable in catalog view" CSS trick I'm missing
No.10415
Now that I think about it, if I embed the CSS in the bottom reply of a thread it shouldn't appear in catalog mode, but I'm not sure if I want catalog mode to be barren like that
No.10420
>>10418that's pretty nice
No.10421
>>10418I'll add this to my customCSS. I think there are a few things to look out for such as how it looks with the various highlight modes.
No.10424
Is pinning the special thread to the top of the page/catalog not an option?
No.10427
>>10424The CSS-containing threads? Eh, I've tried to refrain from doing any stickies for dumb stuff. I want it to fall off naturally if possible, only to return if someone happens to bump it for whatever reason.
I don't think a sticky would have any benefit when it comes to the code if that's what you meant. CSS loads from top to bottom, in fact.
No.10428
>>10427I mean as in a temporary sticky, for a day.
No.10429
>>10428Yeah, it's definitely something I could do, but I haven't really felt like doing it lately. I think the last time I made one was, hmm... probably Kissu's 3rd or even 2nd birthday? If someone has a great idea for one, though, we could do it
No.10448
>>10447someone once told me they'd use the kissu-ui if it had a Tomorow theme. They made it for our vichan-ui, but I never adapted it over
No.10449
>>10448Hmm, New UI's Luna theme seems really close to it, but I guess it's not exactly the same.
I'm not sure if I can justify adding a slot for that on its own, but if people like very dark themes then I could try to make one with my own twist on things with Tomorrow as the base.
No.10450
>>10449Just an idea. There are some of the standard themes like photon and tomorow which are staples of 4chan's UI.
I'd tend to say no to more dark themes(we have 4 of them), but running the markup on light themes is a bit of a hassle anyways... Maybe more light themes, but I wouldn't object to more dark ones
No.10451
another thing is that I don't like what I did with kissu.css, our only light theme... so there's even room for correcting mistakes...
But these are the very dry themes that aren't very colorful and(perhaps) not very fun
No.10452
>>10451Yeah, I think at least 90% of people prefer simple color themes, but they're so boring to make. Web 2.0 and its white and grey banality is just so depressing to me.
I will definitely take a look at 'kissu', though. I think that wouldn't be much work to improve in a boring manner.
No.10455
I would like to have a good light theme on Kissu though so if you have any thematic ideas it would be nice if it isn't done with dark colors
No.10456
>>10455Yeah, I'm thinking a light theme is a good idea.
>>10453 seems like a good starting point, the sakura thing is pretty popular and there's many, many examples to draw from.
I swear I've seen a similar theme for something in the past couple years that I really liked, but I can't remember what it was for. It might have even just been one of those fancy graphics for someone's doujin song
No.10459
>>10458Ah, and I don't mean the color, but the gradient effect. Is it too distracting, or does it look nice?
No.10462
>>10460Oh, the OP text is a side effect of messing with the OP text color with rainbow background. Definitely not designed with the Lala rainbow text in mind. (which is a weird transparent text + background fill property) It's not something that will be a part of any theme. I'm just asking about the top part of the reply box that's pink, completely in isolation from everything else.
No.10463
>>10461
>the top part of the reply box that's pink
I think it looks best with Hazuki, little less with Kissu, a little distracting/out of place with Luna and Lala, and no pink top for Nekomimi.
>in isolation
I don't know how to judge that. I guess just the top bar itself is nice to look at.
No.10464
yeah. it's an improvement to the purple theme
No.10465
>>10460Yeah, I can't really get behind how out of place the OP color block looks
No.10479
File:03.png (5.23 MB,1624x1427)
... and if you want to change the colours as well then this image should set the mood for what sort of colours to pick
No.10481
>>10480Oh, but if you provide a lot of info like that I could get around to assembling a theme around it. I'd need feedback and ideas from you, though. A good pastel theme sounds nice
No.10482
>>10480Here >>>/jp/39635
>>10481Cool I can be around for feedback and stuff
No.10483
Added! Thanks!
The way I add images to replies is somehow canceling out the reply boxes on Lala theme so that's something I'll need to look at later...
No.10484
>>10483Thanks, kissu is awesome!
No.10537
I think I'll make this thread the place where I credit the artists of the stuff I use.
Rika Background:
https://www.pixiv.net/en/artworks/84544442Rena Reply:
https://mosamosa.at.webry.info/200609/article_2.html (cool that website is still up!)
No.10542
>>10541Nice. I tried to keep some space on the right side so mascots didn't block everything.
I'll list the artists later, but I'm too lazy and tired right now. Uhh, the flanfly artist is named something like Yamato which makes it annoying to track down, but the others are simple. Gotta find those bookmarks...
No.10768
9/9 image is by Coa:
https://www.pixiv.net/en/artworks/98159484I overrode the OP text and text shadow for 9/9 so it should be still be readable on any theme... I hope.
How is your tolerance level on the animated background? It's a copy of stage 2 EoSD, but I don't have the CSS wizardry to tilt it like it is in the game. I already had a headache today so I can't gauge how it makes me feel, but it was fine for me a couple days ago when I tested it and I'm usually sensitive to these things.
No.10769
>>10768Oh, and now I see that it's doing something weird on old UI.
Bleh.
Looking into it...
No.10773
>>10768I'm fine with the animated bg
No.10792
>>10791That's very good, but I could have come up with that! Can you be more specific, do you have an image or color in mind?
No.10795
>>10793>>10794Nice!This stuff is really good and I'm heavily biased towards Mewkledreamy. Yep, I think we'll have this stuff soon. Hmm... maybe next weekend just because the weekend is a nice relaxing time for people with jobs or college and such and we just had Cirno so I don't want to do anything right away.
Yes, yes... this is great. We have a plan!
No.10881
Kuon is breaking my phone(cpu lag)
No.10905
>>10881Oh, I didn't see that post. Umm, hmmm.... It IS a big image, but I don't know how I'd fix that. I can try compressing it with one of those PNG crusher things I suppose.
Are you able to use the Lala theme without issue? Or actually, are you using the vichan UI or the new KissuiUI one?
CSS animations do make the CPU work and I was going to do a non-animation version of Lala theme, but kind of forgot. Oops.
Anyway, going to upload the 3 Fran images and the CSS used for them if people want to do add Fran cursor to always be active (until this /b/ thread dies)
No.10908
Fran cursor CSS. It should work on old Vichan and new Kissu UI
* {
cursor:url(/b/src/1666402680200.png),auto !important;
}
a>img,
input[type=text],
input[type=search],
input[type=url],
input:not([type]),
select {
cursor:url(/b/src/1666402692675.png),auto !important;
}
a, i, .updater {
cursor:url(/b/src/1666402703088.png),auto !important;
}
No.10910
>>10905Yeah, i can use everything else on the site
No.10968
Alright, I want to throw up some simple CSS this weekend! (and also want people to give stuff to do in general at any time)
Give me something to do! You can give me a bunch of things, or just one. Multiple people could have different categories active at once and I think that'd be really fun.
As an example, here's an image of what's active on /secret/:
Options:
Background image - Self explanatory - the image that's in the background.
Reply image - The "background" image in the reply box. You generally want this to be a small image with a transparent background. If it's a simple background, though, I can remove it myself. I can make it so it repeats in an X or Y direction or both, or have it expand in size as the reply box grows larger.
Mascot (an image that sits in lower right, usually a character. Like the reply box image, it really needs a transparent background or a simple one that I can remove semi-automatically.
Mouse Cursor - If you're a bad enough dude to make an image that's 128x128 or less with a pointy thing in the upper left, this one is for you. I used to mess around with cursors back in the old days and could maybe give tips if anyone wants to take the plunge. Note that animated cursors are a real pain to create, as they have to be a series of uploaded images cycled in order. (also apparently a bit CPU heavy for people on toasters)
Name (not pictured) - This one is supposed to be a bit special, but we can also change the 'Anonymous' name into something else, as a whole or specific to a board.
So let's do something!
No.10969
>>10968Is it also an option to customize the reply box you type your reply into?
Could be complicated. There's a header background and a background for each text field and a whole bunch of differently styled buttons.
Maybe I'll learn CSS. I never really got into web programming, you know the classic stuff with the HTML and the text editors and the year 2000.
No.10970
>>10969>Is it also an option to customize the reply box you type your reply into?Yes it is! If you actually enter this thread instead of viewing it through /all/ you'll see that I messed around with the reply box's handle bar thingie just to see if I could.
I guess if people have any requests for permanent options they could ask in this thread, too, or did you want to throw something in there temporarily?
No.10973
>>10970Oh, but it only works on new UI. Old UI's is customizable as well, but it has its own specifications. I could probably dig these all up and label them. I already did it for the new UI for the Lala theme.
No.10974
>>10970No concrete request at the moment, just wanted to know if it could be done.
>If you actually enter this thread instead of viewing it through /all/ sigh stalking my browsing habits
No.10981
gonna put something together
No.10988
>>10983Nice. Just woke up, but I'll get to work on doing this now
No.10998
I just saw a deleted post.
No.10999
>>10996I should have mentioned that I usually give backgrounds reduced opacity so they can work with dark or light CSS.
It doesn't matter really, it's quite possibly the simplest edit you'd ever do
No.11000
Here is the weekend Suite Precure CSS. Put this in your Custom CSS Box under the Style Tab under Options for new UI or CSS Options for Old UI and you can keep it forever*.
Expand for CSS Text
.qr-handle {
color:#ececf8 !important;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1) !important;
background-image: url(/b/src/1668203736473.png) !important;
background-position: top left !important;
}
#lowercontents, .page-details, .main-sections.thread-window {
background-image: url(/b/src/1668204994315.webp);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: right !important;
}
div.post.reply, .reply > .post-contents {
background-image: url(/b/src/1668203769847.webp) !important;
background-position: bottom right !important;
background-repeat: no-repeat !important;
margin-right: 30px;
}
* {
cursor:url(/b/src/1668203749324.png),auto !important;
}
a>img,
input[type=text],
input[type=search],
input[type=url],
input:not([type]),
select {
cursor:url(/b/src/1668204392734.png),auto !important;
}
a, i, .updater {
cursor:url(/b/src/1668203754094.png),auto !important;
}
:root{
--mascot-override: url(/b/src/1668203760482.png);
--mascot-width: 420px;
--mascot-height: auto;
}
.mascot-img {
content: var(--mascot-override) !important;
width: var(--mascot-width) !important;
height: var(--mascot-height) !important;
object-fit: cover;
z-index: -0;
border: 0px solid #0000;
background-repeat: no-repeat;
}
@supports not selector(:read-only) { /* Browsers at palemoon's version need this */
.mascot-img {
background-image: var(--mascot-override);
}
}
*The images are uploaded in this /b/ thread so they should last for years, but not forever.
No.11020
>>11019Hm, yeah, I forgot to do the thing that forces replies to be a certain size so text is never under the image. Or maybe I can learn how to make an animated PNG since I think they can have reduced opacity unlike GIF.
Oh well. It's over now, and doing stuff like this helps me learn.
*cough cough* give me more stuff guys *cough* *cough*
Well, Sachiko's birthday is on the 25th so I'll throw in the usual Sachiko CSS and maybe see if I can add some new stuff.
No.11078
mental note: Kemono Friends debuted on Jan 11th
No.11094
If you want the lackluster 2022 Kissu Birthday CSS active at any time put this in your custom CSS. The background is static on old UI, but animated on new one:
Click to expand
:root{
--mascot-override: url(/test/src/1669937590727.png);
--mascot-width: 300px;
--mascot-height: auto;
}
.mascot-img {
content: var(--mascot-override) !important; /* !important should be used here because we want to remove other people's mascots for our own temporary ones */
width: var(--mascot-width) !important;
height: var(--mascot-height) !important; /* maybe there's a way to remove these two lines...*/
object-fit: cover;
z-index: -0;
border: 0px solid #0000;
background-repeat: no-repeat;
}
@supports not selector(:read-only) { /* Browsers at palemoon's version need this */
.mascot-img {
background-image: var(--mascot-override);
}
}
@keyframes nekomimi {
0% { background-position: 0% 40000%;}
100% { background-position: 40000% 0%;}
}
.page-details, .main-sections.thread-window {
background-image: url(/b/src/1670648159653.webp);
background-repeat: repeat;
animation-timing-function:linear;
background-attachment:fixed;
animation-name: nekomimi;
animation-duration: 40000s;
animation-iteration-count: infinite;
}
#lowercontents {
background-image: url(/b/src/1670648159653.webp);
background-repeat: repeat;
animation-timing-function:linear;
background-attachment:fixed;
background-position: center;
}
* {
cursor:url(/b/src/1670648224169.png) 0 29, auto !important;
}
a>img,
input[type=text],
input[type=search],
input[type=url],
input:not([type]),
select {
cursor:url(/b/src/1670648226761.png) 0 29, auto !important;
}
a, i, .updater {
cursor:url(/b/src/1670648225349.png) 0 29, auto !important;
}
If you don't want the animation on new UI you can also just ctrl + F 'nekomimi' and rename one of them and that will break it
No.11096
>>11095What would be really cool would be if the community contributed some mascots and they were all lined up and scrolling in a slow horizontal way across the bottom of the screen kind of like the
Lala stuff in the
Lala theme.
No.11098
Thanks for reminding me that I'm supposed to be working on an xmas theme thingie.
>>11097Wow, that's really cute and cool! Yeah, thanks. In general I've had terrible luck in getting people to contribute so that's a big help. I think people overestimate how easy it is. I think waiting for people to add things might not work because Christmas is already only two weeks away and it's a theme that loses value the next day.
Hmm... where to put it..
No.11099
Alright, nearing completion and trying to figure out how to use
>>11097 somewhere because it's cute and really needs to be included. I need to find a new way of doing things somewhere...
No.11503
>>11502Linking since it's related, but this isn't a main /b/ thread
No.11625
>>11624Very nice!
Hmm... can you think of any dates associated with her? There's usually some weird Japanese associations with stuff for this kind of thing. "Reimu's name can be be written as banana, and bananas grow on trees, and there's a small town that celebrates trees on April 25th, so April 25th is Reimu Day".
Or maybe some alcohol or oni festival? Not sure...
No.11626
>>11625Hmm... Oktoberfest, maybe?
No.11627
I like Oktoberfest
No.11729
I like turtles
No.11848
>>11847hmmmmmm, Sofi is pretty nice (although I disliked when she became a bit distant to her brother that one time unless I'm misremembering things) so we could do this. I'd need material, though, hmmm....
No.11849
>>11848No wait, she didn't have a brother. But someone she was in a team with, that one boy... Umm... yeah
No.11949
>>11946Ohh, that does seem cool. Too complicated for me to look at now, though
No.12154
File:5.png (141.74 KB,700x700)
5 year birthday background and rotating 5 mascot
@keyframes bday {
0% { background-position: 0% 0%;}
100% { background-position: 50000% 0%;}
}
#lowercontents, .page-details, .main-sections.thread-window {
background-image: url(https://haiji.kissu.moe/test/src/1701401968591.png);
background-repeat: repeat;
animation-timing-function:linear;
background-attachment:fixed;
background-size: cover;
animation-name: bday;
animation-duration: 70000s;
animation-iteration-count: infinite;
}
:root{
--mascot-override: url(/test/src/1701399055382.png);
--mascot-width: 300px;
--mascot-height: auto;
}
@keyframes mascot {
0% {
transform: scale(0.7);
rotate: 0deg;
filter: hue-rotate(0deg);
}
50% {
transform: scale(1.2);
rotate: 40000deg;
filter: hue-rotate(36000deg);
}
transform: scale(0.7);
rotate: 0deg;
filter: hue-rotate(0deg);
}
.mascot-img {
content: var(--mascot-override) !important;
animation-timing-function:linear;
animation-name: mascot;
animation-duration: 10000s;
animation-iteration-count: infinite;
width: var(--mascot-width) !important;
height: var(--mascot-height) !important;
z-index: -0;
border: 0px solid #0000;
background-repeat: repeat;
}
@supports not selector(:read-only) {
.mascot-img {
background-image: var(--mascot-override);
}