[Return] [Bottom]

This thread is too old to recieve replies

Want your banner here? Click here to submit yours!

File: image.png
[Animated PNG](165 KB, 1004x645) ▶
168960
current stylesheets are good because u can feed a few to chatgpt so it learns the structure, describe what you want to have and have it create a new stylesheet in 10 seconds
Marked for deletion (Old)
>>
I nevar even thought of that
>>
>>144985
I still cherish my own custom made css so there is no need to change it showing post numbers, hiding posts, and filters for specific needs were good features but they came very late
>>
I had to tweak this one a little - and it's still not perfect - but here's an "early 2000s deviantART" style that ChatGPT-san generated based off a screencap I fed it

/* deviantart-retro.css */

:root {
--color-bg-main: #9da89d;
--color-fg-main: #000000;
--color-fg-link: #374646;
--color-fg-link-hover: #ebeee6;
--color-bg-boardlist: #7f887f;
--color-fg-boardlist: #ffffff;
--color-bg-theading: #7f887f;
--color-bg-theading2: #98a398;
--color-bg-theading3: #b0bcb0;
--color-bg-postblock: #7f887f;
--color-fg-title: #000000;
--color-fg-name: #000000;
--color-fg-warning: #cc0000;
--color-fg-warning-ip: #cc0000;
--color-fg-quote: #7a7a7a;
--color-fg-quote2: #aaaaaa;
--color-bg-reply: #b9c4b9;
--color-bg-reply-hl: #e0e8e0;
--color-hi-contrast-border: #3a3a3a;
--color-lo-contrast-border: #666666;
--color-fg-logo: #000000;
--color-fg-global-message: #000080;
--color-bg-window-item-highlight: #dfe7df;
--color-bg-postlists-header: #7f887f;
--color-fg-postlists-header: #ffffff;
--color-fg-postlists-header-link: #ffffcc;
--color-bg-postlists-odd: #c0ccc0;
--color-bg-postlists-even: #d8e2d8;
--color-fg-quotelink: var(--color-fg-link);
--color-fg-quotelink-hover: var(--color-fg-link-hover);
--color-border-button: #000000;
--color-bg-code: #c0ccc0;
--color-fg-code: #000000;
--color-bg-flashboard-even: #c0ccc0;
--font-family-main: sans-serif;
--font-size-main: 0.875em;
}

:root {
--color-bg-postblock: #7f887f;
--color-bg-theading: #6d766d;
--color-bg-theading2: #808a80;
--color-bg-theading3: #aab3aa;
--color-hi-contrast-border: #3a3a3a;
--color-lo-contrast-border: #666666;
}

