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