/css/ - post your custom CSS

/* Body with gay ass gradient background */
body {
background: repeating-linear-gradient(
45deg, #ff00ff, #00ffff 25px, #ffff00 50px, #ff6600 75px
) !important;
color: #00ff00 !important;
animation: textflash 1.5s infinite alternate; /* flashing text */
}

/* Ultragay flashing text keyframes */
@keyframes textflash {
0% { color: #00ff00; }
25% { color: #ff0000; } /* red phase */
50% { color: #0000ff; } /* blue phase */
75% { color: #ffff00; } /* yellow phase */
100% { color: #ff00ff; } /* back to pink */
}

/* Links with big ass underline and color flash */
a {
color: #ff6600 !important;
font-size: 18px !important;
text-decoration: underline wavy red !important;
animation: linkflash 1s infinite alternate; /* flashing links */
}

@keyframes linkflash {
0% { color: #ff6600; }
50% { color: #66ff66; } /* green flash */
100% { color: #0066ff; } /* blue flash */
}

/* Header, sidebar, footer with tilt and flashy gradient */
header, nav, .sidebar, .footer {
background: linear-gradient(135deg, #ffcc00, #ff00ff, #00ffff, #66ff66) !important;
border: 6px dashed #ff00ff !important; /* fun dashed borders */
border-radius: 60px !important;
box-shadow: 0 0 40px #ff00ff, 0 0 60px #00ffff, 0 0 80px #ffff00; /* glowy shadows */
transform: rotate(-3deg); /* slight tilt */
}

/* Buttons, inputs, textarea with spinning/trembling animation */
button, input, textarea {
background: radial-gradient(circle at center, #ffff00, #ff00ff, #00ffff, #ff6600) !important;
color: #000 !important;
border: 4px double #ff0000 !important;
border-radius: 30px !important;
font-size: 22px !important;
animation: btncrazy 0.3s infinite alternate; /* shaking buttons */
}

/* Button shake & rotate keyframes */
@keyframes btncrazy {
0% { transform: rotate(0deg) translate(0px,0px); }
25% { transform: rotate(5deg) translate(2px,-2px); }
50% { transform: rotate(-5deg) translate(-2px,2px); }
75% { transform: rotate(7deg) translate(-3px,-1px); }
100% { transform: rotate(-7deg) translate(3px,1px); }
}

/* Cards/posts with exaggerated tilt and gradients */
.card, .post, .profile-content {
background: linear-gradient(90deg, #ff0, #f0f, #0ff, #ff6600) !important;
border: 4px dotted #00ff00 !important; /* crazy dotted border */
border-radius: 50px !important;
box-shadow: 0 0 50px #ff00ff, 0 0 70px #00ff00, 0 0 90px #00ffff; /* glowies */
transform: rotate(4deg); /* tilt effect */
}

/* Fucking big flashy headers */
h1, h2, h3, h4, h5, h6 {
color: #ff0000 !important;
font-size: 2.2em !important; /* sissy oversized */
text-shadow: 3px 3px #00ff00, -3px -3px #00ffff; /* neon shadow o algol*/
animation: headerflash 1.8s infinite alternate; /* flashing headers */
}

/* Header flash keyframes */
@keyframes headerflash {
0% { color: #ff0000; text-shadow: 3px 3px #00ff00, -3px -3px #00ffff; }
50% { color: #00ff00; text-shadow: 3px 3px #ff00ff, -3px -3px #ffff00; }
100% { color: #0000ff; text-shadow: 3px 3px #ff6600, -3px -3px #66ff66; }
}

/* WARNING: MAY LAG YOUR DEVICE. */

this one changes the booru to reflect the color of your skin

/* = Force page background = */
html,
body,
#page,
#wrapper,
#container,
#outer,
#main,
#content {
background: #2b1f17 !important;
color: #e8dccf !important;
}
/* = Main panels = */
.sidebar,
#sidebar,
.content,
.post,
.post-preview,
.thumb,
.preview,
.comment,
.post-comment,
.tag-list,
#tag-sidebar {
background: #3a2a20 !important;
border-color: #2b1f17 !important;
color: #e8dccf !important;
}
/* = Header / navigation = */
#top,
#navbar,
.header,
.navbar {
background: #4a3426 !important;
color: #f2e6d8 !important;
border-bottom: 1px solid #2b1f17 !important;
}
/* = Links = */
a { color: #d6a66a !important; }
a:visited { color: #b98d58 !important; }
a:hover { color: #f0c98a !important; }
/* = Inputs = */
input,
textarea,
select {
background: #2b1f17 !important;
color: #f0e4d6 !important;
border: 1px solid #5a4030 !important;
}
/* = Buttons = */
button,
input[type="submit"] {
background: #5a4030 !important;
color: #f0e4d6 !important;
border: 1px solid #2b1f17 !important;
}
button:hover,
input[type="submit"]:hover {
background: #6b4b36 !important;
}
/* = Tables = */
table,
tr,
td,
th {
background: #3a2a20 !important;
color: #e8dccf !important;
border-color: #2b1f17 !important;
}
/* = Safety fallback (some sites use weird containers) = */
div {
background-color: inherit;
}

NooseOne↗

this one changes the booru to reflect the color of your skin
/* = Force page background = */
html,
body,
#page,
#wrapper,
#container,
#outer,
#main,
#content {
background: #2b1f17 !important;
color: #e8dccf !important;
}
/* = Main panels = */
.sidebar,
#sidebar,
.content,
.post,
.post-preview,
.thumb,
.preview,
.comment,
.post-comment,
.tag-list,
#tag-sidebar {
background: #3a2a20 !important;
border-color: #2b1f17 !important;
color: #e8dccf !important;
}
/* = Header / navigation = */
#top,
#navbar,
.header,
.navbar {
background: #4a3426 !important;
color: #f2e6d8 !important;
border-bottom: 1px solid #2b1f17 !important;
}
/* = Links = */
a { color: #d6a66a !important; }
a:visited { color: #b98d58 !important; }
a:hover { color: #f0c98a !important; }
/* = Inputs = */
input,
textarea,
select {
background: #2b1f17 !important;
color: #f0e4d6 !important;
border: 1px solid #5a4030 !important;
}
/* = Buttons = */
button,
input[type="submit"] {
background: #5a4030 !important;
color: #f0e4d6 !important;
border: 1px solid #2b1f17 !important;
}
button:hover,
input[type="submit"]:hover {
background: #6b4b36 !important;
}
/* = Tables = */
table,
tr,
td,
th {
background: #3a2a20 !important;
color: #e8dccf !important;
border-color: #2b1f17 !important;
}
/* = Safety fallback (some sites use weird containers) = */
div {
background-color: inherit;
}

this is actually quite nice, using dis

* {
scrollbar-width: thin;
scrollbar-color: #00ff14 transparent;
}
html, :host {
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
line-height: 1.5;
font-family: consolas;
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #00ff14;
position: relative;
}
.bg-card {
background-color: #002400;
}
.bg-card {
border-color: #00ff08;
}
(color:color-mix(in lab,red,red)) {
.bg-muted\/30 {
background-color:
color-mix(in oklab, #17431b 30%, transparent);
}
}
@supports (color:color-mix(in lab,red,red)) {
.border-border\/10 {
border-color:
color-mix(in oklab, #00ff08 30%, transparent);
}
}
.dark {
--color-background: #001200;
--color-foreground: #fafafa;
--color-card: #141414;
--color-card-foreground: #fafafa;
--color-popover: #141414;
--color-popover-foreground: #fafafa;
--color-primary: #4668a0;
--color-primary-foreground: #fafafa;
--color-secondary: #262626;
--color-secondary-foreground: #fafafa;
--color-muted: #262626;
--color-muted-foreground: #a3a3a3;
--color-accent: #4668a0;
--color-accent-foreground: #fafafa;
--color-destructive: #bb2b2b;
--color-destructive-foreground: #fafafa;
--color-border: #262626;
--color-input: #262626;
--color-ring: #4668a0;
}
.bg-primary {
background-color: #008f04;
}
.text-primary {
color: #00ff14;
}
.border-border {
border-color: #00ff14;
}
.bbcode-quote-author {
color: #00ff14;
font-weight: 600;
text-decoration: none;
}
.dark .bbcode-quote {
background-color: #003706;
}
.bbcode-quote-verified {
border-left-color: #00ff14;
}
.dark .bbcode-quote .bbcode-quote {
background-color: #002d01;
}
.bbcode-mention {
color: #00ff08;
font-weight: 500;
text-decoration: none;
}
.bbcode-quote-link {
color: #00ff08;
/* background-color: #008d00; */
padding: .125rem .375rem;
font-size: .9em;
text-decoration: none;
}
i just touched some things to make it look green and glowie-pilled

* {
scrollbar-width: thin;
scrollbar-color: #ff8c00 transparent;
}
html, :host {
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
line-height: 1.5;
font-family: consolas;
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #ff8c00;
position: relative;
}
.bg-card {
background-color: #2a1400;
border-color: #ff7a00;
}
(color:color-mix(in lab,red,red)) {
.bg-muted\/30 {
background-color: color-mix(in oklab, #4a2600 30%, transparent);
}
}
@supports (color:color-mix(in lab,red,red)) {
.border-border\/10 {
border-color: color-mix(in oklab, #ff7a00 30%, transparent);
}
}
.dark {
--color-background: #140800;
--color-foreground: #fafafa;
--color-card: #141414;
--color-card-foreground: #fafafa;
--color-popover: #141414;
--color-popover-foreground: #fafafa;
--color-primary: #ff8c00;
--color-primary-foreground: #fafafa;
--color-secondary: #262626;
--color-secondary-foreground: #fafafa;
--color-muted: #262626;
--color-muted-foreground: #a3a3a3;
--color-accent: #ff8c00;
--color-accent-foreground: #fafafa;
--color-destructive: #bb2b2b;
--color-destructive-foreground: #fafafa;
--color-border: #262626;
--color-input: #262626;
--color-ring: #ff8c00;
}
.bg-primary {
background-color: #cc6e00;
}
.text-primary {
color: #ff8c00;
}
.border-border {
border-color: #ff8c00;
}
.bbcode-quote-author {
color: #ff8c00;
font-weight: 600;
text-decoration: none;
}
.dark .bbcode-quote {
background-color: #3a1d00;
}
.bbcode-quote-verified {
border-left-color: #ff8c00;
}
.dark .bbcode-quote .bbcode-quote {
background-color: #2a1400;
}
.bbcode-mention {
color: #ff7a00;
font-weight: 500;
text-decoration: none;
}
.bbcode-quote-link {
color: #ff7a00;
padding: .125rem .375rem;
font-size: .9em;
text-decoration: none;
}
just the exact same ccs as above but i made everything orange because fuck green

cocoschoppenboer↗

i might sound like a super retard but how do i grab the css the site uses that i can just edit?

F12 inspect element with e.g. firefox and look at what elements are where, then you can modify them by just targeting those elements with the custom css, if you dont know how to just ask chatgipity "how i make div with id 'bla bla bla' turn blue using custom css on a bbcode forum" and it should give you something useful