/* Metallic beveled panels */
.theading, .theading2, .theading3,
.neomenuTopLevel, .detailsbox, .postblock, .reply, .window {
border: 1px solid #3a3a3a;
background: linear-gradient(to bottom, #b5beb5 0%, #949f94 100%);
box-shadow: inset 0 1px 0 #d0d9d0, inset 0 -1px 2px #5f675f;
}

/* Panel sections (content boxes) */
.detailsboxContent, .centerBlock, .catComment {
background: #d7dfd7;
border: 1px solid #6f776f;
box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px #aaa;
}

/* Button styling */
button {
background: linear-gradient(to bottom, #e2eae2 0%, #c0c8c0 100%);
border: 2px outset #888;
color: #000;
font-size: 0.875em;
padding: 2px 6px;
font-family: Tahoma, sans-serif;
box-shadow: inset 2px 1px 0 #fff, inset -1px -1px 1px #666;
}

button:hover {
background: linear-gradient(to bottom, #f0faf0 0%, #d6ded6 100%);
border: 1px inset #666;
cursor: pointer;
}

/* Inputs */
input[type="text"], input[type="password"], textarea, select {
background: #e0e8e0;
border: 1px solid #5f675f;
padding: 2px;
font-family: Tahoma, sans-serif;
font-size: 0.875em;
box-shadow: inset -1px -1px 2px #fff, inset 1px 1px 2px #aaa;
}

/* Scrollbar styling (WebKit only fallback for legacy vibes) */
body::-webkit-scrollbar {
width: 14px;
}
body::-webkit-scrollbar-track {
background: #c4ccc4;
border-left: 1px solid #6f776f;
}
body::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #9ba39b, #7f877f);
border: 1px solid #4a524a;
box-shadow: inset 1px 1px 1px #fff;
}

/* Links */
a {
text-decoration: underline;
color: #0022aa;
}
a:hover {
color: #ff6600;
}

/* Logo style */
.logo {
/*font-family: 'Impact', 'Arial Black', sans-serif;*/
font-size: 1.5em;
text-shadow: 0px 0px 3px #fff
color: #5c5f5d;
}

/* Deviation grid thumbnail placeholders */
#catalogTable .thread {
background: #e0e8e0;
border: 2px inset #7f887f;
box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 1px #777;
}

/* Text shadow for headings */
/*h1, h2, h3, h4 {
text-shadow: 1px 1px 0 #fff;
font-family: Verdana, sans-serif;
}*/

/* Devpacks, software, forum tabs mimic */
.neomenuTopLevel h2 {
background: linear-gradient(to bottom, #b5beb5, #8f988f);
border-bottom: 1px solid #4a524a;
padding: 4px;
color: #000;
}

/* Soft grid container shadow */
#catalogTable, .postlists {
box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}
>>
File: deviantart css.png
[Animated PNG](290 KB, 1076x1275) ▶
296960
4got my screencap
>>
Heyuri should hold a css contest and whoever makes the coolest one gets added to the list of official presets.
>>
>>145000
holy shit, that one kicks ass
>>
OP one just in case, was supposed to look liek 90s Windows UIs

@charset "UTF-8";
/* classic-windows.css */
/************************ Global **************************************/

:root {
/* Global */
--font-family-main: 'Courier New', monospace;
--font-size-main: 11pt;
--color-bg-main: #eaeaea;
--color-bg-main-gradient: #c8c8d8;
--color-fg-main: #333366;
--color-fg-link: #004488;
--color-fg-link-hover: #cc0044;
--color-lo-contrast-border: #cccccc;
--color-hi-contrast-border: #9999aa;
--color-x-hi-contrast-border: #444466;
--color-border-button: #8888aa;
/* Navigation/admin bar */
--color-bg-boardlist: #d0d0e0;
--color-fg-boardlist: #334466;
/* Board header */
--color-fg-logo: #222255;
--color-bg-theading: #b0b0c0;
--color-bg-theading2: #a0a0c0;
--color-bg-theading3: #d0d0e0;
--color-fg-theading: #202040;
/* Post form */
--color-bg-postblock: #dcdcf0;
--color-border-input: #8080a0;
--color-fg-global-message: var(--color-fg-warning);
/* Posts/replies */
--color-bg-reply: #f3f3f8;
--color-bg-reply-hl: #e2e2f0;
--color-fg-title: #aa0055;
--color-fg-name: #006666;
--color-fg-warning: #aa0000;
--color-fg-warning-ip: #000088;
--color-fg-omitted: #888888;
/* Post formatting */
--color-fg-quotelink: #006699;
--color-fg-quotelink-hover: var(--color-fg-link-hover);
--color-fg-quote: #336600;
--color-fg-quote2: #aa66aa;
--color-bg-spoiler: #dddddd;
--color-bg-code: #ffffff;
--color-fg-code: #222222;
/* Administrator mode */
--color-bg-postlists-header: #ccccdd;
--color-fg-postlists-header: #000000;
--color-fg-postlists-header-link: #3333aa;
--color-bg-postlists-odd: #f0f0f5;
--color-bg-postlists-even: #e8e8ef;
/* File board/flash board */
--color-bg-flashboard-even: #e6e6f0;
/* Windows */
--color-bg-window-item-highlight: #ccccee;
}

body {
background-image: linear-gradient(to bottom, var(--color-bg-main-gradient), var(--color-bg-main) 500px);
background-size: 100% 500px;
background-repeat: repeat-x;
color: var(--color-fg-main);
font-family: var(--font-family-main);
font-size: var(--font-size-main);
}

a,
a:link,
a:visited {
color: var(--color-fg-link);
text-decoration: underline;
}

a:hover {
color: var(--color-fg-link-hover);
}

hr {
border: none;
border-top: 2px dashed var(--color-hi-contrast-border);
}

textarea,
input:not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="file"]) {
border: 1px inset var(--color-border-button);
background-color: var(--color-bg-code);
color: var(--color-fg-code);
}

textarea:focus,
input:focus {
outline: 2px dotted var(--color-fg-link);
outline-offset: 1px;
}

button,
input,
textarea,
select,
pre {
font-size: 0.909091em;
font-family: var(--font-family-main);
}

button,
select,
input[type="button"],
input[type="submit"],
input[type="reset"],
input::file-selector-button {
border-radius: 0;
border: 2px outset var(--color-border-button);
background-color: #e0e0f0;
color: var(--color-fg-main);
}

/************************ Mobile **************************************/

@media screen and (max-width: 650px) {
body {
font-size: 12pt;
}
.rules {
font-size: var(--font-size-x-small);
}
}


>Heyuri should hold a css contest and whoever makes the coolest one gets added to the list of official presets.
We've done that b4 but picking just one could be hard, and I don't think having over 9000 "official" ones is a good idea - maybe there should be a way that anyone can contribute to a hueg list of "user-made CSSes" instead
>>
>was supposed to look liek 90s Windows UIs
It did a pretty poor job in that case - I'll try to handcode something better
>>
>It did a pretty poor job in that case
it did seem somewhat nostalgic to me, but I was too shota then to remember well
>>
File: win95 css.png
[Animated PNG](182 KB, 1077x1274) ▶
186368
It's a bit of a mess and far from perfect, but here's what I've got so far for a Win95 style:
@charset "UTF-8";
/* windows-95.css */

