/css/ - post your custom CSS

84 replies·2987 views·

Pinned

Coemskong

Making da soyart ou algo assim

3 months ago#4030(edited 2 months ago)

Post your custom CSS here

Coemskong

Making da soyart ou algo assim

3 months ago#4031

/* 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. */

emerald

As citizens of the global village we must come together as one but apart and build back better.

3 months ago#4032

I am functionally retarded and this feature has zero use to me

Coemskong

Making da soyart ou algo assim

3 months ago#4037

emerald↗
I am functionally retarded and this feature has zero use to me

Don't worry I'm functionally retarded as well kdishwjsksoekejejodkdjeje

Nabbv

🇬🇧

3 months ago#5788

Great Idea

Warrior-Z

Keep Raging On Me / BooruBVLL Since 2023

3 months ago#6484·(edited 2 months ago)

Credit to my mans @Broot , he had the wonderful idea of making a CSS for us oldsois who miss the old Shimmie 2 design of the 'booru.
It has the wonderful old charm to it, and I think it is great for any other oldsoi out there who liked the previous design.
https://files.catbox.moe/nrifge.txt

Updated:
https://files.catbox.moe/ck3qsi.txt

GemersonLakeAndPalmer

3 months ago#6961

Write your reply...

IonHighOnIons

everybody i dont like will b die

3 months ago#8779

GemersonLakeAndPalmer↗
Write your reply...

DO DIS

JimboClittyLeakageArchive

Semper Fidelis

3 months ago#10516

i had a thread like this on general

Coemskong

Making da soyart ou algo assim

3 months ago#11962

JimboClittyLeakageArchive↗
i had a thread like this on general

Projects makes more sense doe

RapeDenDweller1488

raping and killing polaks, ruthlessly editing soywiki

3 months ago#27988

emerald↗
I am functionally retarded and this feature has zero use to me

>I am functionally retarded and this feature has zero use to me

Supreme

Haters Gonna Hate

3 months ago#40333

/* =
SUPREME THEME FOR SOYBOORU PROFILE
= */
/* Import a heavy, condensed font to mimic the Supreme vibe */
@import url('https://fonts.googleapis.com/css2?family=Oswald:ital,wght@1,700&display=swap');
/* Main Body Styling */
body {
background-color: #050505 !important;
background-image: repeating-linear-gradient(45deg, #000 0, #000 20px, #110000 20px, #110000 40px) !important;
color: #ffffff !important;
font-family: 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
/* Supreme Box Logo Styling for Headers */
h1, h2, h3, h4, .user-name, #user-profile h2 {
background-color: #da291c !important; /* Supreme Red */
color: #ffffff !important;
display: inline-block !important;
padding: 6px 16px !important;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
font-style: italic !important;
letter-spacing: -0.5px !important;
box-shadow: 4px 4px 0px #ffffff !important;
border-radius: 2px !important;
margin-bottom: 15px !important;
text-transform: capitalize !important;
}
/* Hyperlinks with striking hover effect */
a {
color: #da291c !important;
text-decoration: none !important;
font-weight: 900 !important;
transition: all 0.2s ease-in-out !important;
}
a:hover {
background-color: #ffffff !important;
color: #000000 !important;
padding: 0 5px !important;
box-shadow: 2px 2px 0px #da291c !important;
}
/* Avatar Styling - Crazy Pulsing Glow */
.avatar, .profile-avatar img, #user-profile img {
border: 5px solid #da291c !important;
border-radius: 0 !important; /* Keep it boxy */
box-shadow: 0 0 20px #da291c !important;
animation: supremePulse 1.5s infinite alternate !important;
filter: contrast(1.2) !important;
}
@keyframes supremePulse {
0% { box-shadow: 0 0 10px #da291c; transform: scale(1); }
100% { box-shadow: 0 0 30px #da291c, 0 0 15px #ffffff; transform: scale(1.02); }
}
/* Profile Containers and Tables */
#content, .box, .profile-box, table, .forum-post {
background-color: rgba(15, 15, 15, 0.95) !important;
border: 3px solid #da291c !important;
box-shadow: 10px 10px 0px rgba(255, 255, 255, 0.1) !important;
padding: 20px !important;
border-radius: 0 !important;
}
/* Table cells */
td, th {
border-bottom: 1px solid #da291c !important;
padding: 8px !important;
}
/* Input Fields and Textareas */
input[type="text"], input[type="password"], textarea {
background-color: #000 !important;
color: #fff !important;
border: 2px solid #555 !important;
padding: 8px !important;
font-family: 'Futura', 'Helvetica Neue', sans-serif !important;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
border: 2px solid #da291c !important;
outline: none !important;
box-shadow: 0 0 8px #da291c !important;
}
/* Buttons - Aggressive Hover Effects */
input[type="submit"], button, .button {
background-color: #da291c !important;
color: #ffffff !important;
border: 2px solid #ffffff !important;
font-family: 'Oswald', sans-serif !important;
font-style: italic !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 10px 20px !important;
cursor: pointer !important;
text-transform: uppercase !important;
transition: 0.2s !important;
}
input[type="submit"]:hover, button:hover, .button:hover {
background-color: #ffffff !important;
color: #da291c !important;
border: 2px solid #da291c !important;
transform: scale(1.1) rotate(-3deg) !important;
box-shadow: 5px 5px 0px #000 !important;
}
/* Glitch effect on hover for the main profile name */
.user-name:hover, #user-profile h2:hover {
animation: supremeGlitch 0.2s infinite !important;
cursor: crosshair;
}
@keyframes supremeGlitch {
0% { transform: translate(0) }
20% { transform: translate(-3px, 3px) }
40% { transform: translate(-3px, -3px) }
60% { transform: translate(3px, 3px) }
80% { transform: translate(3px, -3px) }
100% { transform: translate(0) }
}

cocoschoppenboer

3 months ago#47936

>/* Import a heavy, condensed font to mimic the Supreme vibe */

NooseOne

3 months ago#75748

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

RapeDenDweller1488

raping and killing polaks, ruthlessly editing soywiki

3 months ago#76022

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

Argenmutt

Dogtoes

2 months ago#170960

* {
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

cocoschoppenboer

2 months ago#184329

* {
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

2 months ago#198607

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

Sucre

https://soylentsource.soyjak.st/

2 months ago#209719

counter strike source

muscular_engineer

Inventor of the Mineral Inspecteur Soyjak

2 months ago#224869

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