Yu-ichi · 2021-06-02 04:11
Alright lainons, I'm posting some of my mods here.
>How do I use these?
Go to Options > CSS > Copy/Paste. Note to pick the correct theme the stylesheet uses.
>Are there other options?
You can use an addon like Stylus or get 1337 with some user.js or something.
Mono E. Lain Cyber Mod:
/* Enter here your own CSS rules... */
/* If you want to make a redistributable style, be sure to
have a Yotsuba B theme selected. */
/* You can include CSS files from remote servers, for example: */
@import "http://example.com/style.css";
body {
font-family: Input Mono;
background: url("../static/rRLs7q4.png") #000000;
}
.theme-catalog div.thread {
text-align: center;
font-weight: normal;
font-size: 14px;
}
.theme-catalog div.grid-size-large {
min-width: 280px;
max-width: 300px;
max-height: 500px;
min-height: 400px;
}
div.post.reply {
background-color: #000;
border: solid 2px #2e8b57;
}
a {
color: #ff268b !important;
text-decoration: none;
}
div.post.reply div.body {
margin-left: 1.8em;
font-size: 14px;
}
div.post div.body {
clear: none;
font-size: 14px;
}
div[id^="thread_"] {
background-color: #000;
color: #5fe632;
margin-bottom: 20px;
margin-left: 2%;
padding: 10px;
border: solid 2px #7b68ee;
width: 96%;
box-shadow: 3px 5px #7b68ee;
}
div.post div.body {
margin-top: 0.8em;
padding-right: 3em;
padding-bottom: 0.3em;
margin-bottom: 0.8em;
}
input {
background-color: #000;
color: #61CE3C;
}
div.boardlist:not(.bottom) {
text-align: center;
letter-spacing: 0px;
color: #989898;
font-size: 12px;
}
form table tr td {
background-color: rgb(0, 0, 0);
}
form table {
background-color: #000;
border: solid 1px #989898;
color: #5cdb32;
padding: 5px;
box-shadow: 3px 3px #989898 !important;
}
div.files img.post-image {
box-shadow: 3px 5px #29774b;
background-color: #444;
border: solid 2px #525352;
padding: 0px;
border-radius: 0;
margin-bottom: 5px;
}
.theme-catalog div.thread:hover {
background-color: #000;
border: solid 2px #79fbb2;
}
#thread_stats {
float: right;
margin-top: 24px;
}
div.boardlist:not(.bottom) {
background-color: #000 !important;
text-align: center;
padding: 5px 1px;
letter-spacing: -1px;
color: #989898;
font-size: 11px;
border-bottom: double 3px #989898 !important;
position: unset;
word-spacing: -4px !important;
}
.theme-catalog div.thread {
background-color: #000;
color: #39df41;
border: solid 2px #236f44;
margin-bottom: 12px;
margin-left: 4px;
}
div.post.reply.highlighted {
background-color: #000;
border: solid 2px #93e0e3;
box-shadow: 3px 5px #93e0e3;
}
PoisonMod:
.theme-catalog div.thread:hover {
background: #4F4259;
border-color: #91769D;
}
Future CSS:
- A mod of Cyberpunk
- A mod of fauxx (has some issues regarding catalog hover highlights, but most themes here do for some reason)
Judge Fang · 2021-06-04 06:14
>>46690
I'm currently working on a brand new theme called "Obsidian" that was, at one point, used for a different imageboard.
fsociety · 2021-06-06 20:27
I modified yours slightly to change the code colors, I think it looks nice.
https://hastebin.com/oxuwufevub.css
Bob Arctor · 2021-06-07 00:09
>>46980
>>46690
I fuarrrking love this. It looks nice as fuarrrk. Thanks lains!
Ender · 2021-06-07 00:58
>>46980
Very, very nice. Adding to Stylus. Should we make a Git repo of custom styles just for Lain? It'd be easy to set up.
Koichiro · 2021-06-07 01:00
>>46986
>>46985
>>46980
Also, there's an issue with some threads not wanting to honor the width of the page, but I found a fix for that in my CSS. I'll post it here in a second.
Yu-ichi · 2021-06-07 01:09
>>46980
Modified yours slightly. Renamed Consolas to "monospace" so it works on all systems.
Added rule in body to ensure the thread width isn't cut off and things are rendered correctly.
Reduced margins.
body {
font-family: monospace;
background: url("../static/rRLs7q4.png") #000000;
overflow-x: visible !important;
float: inherit;
}
.theme-catalog div.thread {
text-align: center;
font-weight: normal;
font-size: 12px;
}
.theme-catalog div.grid-size-large {
min-width: 280px;
max-width: 300px;
max-height: 500px;
min-height: 400px;
}
div.post.reply {
background-color: #000;
border: solid 2px #2e8b57;
}
a {
color: #ff268b !important;
text-decoration: none;
}
div.post.reply div.body {
margin-left: 1.8em;
font-size: 12px;
}
div.post div.body {
clear: none;
font-size: 12px;
}
div[id^="thread_"] {
background-color: #000;
color: #5fe632;
margin-bottom: 20px;
margin-left: 2%;
padding: 10px;
border: solid 2px #7b68ee;
width: 96%;
box-shadow: 3px 5px #7b68ee;
}
div.post div.body {
margin-top: 0.8em;
padding-right: 3em;
padding-bottom: 0.3em;
margin-bottom: 0.8em;
}
input {
background-color: #000;
color: #61CE3C;
}
div.boardlist:not(.bottom) {
text-align: center;
letter-spacing: 0px;
color: #989898;
font-size: 12px;
}
form table tr td {
background-color: rgb(0, 0, 0);
}
form table {
background-color: #000;
border: solid 1px #989898;
color: #5cdb32;
padding: 5px;
box-shadow: 3px 3px #989898 !important;
}
div.files img.post-image {
box-shadow: 3px 5px #29774b;
background-color: #444;
border: solid 2px #525352;
padding: 0px;
border-radius: 0;
margin-bottom: 5px;
}
.theme-catalog div.thread:hover {
background-color: #000;
border: solid 2px #79fbb2;
}
#thread_stats {
float: right;
margin-top: 24px;
}
div.boardlist:not(.bottom) {
background-color: #000 !important;
text-align: center;
padding: 5px 1px;
letter-spacing: -1px;
color: #989898;
font-size: 11px;
border-bottom: double 3px #989898 !important;
position: unset;
word-spacing: -4px !important;
}
.theme-catalog div.thread {
background-color: #000;
color: #39df41;
border: solid 2px #236f44;
margin-bottom: 12px;
margin-left: 4px;
}
div.post.reply.highlighted {
background-color: #000;
border: solid 2px #93e0e3;
box-shadow: 3px 5px #93e0e3;
}
#thread_stats {
margin-top: 64px;
}
/* ------------------------------------------------------------- */
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
font-family: monospace;
}
code.hljs {
padding: 3px 5px;
border: solid 1px #999999;
}
.hljs {
color: #999999;
background: #000;
}
.hljs ::selection {
color: #ff268b;
background: white;
}
.hljs-formula,
.hljs-params,
.hljs-property {}
.hljs-function .hljs-title,
.hljs-attribute,
.ruby .hljs-property,
.hljs-title.function_,
.hljs-section,
.hljs-comment {
color: #999999;
}
.hljs-subst,
.hljs-punctuation,
.hljs-operator,
.hljs-tag {
color: #5fe632;
}
.hljs-operator {
opacity: 0.7;
}
.hljs-bullet,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-tag,
.hljs-name,
.hljs-deletion,
.hljs-symbol,
.hljs-number,
.hljs-link,
.hljs-attr,
.hljs-variable.constant_,
.hljs-literal,
.hljs-title,
.hljs-class .hljs-title,
.hljs-title.class_,
.hljs-strong,
.hljs-code,
.hljs-addition,
.hljs-title.class_.inherited__,
.hljs-string {
color: #ff268b;
}
.hljs-strong {
font-weight: bold;
}
.hljs-built_in,
.hljs-doctag,
.hljs-quote,
.hljs-keyword.hljs-atrule,
.hljs-regexp {
color: #5fe632;
}
.hljs-type,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.diff .hljs-meta,
.hljs-keyword,
.hljs-emphasis,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string,
.hljs-addition,
.hljs-meta-string,
.hljs-section,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-string,
.hljs-symbol {
color: #5fe632;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
font-weight: bold;
}
BloodCat · 2021-06-07 01:13
>>46980
Oh, last reply (sorry mods for spamming, I'll cut back on the post counts, I don't want to get derezzed).
There's an issue where clicking on a thread in catalogue view (but not actually opening it, i.e. click somewhere in the blank space inside the grid cell) causes it to change width.
This fixes that by defaulting it to 100% the entire time, so things stay uniform.
Add this to your CSS and it should fix it:
.theme-catalog div.grid-size-large {
min-width: 280px;
max-width: 300px;
max-height: 500px;
min-height: 400px;
width: 100%;
}
Linda Lee · 2021-06-09 10:49
>>46989
There was a minor problem with these CSS rules, but I fixed it here:
.theme-catalog div.grid-size-large {
min-width: 300px;
max-width: 300px;
max-height: 500px;
min-height: 500px;
width: 100%;
}
Chani · 2021-06-15 00:13
Alright, so I messed with Fauxx and came up with this:
body {
font-family: fira code semibold;
overflow-x: visible !important;
float: inherit;
background-color: #060606;
}
.theme-catalog div.thread {
text-align: center;
font-weight: normal;
font-size: 12px;
}
.theme-catalog div.grid-size-large img {
max-height: 40%;
max-width: 95%;
padding-top: 4px;
}
#quick-reply table {
border-collapse: collapse;
border: solid 2px #d2738a;
}
#quick-reply th {
text-align: center;
padding: 2px 0;
border: 1px solid #d2738a;
}
#quick-reply input[type="text"], #quick-reply select {
width: 100%;
padding: 2px;
font-size: 10pt;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
color: #c1b492;
}
.theme-catalog div.grid-size-large {
min-width: 300px;
max-width: 300px;
max-height: 500px;
min-height: 500px;
padding: 0px;
margin-right: 8px;
margin-left: 8px;
margin-top: 8px;
margin-bottom: 8px;
width: 100%;
}
div.post.reply div.body {
margin-left: 1.8em;
background-color: #060606;
}
div.post div.body {
clear: none;
font-size: 14px;
background-color: #060606;
}
div[id^="thread_"] {
background-color: #060606;
;
margin-bottom: 20px;
margin-left: 2%;
padding: 10px;
width: 96%;
}
div.post div.body {
background-color: #060606;
;
margin-top: 0.8em;
padding-right: 3em;
padding-bottom: 0.3em;
margin-bottom: 0.8em;
}
div.boardlist:not(.bottom) {
text-align: center;
letter-spacing: 0px;
font-size: 12px;
}
form table tr td {
background-color: #060606;
;
}
form table {
background-color: #060606;
padding: 5px;
}
div.files img.post-image {
padding: 0px;
border-radius: 0;
margin-bottom: 5px;
}
.theme-catalog div.thread:hover {
background-color: #0e0e0e;
border: solid 2px #d2738a;
}
.theme-catalog div.thread{
background-color: #0a0a0a;
border: 2px solid rgb(193, 180, 146);;
}
#thread_stats {
float: right;
margin-top: 24px;
}
div.post.reply {
background-color: #060606;
border: #d2738a 2px solid;
}
div.boardlist:not(.bottom) {
background-color: #060606;
text-align: center;
padding: 5px 1px;
letter-spacing: -1px;
color: #989898;
font-size: 11px;
border-bottom: double 3px #989898 !important;
position: unset;
word-spacing: -4px !important;
}
.theme-catalog div.thread {
margin-bottom: 12px;
margin-left: 4px;
font-size: 14px;
}
div.post.reply.highlighted {
background-color: #060606;
border: 2px solid;
}
#thread_stats {
margin-top: 64px;
}