:root {
/* Global */
--font-family-main: "MS Sans Serif", sans-serif;
--font-size-main: 10pt;
--font-size-small: 0.9em;
--color-bg-main: #008080;
--color-bg-main-gradient: #006060;
--color-fg-main: #ffffff;
--color-fg-link: #000080;
--color-fg-link-hover: #000080;
--color-lo-contrast-border: #cccccc;
--color-hi-contrast-border: #9999aa;
--color-x-hi-contrast-border: #000000;
--color-border-button: #c0c0c0;
/* Navigation/admin bar */
--color-bg-boardlist: var(--color-bg-reply);
--color-fg-boardlist: #000000;
/* Board header */
--color-fg-logo: #ffffff;
--color-bg-theading: #000080;
--color-bg-theading2: #000080;
--color-bg-theading3: #000080;
--color-fg-theading: #ffffff;
/* Post form */
--color-bg-postblock: #000080;
--color-border-input: #8080a0;
--color-fg-global-message: var(--color-fg-warning);
/* Posts/replies */
--color-bg-reply: #c0c0c0;
--color-bg-reply-hl: #e2e2f0;
--color-fg-title: #ffffff;
--color-fg-name: #ffffff;
--color-fg-warning: #ff0000;
--color-fg-warning-ip: #000080;
--color-fg-omitted: #ffffff;
/* Post formatting */
--color-fg-quotelink: var(--color-fg-link);
--color-fg-quotelink-hover: var(--color-fg-link-hover);
--color-fg-quote: #008040;
--color-fg-quote2: #800080;
--color-bg-spoiler: #000000;
--color-bg-code: #ffffff;
--color-fg-code: #000000;
/* Administrator mode */
--color-bg-postlists-header: #000080;
--color-fg-postlists-header: #ffffff;
--color-fg-postlists-header-link: #ffff00;
--color-bg-postlists-odd: #c0c0c0;
--color-bg-postlists-even: #c0c0c0;
/* File board/flash board */
--color-bg-flashboard-even: #c0c0c0;
/* Windows */
--color-bg-window-item-highlight: #000080;
}

hr {
border-color: #000000d0 #ffffff40 #ffffff40 #000000d0;
}

button,
select,
input[type="button"],
input[type="submit"],
input[type="reset"],
input::file-selector-button {
background-color: var(--color-bg-reply);
border-radius: 0;
border: 1px solid;
border-color: #dfdfdf #000000 #000000 #dfdfdf;
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
min-width: 6em;
min-height: 2em;
}

button:active,
select:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input::file-selector-button:active {
border-color: #000000;
box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #808080;
}

button:focus,
select:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input::file-selector-button:focus{
border-color: #000000;
}

.persistnav .boardlist {
box-shadow: inset 0px -1px 0 #808080;
border-color: #000000;
padding: 0.225em;
}

.postblock,
.winbar {
color: #ffffff;
}

.reply,
.postlists,
.flashboardList,
.previewBox,
.neomenuTopLevel,
.window,
#pager {
background-color: var(--color-bg-reply);
color: #000000;
border: 1px solid;
border-color: #dfdfdf #000000 #000000 #dfdfdf;
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

.inputtext,
.code,
.flashboardList td,
.flashboardList th,
.postlists td,
.postlists th,
.reply .postimg,
.reply .expandimg {
border: 1px solid;
border-color: #808080 #dfdfdf #dfdfdf #808080;
box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #ffffff;
}

.inputtext {
padding: 3px;
font-family: var(--font-family-main);
font-size: 0.9em;
}

textarea {
font-family: Fixedsys, "Lucida Console", Consolas, monospace !important;
}

.reply .name,
.reply .title {
color: #000000;
}

.window {
background-color: #c0c0c0;
color: #000000;
}

.winbar {
margin: 3px;
margin-bottom: 0;
border: none;
}

.winctrl button {
background-color: #c0c0c0;
}

.winctrl button:hover {
background-color: #ffffff;
}

#settarea > label:hover,
.settab_selected {
color: #ffffff !important;
}

.postlists,
.flashboardList,
.postlists .name,
.flashboardList .name,
.postlists .title,
.flashboardList .title {
color: #000000;
}

.postlists caption {
color: #ffffff;
}

.postlists td,
.postlists th,
.flashboardList td,
.flashboardList th {
padding: 3px;
}
I also disabled ClearType for teh screencap
>>
Rite, it did give a turquoise bg at first but it didn't look as nice as here so I asked to have grey-focused one. But this one rox!
>>
File: wikipedia_theme.png
[Animated PNG](103 KB, 1026x871) ▶
105472
introducing... wikipedia theme for heyuri ( ´¬ ` )
>>
File: wikipedia_theme2.png
[Animated PNG](135 KB, 802x745) ▶
138240
>>145071

Enjoy!

/* Wikipedia-style custom.css */

:root {
--color-bg-main: #f6f6f6;
--color-fg-main: #202122;
--color-fg-link: #0645ad;
--color-fg-link-hover: #0b0080;
--color-bg-boardlist: #f8f9fa;
--color-fg-boardlist: #202122;
--color-bg-theading: #eaecf0;
--color-bg-theading2: #f8f9fa;
--color-bg-theading3: #ffffff;
--color-bg-postblock: #f8f9fa;
--color-fg-title: #000000;
--color-fg-name: #54595d;
--color-fg-warning: #d73333;
--color-fg-warning-ip: #d73333;
--color-fg-quote: #54595d;
--color-fg-quote2: #72777d;
--color-bg-reply: #ffffff;
--color-bg-reply-hl: #eaf3ff;
--color-hi-contrast-border: #a2a9b1;
--color-lo-contrast-border: #c8ccd1;
--color-fg-logo: #000000;
--color-fg-global-message: #202122;
--color-bg-window-item-highlight: #eaf3ff;
--color-bg-postlists-header: #eaecf0;
--color-fg-postlists-header: #202122;
--color-fg-postlists-header-link: #0645ad;
--color-bg-postlists-odd: #f8f9fa;
--color-bg-postlists-even: #ffffff;
--color-fg-quotelink: var(--color-fg-link);
--color-fg-quotelink-hover: var(--color-fg-link-hover);
--color-border-button: #a2a9b1;
--color-bg-code: #f8f9fa;
--color-fg-code: #000000;
--color-bg-flashboard-even: #f8f9fa;
--font-family-main: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif;
--font-size-main: 0.875em;
}

body {
background-color: var(--color-bg-main);
color: var(--color-fg-main);
font-family: var(--font-family-main);
font-size: var(--font-size-main);
line-height: 1.6;
margin: 0;
padding: 0;
}

/* Clean, flat panels n Stuff :DD*/
.theading, .theading2, .theading3,
.neomenuTopLevel, .detailsbox, .postblock, .reply, .window {
border: 1px solid var(--color-hi-contrast-border);
background: var(--color-bg-theading);
box-shadow: none;
border-radius: 0;
padding: 0.5em 1em;
}

/* Panel sections (content boxes) */
.detailsboxContent, .centerBlock, .catComment {
background: var(--color-bg-theading3);
border: 1px solid var(--color-lo-contrast-border);
box-shadow: none;
padding: 1em;
margin: 0.5em 0;
}

/* Button styling */
button {
background-color: var(--color-bg-theading3);
border: 1px solid var(--color-border-button);
color: var(--color-fg-main);
font-size: 0.875em;
padding: 0.25em 1em;
font-family: var(--font-family-main);
box-shadow: none;
border-radius: 2px;
cursor: pointer;
}

button:hover {
background-color: var(--color-bg-theading);
border-color: var(--color-hi-contrast-border);
}

/* Inputs */
input[type="text"], input[type="password"], textarea, select {
background: var(--color-bg-theading3);
border: 1px solid var(--color-hi-contrast-border);
padding: 0.25em 0.5em;
font-family: var(--font-family-main);
font-size: 0.875em;
box-shadow: none;
}

/* Links */
a {
text-decoration: none;
color: var(--color-fg-link);
}

a:hover {
text-decoration: underline;
color: var(--color-fg-link-hover);
}

/* Logo stylin' */
.logo {
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
font-size: 1.5em;
color: var(--color-fg-main);
font-weight: normal;
}

/* Thread styling B) */
#catalogTable .thread {
background: var(--color-bg-theading3);
border: 1px solid var(--color-lo-contrast-border);
box-shadow: none;
padding: 1em;
}

/* Headings */
h1, h2, h3, h4 {
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
font-weight: normal;
color: var(--color-fg-main);
border-bottom: 1px solid var(--color-lo-contrast-border);
padding-bottom: 0.25em;
}

/* Menu tabs */
.neomenuTopLevel h2 {
background: var(--color-bg-theading);
border-bottom: 1px solid var(--color-hi-contrast-border);
padding: 0.5em 1em;
color: var(--color-fg-main);
font-size: 1em;
font-weight: bold;
}

/* Remove shadows and gradients for teh clean wiki look */
#catalogTable, .postlists {
box-shadow: none;
}

/* Kewl Quote styling */
blockquote {
border-left: 4px solid var(--color-lo-contrast-border);
padding-left: 1em;
margin-left: 0;
color: var(--color-fg-quote);
}

/* Code blocks */
pre, code {
background-color: var(--color-bg-code);
border: 1px solid var(--color-lo-contrast-border);
padding: 0.5em;
overflow: auto;
}

/* Tables */
table {
border-collapse: collapse;
margin: 1em 0;
}

th {
background-color: var(--color-bg-theading);
text-align: left;
padding: 0.5em 1em;
}

td {
padding: 0.5em 1em;
border: 1px solid var(--color-lo-contrast-border);
background-color: var(--color-bg-theading3);
}
>>
>>145072
Oh major fail! i messed up embedding my css..
>>
I think u just didn't put in scroll tag, which doesn't matter
Congrats on becoming teh first one to use language specific code tags though! (and making me notice a small bug in it...)
>>
File: monochrome-amber.png
[Animated PNG](173 KB, 1077x1274) ▶
177152
Some of j00 may remember an earlier version I made of this several years ago: a simulation of an amber monochrome display!

It sits on top of any existing light style - it looks best with Sakomoto IMHO. You can also change the hue-rotate value to somewhere between 50-80deg for a green variant

html{
filter:
contrast(0.85)
invert(1)
sepia(1)
brightness(0.8)
hue-rotate(-10deg) /*change to 50-80deg for green phospher*/
saturate(5);
}

body {
background-color: #ffffff;
background-image: none;
color: #666666;
}

iframe,
.theading,
.theading2,
.theading3,
img:not([src$=".svg"]) {
filter:
invert(1);
}

#usercounter {
background-color: #ffffff;
color: #000000
}
>>
File: monochrome-green.png
[Animated PNG](160 KB, 1077x1274) ▶
163840
And here's a screencap of the green variant
>>
Introducing Aqua Theme for Heyuri. ヽ(´∇`)ノ

Top of the page cycles through various fun aquatic themed emojis every so often...


>>145074
Huh, I don't know how to do that. c(´¬`c)
>>
File: Heyuri_Aqua_Theme.png
[Animated PNG](67 KB, 815x870) ▶
68608
>>145082
forgot to attach my image... LOL
>>
File: Heyuri_Aqua_Theme_2.png
[Animated PNG](151 KB, 951x683) ▶
154624
>>145082
I've also added wave badges next to names. (´¬` )
>>
>>145077
its like those 'puter terminals from fallout.
>>
File: f57.png
[Animated PNG](213 KB, 500x600) ▶
218112
it is pretty leet
>>
i know light themes are not very popular but they help me stay awake and productive.
>>
File: Eiffel_65_Theme_for_Heyuri.png
[Animated PNG](150 KB, 1012x867) ▶
153600
I'm blue, dabba dee dabba die ヽ(´∇` )ノ
>>
>>145184
looks good ヽ(´ー`)ノ
>>
>>145260
thanks id post the css but i forgot how to do scroll tags.
>>
>i forgot how to do scroll tags.
If u open up the BBCode section in the post form, there's now a button for it ヽ(´ー`)ノ
>>
>>144985
YUO DID NTO HAEV RIGHT TO SCREENCAP MY POST!!!
MY LOLIYER WILL BE COTNACTING U!!
>>
File: screenshot.png
(1.52 MB, 1652x1134) ▶
1591296
>>144985
teh glass!!
>>
File: Eiffel_65_Theme_for_Heyuri_2.png
[Animated PNG](47 KB, 877x289) ▶
48128
"Blue" Eiffel 65 Style for Heyuri. Enjoy teh blue.

Big thanks to >>145280 for creating a scroll tag button just for my retarded ass (´¬`)
/* "Eiffel 65" Style for Heyuri */
:root {
--color-bg-main: #000033;
--color-fg-main: #e0e0ff;
--color-fg-link: #00a8ff;
--color-fg-link-hover: #00ffff;
--color-bg-boardlist: #000066;
--color-fg-boardlist: #aaddff;
--color-bg-theading: #0000aa;
--color-bg-theading2: #0044cc;
--color-bg-theading3: #0066ff;
--color-bg-postblock: #002288;
--color-fg-title: #ffffff;
--color-fg-name: #88ccff;
--color-fg-warning: #ff5555;
--color-fg-warning-ip: #ff0000;
--color-fg-quote: #aaccff;
--color-fg-quote2: #88aaff;
--color-bg-reply: #001144;
--color-bg-reply-hl: #003377;
--color-hi-contrast-border: #00a8ff;
--color-lo-contrast-border: #0088dd;
--color-fg-logo: #00ffff;
--color-fg-global-message: #00ffff;
--color-bg-window-item-highlight: #0055aa;
--color-bg-postlists-header: #0000aa;
--color-fg-postlists-header: #00ffff;
--color-fg-postlists-header-link: #88ffff;
--color-bg-postlists-odd: #001155;
--color-bg-postlists-even: #002266;
--color-fg-quotelink: var(--color-fg-link);
--color-fg-quotelink-hover: var(--color-fg-link-hover);
--color-border-button: #00a8ff;
--color-bg-code: #001133;
--color-fg-code: #88ffff;
--color-bg-flashboard-even: #001144;
--font-family-main: 'Arial', 'Helvetica', sans-serif;
--font-size-main: 0.875em;
}

body {
background: linear-gradient(135deg, #000033 0%, #000055 100%);
color: var(--color-fg-main);
font-family: var(--font-family-main);
font-size: var(--font-size-main);
line-height: 1.6;
margin: 0;
padding: 0;
}

/* Futuristic glowing panels */
.theading, .theading2, .theading3,
.neomenuTopLevel, .detailsbox, .postblock, .reply, .window {
border: 1px solid var(--color-hi-contrast-border);
background: linear-gradient(to bottom, #001166 0%, #000044 100%);
box-shadow: 0 0 8px rgba(0, 170, 255, 0.3);
border-radius: 4px;
padding: 0.5em 1em;
margin-bottom: 1em;
}

/* Glowing content boxes */
.detailsboxContent, .centerBlock, .catComment {
background: rgba(0, 34, 102, 0.7);
border: 1px solid var(--color-lo-contrast-border);
box-shadow: inset 0 0 10px rgba(0, 136, 255, 0.2);
padding: 1em;
margin: 0.5em 0;
}

/* Cyber buttons */
button {
background: linear-gradient(to bottom, #0088ff 0%, #0044aa 100%);
border: 1px solid #00a8ff;
color: white;
font-size: 0.875em;
padding: 0.25em 1em;
font-family: var(--font-family-main);
text-shadow: 0 0 5px rgba(0, 200, 255, 0.7);
border-radius: 3px;
cursor: pointer;
transition: all 0.3s ease;
}

button:hover {
background: linear-gradient(to bottom, #00aaff 0%, #0066cc 100%);
box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}

/* Input Stuff */
input[type="text"], input[type="password"], textarea, select {
background: rgba(0, 34, 68, 0.8);
border: 1px solid var(--color-hi-contrast-border);
padding: 0.25em 0.5em;
font-family: var(--font-family-main);
font-size: 0.875em;
color: var(--color-fg-main);
box-shadow: inset 0 0 5px rgba(0, 170, 255, 0.3);
}

/* Glowing links Effect*/
a {
text-decoration: none;
color: var(--color-fg-link);
transition: all 0.3s ease;
}

a:hover {
color: var(--color-fg-link-hover);
text-shadow: 0 0 5px rgba(0, 200, 255, 0.7);
}

/* Glowing Logo Text */
.logo {
font-family: 'Impact', 'Arial Black', sans-serif;
font-size: 1.8em;
color: var(--color-fg-logo);
text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
letter-spacing: 1px;
}

/* Thread styling with moar glow effect */
#catalogTable .thread {
background: linear-gradient(to bottom, #001144 0%, #002266 100%);
border: 1px solid var(--color-lo-contrast-border);
box-shadow: 0 0 5px rgba(0, 170, 255, 0.3);
padding: 1em;
transition: all 0.3s ease;
}

#catalogTable .thread:hover {
box-shadow: 0 0 15px rgba(0, 200, 255, 0.5);
}

/* Headings with light blue glow, very cool*/
h1, h2, h3, h4 {
font-family: 'Arial Black', 'Impact', sans-serif;
font-weight: normal;
color: var(--color-fg-title);
text-shadow: 0 0 5px rgba(0, 200, 255, 0.5);
border-bottom: 1px solid var(--color-lo-contrast-border);
padding-bottom: 0.25em;
}

/* Menu tabs with gradient */
.neomenuTopLevel h2 {
background: linear-gradient(to right, #0000aa 0%, #0044cc 100%);
border-bottom: 2px solid var(--color-hi-contrast-border);
padding: 0.5em 1em;
color: white;
font-size: 1em;
text-shadow: 0 0 3px rgba(0, 200, 255, 0.7);
}

/* Quote styling */
blockquote {
border-left: 3px solid var(--color-hi-contrast-border);
padding-left: 1em;
margin-left: 0;
color: var(--color-fg-quote);
background: rgba(0, 51, 136, 0.3);
padding: 0.5em;
}

/*Blue Circles for Users*/
.name:before {
content: "🔵 ";
}



I'll post the css for my heyuri aqua theme later if anyonez interested.
>>
>I'll post the css for my heyuri aqua theme later if anyonez interested.

yes plz ヽ(´ー`)ノ
>>
315392
>>145331
plz post css as text so I can copy-paste
>>
>>145493
here u go buddy!!

:root {
--font-family-main: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
--font-size-main: 12pt;
--color-bg-main: rgba(255, 255, 255, 0.85);
--color-bg-main-gradient: #dbeeff;
--color-fg-main: #000000;
--color-fg-link: #fff;
--color-fg-link-hover: #6d6d6d;
--color-lo-contrast-border: #0000;
--color-hi-contrast-border: #888888;
--color-border-button: #d0d0d0;
--color-bg-boardlist: rgba(255, 255, 255, 0.3);
--color-fg-boardlist: #000000;
--color-fg-logo: #a4fb4c;
--color-bg-theading: rgba(255, 255, 255, 0.3);
--color-bg-theading2: rgba(240, 240, 255, 0.25);
--color-bg-theading3: rgba(220, 235, 255, 0.3);
--color-fg-theading: #000000;
--color-bg-postblock: rgba(255, 255, 255, 0.4);
--color-border-input: #aaaaaa;
--color-fg-global-message: #cc0000;
--color-bg-reply: rgba(255, 255, 255, 0.6);
--color-bg-reply-hl: rgba(230, 245, 255, 0.7);
--color-fg-title: #cc1105;
--color-fg-name: #048200;
--color-fg-warning: #ff0000;
--color-fg-warning-ip: #0000cc;
--color-fg-omitted: #707070;
--color-fg-quotelink: #1a4ccc;
--color-fg-quotelink-hover: #0033cc;
--color-fg-quote: #d4ff0a;
--color-fg-quote2: #ff69b4;
--color-bg-spoiler: #000000;
--color-bg-code: rgba(245, 245, 245, 0.95);
--color-fg-code: #000000;
--color-bg-postlists-header: rgba(220, 235, 255, 0.4);
--color-fg-postlists-header: #000;
--color-fg-postlists-header-link: #0044cc;
--color-bg-postlists-odd: rgba(245, 250, 255, 0.5);
--color-bg-postlists-even: rgba(255, 255, 255, 0.6);
--color-bg-flashboard-even: rgba(255, 255, 255, 0.4);
--color-bg-window-item-highlight: rgba(255, 255, 240, 0.7);
}

body {
background: url('https://w0.peakpx.com/wallpaper/794/426/HD-wallpaper-vista-grass-windows-vista-nature-grass.jpg') no-repeat center center fixed !important;
background-size: cover !important;
font-family: Segoe UI, Tahoma, sans-serif !important;
color: #313131 !important;
}

body::before {
content: "";
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(2px);
z-index: -1;
pointer-events: none;
}

a, a:link, a:visited {
color: var(--color-fg-link);
text-decoration: underline;
}

a:hover {
color: var(--color-fg-link-hover);
}

/* Panels */
.theading, .theading2, .theading3 {
backdrop-filter: blur(6px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
border-radius: 6px;
padding: 0.5em 1em;
color: var(--color-fg-theading);
}

.theading {
background: linear-gradient(to right, #eee, #d0e2ff);
}
.theading2 {
background: linear-gradient(to right, #ddeeff, #c0d4ff);
}
.theading3 {
background: linear-gradient(to right, #f0f8ff, #d0e8ff);
}

/* Inputs */
.inputtext, select, textarea {
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--color-border-input);
border-radius: 4px;
padding: 0.4em;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.inputtext:focus {
outline: 1px solid #a3cfff;
}

/* Buttons */
button, input[type="button"], input[type="submit"], input[type="reset"] {
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid #bdbebf;
backdrop-filter: blur(12px);
border-radius: 6px;
color: #000;
text-shadow: 0 1px 1px rgba(255,255,255,0.6);
padding: 0.3em 0.8em;
box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,0.15);
cursor: pointer;
transition: background 0.2s ease;
}

/* Replies */
.reply, .postblock, .window, .box, .boardlist, .theading {
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(12px);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.reply.highlight {
background: var(--color-bg-reply-hl);
}

/* Code blocks */
code, pre {
background: var(--color-bg-code);
border: 1px solid #ccc;
padding: 0.5em;
border-radius: 4px;
font-family: Consolas, monospace;
}

/* Scrollbars */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background: rgba(100, 120, 180, 0.6);
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.6);
}
::-webkit-scrollbar-track {
background: rgba(240, 240, 240, 0.3);
}

.winctrl button: {
background: url('https://imgur.com/FEGmPFW.png') no-repeat center center fixed !important;
}

hr {
color: #0000;
}

.winctrl button:hover, #settarea > label:hover, .settab_selected {
background-color: rgba(240, 240, 240, 0.2);
}
>>
>>145555
The background and window controls imaegs seem to be borked.
Here. Grass bg:
https://i.imgur.com/nHqDrvA.jpeg
And winctrl button:
https://i.imgur.com/FEGmPFW.png
>>
File: quads.jpg
(459 KB, 960x703) ▶
470016
>>145555
thanks anon
>>
>>145378
>>145082
>>145083
>>145085
Here it is. Enjoy ヽ(´∇`)ノ

/* Heyuri Aqua CSS */

:root {
/* -- Auqua Pool Palette -- */
--color-bg-main: #e8f7fa; /* Lighter, more subtle pool water */
--color-fg-main: #006064; /* Deep teal for text */
--color-fg-link: #00838f; /* Medium teal for links */
--color-fg-link-hover: #00acc1; /* Lighter teal for hover */
--color-bg-boardlist: #d0f0f5; /* Very light cyan */
--color-fg-boardlist: #006064;
--color-bg-theading: #a5e5ed; /* pool tile bluez */
--color-bg-theading2: #d0f0f5;
--color-bg-theading3: #e8f7fa;
--color-bg-postblock: #80deea; /* Muted pool blue */
--color-fg-title: #006064;
--color-fg-name: #00838f;
--color-fg-warning: #d50000;
--color-fg-warning-ip: #d50000;
--color-fg-quote: #00838f;
--color-fg-quote2: #80deea;
--color-bg-reply: #e8f7fa;
--color-bg-reply-hl: #d0f0f5;
--color-hi-contrast-border: #4fb3bf; /* Softer teal border */
--color-lo-contrast-border: #b2ebf2;
--color-fg-logo: #006064;
--color-fg-global-message: #00838f;
--color-bg-window-item-highlight: #d0f0f5;
--color-bg-postlists-header: #80deea;
--color-fg-postlists-header: #ffffff;
--color-fg-postlists-header-link: #e0f7fa;
--color-bg-postlists-odd: #e8f7fa;
--color-bg-postlists-even: #d0f0f5;
--font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-size-main: 0.875em;
}

/* -- Logo -- */
.logo:after {
content: "";
font-size: 2.5em;
animation: change-emoji 14s infinite;
}
/* -- Randomly Cycle through some Emojis for Decoration --*/
@keyframes change-emoji {
0% { content: ""; } /* Fish */
25% { content: ""; } /* Tropical fish */
50% { content: ""; } /* Wave */
75% { content: ""; } /* Droplet */
100% { content: ""; } /* Blowfish */
}

/*Badges for Users*/
.name:before {
content: " ";
}


/* -- Content Boxes -- */
.theading, .theading2, .theading3,
.neomenuTopLevel, .detailsbox, .postblock, .reply, .window {
border: 2px solid var(--color-hi-contrast-border);
background: var(--color-bg-theading);
box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.3);

}


/* -- Buttons -- */
button {
background: linear-gradient(to bottom, #b2ebf2, #80deea);
border: 1px solid var(--color-hi-contrast-border);
color: var(--color-fg-main);
border-radius: 3px;
padding: 0.25em 1em;
transition: all 0.2s;
}

button:hover {
background: linear-gradient(to bottom, #80deea, #4dd0e1);
}

/* -- inputs -- */
input[type="text"], input[type="password"], textarea, select {
background: rgba(230, 255, 255, 0.8);
border: 3px solid var(--color-lo-contrast-border);
}
blockquote:before {
content: "❝";
color: var(--color-bg-postblock);
opacity: 0.2;
font-size: 1.5em;
margin-right: 5px;
vertical-align: -0.3em;
}
>>
>>145630
forgive my spelling mistakes and typos.

I'm working on another theme that i might put up in a couple days maybe... a nostalgic one ヽ(´ー` )ノ
>>
File: 1747772038631.png
(2.95 MB, 1240x1748) ▶
3092480
>>145630
trading these panties for a dark version of your aqua theme
>>
409600
i forgot i can use ai. damn i love ai ヽ(´∇`)ノヽ(´∇`)ノ
still, thank you original author


/* Heyuri Aqua Dark CSS */

:root {
/* -- Dark Aqua Pool Palette -- */
--color-bg-main: #0a2a2f; /* Very Dark Desaturated Cyan */
--color-fg-main: #e0f2f7; /* Very Light Cyan for text */
--color-fg-link: #26c6da; /* Bright Cyan for links */
--color-fg-link-hover: #80deea; /* Lighter Cyan for hover */
--color-bg-boardlist: #103a40; /* Dark Cyan, slightly lighter than main bg */
--color-fg-boardlist: var(--color-fg-main);
--color-bg-theading: #004c54; /* Dark Teal - for prominent headers */
--color-bg-theading2: #005662; /* Slightly Lighter Dark Teal */
--color-bg-theading3: #006064; /* Original Deep Teal, now a lighter bg accent */
--color-bg-postblock: #1c3f4a; /* Dark Desaturated Cyan/Blue, lighter than main bg */
--color-fg-title: #b2ebf2; /* Light Cyan */
--color-fg-name: #80deea; /* Lighter Cyan (same as link hover) */
--color-fg-warning: #ff6b6b; /* Bright Red for warnings */
--color-fg-warning-ip: #ff6b6b;
--color-fg-quote: #4dd0e1; /* Medium-Light Cyan for quote text */
--color-fg-quote2: #80deea; /* Light Aqua for quote icon or secondary quote text */
--color-bg-reply: #0f3038; /* Dark Cyan, very close to main bg but distinct */
--color-bg-reply-hl: #1a4a52; /* Highlighted reply, slightly lighter */
--color-hi-contrast-border: #267d85; /* Medium Teal for distinct borders */
--color-lo-contrast-border: #154046; /* Darker Teal for subtle borders */
--color-fg-logo: #b2ebf2;
--color-fg-global-message: #80deea;
--color-bg-window-item-highlight: #1a4a52;
--color-bg-postlists-header: #004c54; /* Same as theading */
--color-fg-postlists-header: #e0f7fa;
--color-fg-postlists-header-link: #ffffff; /* Pure white for max contrast here */
--color-bg-postlists-odd: #0f3038; /* Same as reply bg */
--color-bg-postlists-even: #143f47; /* Slightly lighter for striping */
--font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-size-main: 0.875em;
}

/* General body styles for dark theme */
body {
background-color: var(--color-bg-main);
color: var(--color-fg-main);
}

a {
color: var(--color-fg-link);
}
a:hover {
color: var(--color-fg-link-hover);
}


/* -- Logo -- */
.logo:after {
content: "";
font-size: 2.5em;
animation: change-emoji 14s infinite;
}
/* -- Randomly Cycle through some Emojis for Decoration --*/
@keyframes change-emoji {
0% { content: ""; } /* Fish */
25% { content: ""; } /* Tropical fish */
50% { content: ""; } /* Wave */
75% { content: "💧"; } /* Droplet */
100% { content: "🐡"; } /* Blowfish */
}
/* Make emoji slightly brighter if needed, or add a subtle glow */
.logo:after {
filter: brightness(1.2); /* Optional: makes emoji pop a bit more */
}


/*Badges for Users*/
.name:before {
content: " "; /* Keep as is unless specific badge styling is needed */
}


/* -- Content Boxes -- */
.theading, .theading2, .theading3,
.neomenuTopLevel, .detailsbox, .postblock, .reply, .window {
border: 2px solid var(--color-hi-contrast-border);
background: var(--color-bg-theading); /* Default background for these, can be overridden */
/* For dark theme, the inner shadow should be subtle and dark, or a light glow */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0,0,0,0.3);
}

/* Specific backgrounds if different from theading default */
.theading2 { background: var(--color-bg-theading2); }
.theading3 { background: var(--color-bg-theading3); }
.postblock { background: var(--color-bg-postblock); }
.reply { background: var(--color-bg-reply); }


/* -- Buttons -- */
button {
background: linear-gradient(to bottom, #00838f, #006064); /* Darker teal gradient */
border: 1px solid var(--color-fg-link-hover); /* Brighter border for pop */
color: var(--color-fg-main); /* Light text */
border-radius: 3px;
padding: 0.25em 1em;
transition: all 0.2s;
font-weight: bold;
}

button:hover {
background: linear-gradient(to bottom, #0097a7, #00838f); /* Slightly lighter on hover */
border-color: #b2ebf2;
}

/* -- inputs -- */
input[type="text"], input[type="password"], textarea, select {
background: var(--color-bg-reply); /* Dark background */
border: 2px solid var(--color-hi-contrast-border);
color: var(--color-fg-main); /* Light text */
padding: 0.3em;
border-radius: 3px;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
border-color: var(--color-fg-link);
outline: none;
box-shadow: 0 0 5px rgba(var(--color-fg-link-rgb, 38, 198, 218), 0.5); /* Define --color-fg-link-rgb if you want to use it often */
}

blockquote {
border-left: 3px solid var(--color-fg-quote);
padding-left: 10px;
margin-left: 5px;
color: var(--color-fg-quote); /* Text inside blockquote */
}

blockquote:before {
content: "❝";
color: var(--color-fg-quote2); /* Use a brighter color for the quote mark */
opacity: 0.7; /* Adjust opacity for visibility */
font-size: 1.5em;
margin-right: 5px;
vertical-align: -0.3em;
float: left; /* Optional: for better alignment */
line-height: 1; /* Optional: for better alignment */
}

Want your banner here? Click here to submit yours!

[Top]

Delete post: []
First
[1]
Last