/g/ - Technology

What's your setup?

Custom CSS Anon 11/01/2025, 16:35:46 f44208 No.14

HideWatch

th-7753686.jpg
[Hide] (15.3KB, 474x474) Reverse

Any tweakers? Post your custom CSS.
I wrote this to reduce some of the wasted vertical space on this site.
.post-file {
    padding: unset !important;
}

.post-file-info {
    display: flex;
    flex-direction: row;
    overflow: scroll;
    text-align: unset;
    width: max-content;
    white-space: nowrap;
}

.post-file-info span:has(>.filename) {
    max-width: unset !important;
    overflow: hidden !important;
}

.post-file-info .filename {
    max-width: unset !important;
}

hr {
    margin: 0px !important;
}

Replies: >>40 >>75

Anon 11/01/2025, 19:46:46 7bbbf8 No.16

Throw this into the mix, to compact the catalog:
    .catalog-tile {
        height: 222px;
        width: 222px;
    }

Anon 12/01/2025, 06:20:32 a77ed6 No.21

Thanks fren, but how do I install it or whatever?

Replies: >>22

Anon 12/01/2025, 06:22:18 655e74 No.22

>>21
Click Settings in the top right and paste it in the box

Anon 12/01/2025, 20:43:02 864933 No.40

>>14 (OP) 
The "overflow: scroll" part on line 8 makes it look like shit on chrome. Remove that and it's good.

Anon 13/01/2025, 23:57:51 dbfd26 No.75

>>14 (OP) 
css to hide posts with specific flags:
.post-container:has(.flag-us) { display: none; }

Anon 15/01/2025, 10:15:19 ac64d1 No.99

I'm currently running a variation of the old amber /cyber/ theme. 

body {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 12px;
    color: #FFAA00;
    background:#100000;
}

element {
    color: #FF7700;
    text-decoration: none;
}

.catalog div.catalog-tile {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-weight: normal;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 4px;
        padding-top: 4px;
        padding-right: 4px;
        padding-bottom: 4px;
        padding-left: 4px;
    height: 300px;
    width: 205px;
    overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
    position: relative;
    font-size: 11px;
    background: #100000 none repeat scroll 0% 0%;
    border: 1px solid ;
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
    max-height: 300px;
}

.catalog div.catalog-tile:hover {
    color: #FFAE66 ;
    background: #100000 none repeat scroll 0% 0%;
    border: #FFAE66 1px dashed;
        background-color: #100000 ;
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: 0% 0%;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: auto auto;
}

a, a:visited {
    text-decoration: underline;
    color: #FFAA00;
}

a:hover, .intro a.post_no:hover {
    color: #FF7700;
}

.postform-style {
    color: #FF7700;
    cursor: default;
    text-align: center;
    min-height: 15px;
    max-height: 140px;
    background: #100000;
  	border: #FFAA00 1px solid;
  	border-width: 1px;
    border-color: #FFAA00;
}

.close {
    cursor: pointer;
    color: rgba(255, 119, 0, 1);
    font-size: 20px;
}

.close a:hover {
    cursor: pointer;
    color: #FFAE66;
}

.postform-style .upload-thumb {
    color: rgba(255, 119, 0, 0.61);
    cursor: pointer;
    position: relative;
    margin-bottom: 5px;
    padding: 10px 0px;
    top: 5px;
    transition: all 0.2s ease 0s;
        transition-property: all;
        transition-duration: 0.2s;
        transition-timing-function: ease;
        transition-delay: 0s;
    border: 2px dashed rgba(145, 92, 0, 0.26);
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
}

.upload-thumb:hover, .postform-style.dragover .upload-thumb {
    color: #FF7700;
    border-color: #FF7700;
}

.detected {
    color: rgb(66, 233, 255);
    background-color: #100000;
}

.navbar {
    background-color: #100000;
    border: 1px solid #FFAA00;
    padding: 0px;
    margin: 0px;
    white-space: nowrap;
}

span.spoiler {
    border: #E49903 1px solid;
    margin-bottom: 4px;
    margin-top: 4px;
    display: inline-block;
  }

.thread {
    margin-top: 0px;
    border: 1px solid #FFAA00;
    padding: 5px;
    padding-bottom: 5px;
    padding-bottom: 15px;
}

.fw th {
    color: #100000;
    border: 1px solid #FFAA00;
}

.fw td {
    color: #FFAA00;
    border: 1px solid #FFAA00;
    background-color: #100000;
}

.table-container th {
    color: #100000;
}

.table-container tbody {
    border: 1px solid #FFAA00;
}

.table-container td {
    border: 1px solid #FFAA00;
}

.table-container tr {
    color: #FFAA00;
    background-color: #100000;
}

.table-container tr:nth-child(2n+1) {
    color: #FFAA00;
    background-color: #080000;
}

#postform {
    background-color: #100000;
    border: 1px solid #FFAA00;
    padding: 5px;
    margin: 0px;
    white-space: nowrap;
}

#postform .dummy-link {
    color: #FF7700;
}

.close {
    background-color: #080000;
}

.upload-list {
    background-color: #080000;
}

.close:hover {
    color: #FFAE66 !important;
}

.filelabel {
    background-color: #080000;
}

#postform input{
    background-color: #080000;
    color: #FFAA00;
    border: 1px solid #FFAA00;
    padding: 5px;
    margin: 0px;
    white-space: nowrap;
}

.label {
    border: 1px solid #FFAA00;
    color: #100000;
    align-items: center;
    padding-right: 5px;
    padding-left: 5px;
}

.rlabel {
    border: 1px solid #FFAA00;
    color: #100000;
    align-items: center;
    padding-right: 5px;
    padding-left: 5px;
}

.modal {
    background-color: #100000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 10px;
}

.post-button {
    background-color: #100000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 10px;
    margin-top: 10px;
    white-space: nowrap;
}

.post-button:hover {
    color: #FFAE66;
    border: 1px solid #FFAE66;
}

.pages {
    background-color: #100000;
    border: 1px solid #FFAA00;
}

.post-subject {
	font-size: 12px;
	font-family: "Lucida Console", Monaco, monospace;
	color: #FFAE66 !important;
	font-weight: 800;
}

.post-container.op {
    background-color: #100000;
    border: none;
    box-shadow: none;
}

.post-container {
    background-color: #100000;
    border: 1px solid #FFAA00;
    margin-top: 9px;
    box-shadow: #FFAA00 3px 5px;
    max-width: 95%;
}

.post-container .post-name {
    color: #4a7002;
}

.catalog-tile .post-info {
    background-color: #100000;
    color: #FFAA00;
    border: none;
}

.catalog-tile .postmenu{
    border-left: calc(2 * .5em * .866) solid #FFAA00;
}

.code {
    background: #080000;
    border: 1px solid #FFAA00;
    padding: 5px;
}

.post-info {
    background-color: #E49903;
    color: #100000;
    border: 1px solid #FFAA00;
}

.post-container.op .post-info {
    color: #FFAA00;
}

.postmenu {
    top: 0px;
    border-left: calc(2 * .5em * .866) solid #100000;
}

.post-container.op .postmenu {
    border-left: calc(2 * .5em * .866) solid #FFAA00;
}

.post-container.op .post-name {
    color:#95e403;
}

.post-container.op .post-info a{
    color: #FF7700;
}

a:link, a:visited, .intro a.email span.name {
	color: #FF7700;
	text-decoration: none;
	font-family: "Lucida Console", Monaco, monospace;
}
a:hover, a:visited:hover {
	color: #FFC490 !important;
	font-family: "Lucida Console", Monaco, monospace;
	text-decoration: none;
}

.post-info a {
    color: #100000;
}

table a:link{ 
    color: #100000;
}

.collapse {
    background-color: #100000;
    border: 1px solid #FFAA00 !important;
    color: #FF7700;
    padding: 10px;
    margin-top: 10px;
    white-space: nowrap;
}

input {
    background: #080000;
  	border: #FFAA00 1px solid;
    color: #FFAA00;
}

select {
    background: #080000;
  	border: #FFAA00 1px solid;
    color: #FFAA00;
}

textarea {
    background-color: #080000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 5px;
    margin: 0px;
}

.stickynav {
    background-color: #100000;
    border: 1px solid #FFAA00;
    padding: 2px;
    margin-right: 5px;
    margin-bottom: 5px;

    white-space: nowrap;
}

#livetext {
    background-color: #100000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 10px;
    margin-top: 10px;
    white-space: nowrap;
}

#threadstats {
    background-color: #100000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 10px;
    margin-top: 10px;
    white-space: nowrap;
}

#jsonly {
    background-color: #100000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 10px;
    margin-top: 10px;
    white-space: nowrap;
}


h1 {
	font-size: 20pt;
	text-align: center;
	letter-spacing: 0px;
}

hr {
	height: 1px;
	border: #FFAA00  1px solid;
    margin-bottom: 10px;
}

div.board-header, h1 {
	color: #FFAA00 ;
	font-family: "Lucida Console", Monaco, monospace;
}

div.board-header p {
	font-size: 10px;
}

.board-title, h1 {
	color: #FFAA00 ;
	font-family: "Lucida Console", Monaco, monospace;
    margin-top: 5px;
}

:root {
    --post-color: #080000;
    --post-outline-color: #FFAA00;
    --highlighted-post-color: #400000;
    --highlighted-post-outline-color: #FFAA00;
    --label-color: #FFAA00;
    --greentext-color: #FF7700;
    --pinktext-color: #DF5372;
}

Replies: >>104

Anon 16/01/2025, 04:04:07 8d13f8 No.104

>>99
Old one was broken, so I tweaked it again.
body {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 12px;
    color: #FFAA00;
    background:#100000;
}

.catalog div.catalog-tile {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-weight: normal;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 4px;
    height: 300px;
    width: 205px;
    overflow: hidden;
    position: relative;
    font-size: 11px;
    background: #100000 none repeat scroll 0% 0%;
    border: 1px solid ;
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
    max-height: 300px;
}

.catalog div.catalog-tile:hover {
    color: #FFAE66 ;
    background: #100000 none repeat scroll 0% 0%;
    border: #FFAE66 1px dashed;
}

a, a:visited {
    text-decoration: underline;
    color: #FFAA00;
}

a:hover, .intro a.post_no:hover {
    color: #FF7700;
}

.postform-style {
    color: #FF7700;
    cursor: default;
    text-align: center;
    min-height: 15px;
    max-height: 140px;
    background: #100000;
  	border: #FFAA00 1px solid;
  	border-width: 1px;
    border-color: #FFAA00;
}

.close {
    cursor: pointer;
    color: #FF7700;
    font-size: 20px;
}

.close a:hover {
    cursor: pointer;
    color: #FFAE66;
}

.postform-style .upload-thumb {
    color: rgba(255, 119, 0, 0.61);
    cursor: pointer;
    position: relative;
    margin-bottom: 5px;
    padding: 10px 0px;
    top: 5px;
    transition: all 0.2s ease 0s;
    border: 2px dashed rgba(145, 92, 0, 0.26);
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
}

.upload-thumb:hover, .postform-style.dragover .upload-thumb {
    color: #FF7700;
    border-color: #FF7700;
}

.detected {
    color: rgb(66, 233, 255);
    background-color: #100000;
}

.navbar {
    background-color: #100000;
    border: 1px solid #FFAA00;
    padding: 0px;
    width: auto;
    margin-left: 10px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

span.spoiler {
    border: #E49903 1px solid;
    margin-bottom: 4px;
    margin-top: 4px;
    display: inline-block;
  }

.thread {
    margin-top: 0px;
    border: 1px solid #FFAA00;
    padding: 5px;
    padding-bottom: 5px;
    padding-bottom: 15px;
}

.fw th {
    color: #100000;
    border: 1px solid #FFAA00;
}

.fw td {
    color: #FFAA00;
    border: 1px solid #FFAA00;
    background-color: #100000;
}

.table-container th {
    color: #100000;
}

.table-container tbody td {
    border: 1px solid #FFAA00;
}

.table-container tr {
    color: #FFAA00;
    background-color: #100000;
}

.table-container tr:nth-child(2n+1) {
    color: #FFAA00;
    background-color: #080000;
}

#postform {
    background-color: #100000;
    border: 1px solid #FFAA00;
    padding: 5px;
    margin: 0px;
    white-space: nowrap;
}

#postform .dummy-link {
    color: #FF7700;
}

.close, .upload-list, .filelabel {
    background-color: #080000;
}

.close:hover {
    color: #FFAE66 !important;
}

#postform input{
    background-color: #080000;
    color: #FFAA00;
}

.label, .rlabel {
    border: 1px solid #FFAA00;
    color: #100000;
    align-items: center;
    padding-right: 5px;
    padding-left: 5px;
}

.modal {
    background-color: #100000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 10px;
}

#livetext, #threadstats, #jsonly, .post-button {
    background-color: #100000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 10px;
    margin-top: 10px;
    white-space: nowrap;
}

.post-button:hover {
    color: #FFAE66;
    border: 1px solid #FFAE66;
}

.pages {
    background-color: #100000;
    border: 1px solid #FFAA00;
}

.post-subject {
	font-size: 12px;
	font-family: "Lucida Console", Monaco, monospace;
	color: #FFAE66 !important;
	font-weight: 800;
}

.post-container, .file-thumb {
    background-color: #100000;
    border: 1px solid #FFAA00;
    margin-top: 9px;
    box-shadow: #FFAA00 3px 5px;
    max-width: 95%;
}

.post-container.op {
    background-color: #100000;
    border: none;
    box-shadow: none;
}

.post-container .post-name {
    color: #4a7002;
}

.catalog-tile .post-info {
    background-color: #100000;
    color: #FFAA00;
    border: none;
}

.file-thumb {
    padding: 1px;
    margin-top: 2px;
}

.catalog-tile .postmenu{
    border-left: calc(2 * .5em * .866) solid #FFAA00;
}

.code {
    background: #080000;
    border: 1px solid #FFAA00;
    padding: 5px;
}

.post-info {
    background-color: #E49903;
    color: #100000;
    border: 1px solid #FFAA00;
}

.post-container.op .post-info {
    color: #FFAA00;
}

.postmenu {
    top: 0px;
    border-left: calc(2 * .5em * .866) solid #100000;
}

.post-container.op .postmenu {
    border-left: calc(2 * .5em * .866) solid #FFAA00;
}

.post-container.op .post-name {
    color:#95e403;
}

.post-container.op .post-info a{
    color: #FF7700;
}

a:link, a:visited, .intro a.email span.name {
	color: #FF7700;
	text-decoration: none;
	font-family: "Lucida Console", Monaco, monospace;
}
a:hover, a:visited:hover {
	color: #FFC490 !important;
}

.post-info a {
    color: #100000;
}

table a:link{ 
    color: #FF7700;
}

.collapse {
    background-color: #100000;
    border: 1px solid #FFAA00 !important;
    color: #FF7700;
    padding: 10px;
    margin-top: 10px;
    white-space: nowrap;
}

input, select {
    background: #080000;
  	border: #FFAA00 1px solid;
    color: #FFAA00;
    font-family: "Lucida Console", Monaco, monospace;
}

textarea {
    background-color: #080000;
    border: 1px solid #FFAA00;
    color: #FFAA00;
    padding: 5px;
    margin: 0px;
    font-family: "Lucida Console", Monaco, monospace;
}

.stickynav {
    background-color: #100000;
    border: 1px solid #FFAA00;
    padding: 2px;
    margin-right: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
    border-top-width: 2px;
    border-left-width: 2px;
}

h1 {
	font-size: 20pt;
	text-align: center;
	letter-spacing: 0px;
}

hr {
	height: 1px;
	border: #FFAA00  1px solid;
    margin-bottom: 10px;
}

div.board-header, h1 {
	color: #FFAA00 ;
	font-family: "Lucida Console", Monaco, monospace;
}

div.board-header p {
	font-size: 10px;
}

.board-title, h1 {
	color: #FFAA00 ;
	font-family: "Lucida Console", Monaco, monospace;
    margin-top: 5px;
}

:root {
    --post-color: #080000;
    --post-outline-color: #FFAA00;
    --highlighted-post-color: #400000;
    --highlighted-post-outline-color: #FFAA00;
    --label-color: #FFAA00;
    --greentext-color: #FF7700;
    --pinktext-color: #DF5372;
    --alt-label-color: #FFAA00;
}

Replies: >>105

Anon 16/01/2025, 07:09:06 a44f7f No.105

1707451809995402.gif
[Hide] (1.9MB, 400x535) Reverse

>>104
Amazing.

Anon 05/09/2025, 09:23:33 7eb5a2 No.820

OurChan, but in blue.

:root {
    --icon-color: #012d46;
    --alt-label-color: #98E;
    --alt-font-color: black;
    --background-top: #0a0a0a;
    --background-rest: #062235;
    --navbar-color: #0068bd;
    --post-color: #012d46;
    --post-outline-color: #4bc3eb;
    --label-color: #3bbaff;
    --box-border-color: #041a29;
    --darken: #00000010;
    --highlighted-post-color: #062235;
    --highlighted-post-outline-color: #86e1ff;
    --board-title: #EEE;
    --hr: lightgray;
    --font-color: #3bbaff;
    --name-color: #88fffb;
    --capcode-color: #761280;
    --subject-color: #012d46;
    --link-color: #27f4cb;
    --post-link-color: #27f4cb;
    --link-hover: #EEE;
    --input-borders: #86e1ff;
    --input-color: #3bbaff;
    --input-background: #041a29;
    --dice-color: darkorange;
    --title-color: #af31bb;
    --greentext-color: rgb(24, 242, 107);
    --pinktext-color: #d772e0;
}

.code {
    background: #02131f;
    overflow: auto;
    max-height: 400px;
}

.pages {
    border-radius: 0px 15px 0px 0px;
    color: #041a29;
    background: #27b3ff;
}

.pages a {
    color: #041a29;
}

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    background: linear-gradient(var(--background-top) 3em,var(--background-rest) 600px);
}

.post-button {
    border: 1px solid var(--post-outline-color);
    border-radius: 0px 15px 0px 15px;
}

.navbar {
    width: auto;
    right: 0;
    border: 1px solid var(--post-outline-color);
    border-radius: 0px 0px 0px 15px;
}

#postform {
    border: 1px solid var(--post-outline-color);
    border-radius: 15px 15px 15px 15px;
    padding: 10px;
}

.navbar a {
    color: var(--link-color);
    font-weight: 800;
    text-transform: uppercase;
}

.post-info {
    border: 1px solid var(--post-outline-color);
    border-radius: 0px 15px 0px 0px;
    box-shadow: 0px 0px 2px 0px #EEE;
    color: var(--highlighted-post-outline-color);
    background: var(--navbar-color);
}

.post-container {
    border: 1px solid var(--post-outline-color);
    border-radius: 0px 15px 0px 15px;
    box-shadow: 0px 0px 2px 0px #EEE;
    padding: 4px;
}

.post-container.op {
    border: 2px solid var(--post-outline-color);
    background: #041a29;
    
}

.post-container.op .post-info{
    color: #041a29;
    background: #27b3ff;
}

.post-file {
    border: 1px solid var(--post-outline-color);
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0px 0px 2px 0px #EEE;
    background: #27b3ff;
    margin: 3px;
    padding: 4px;
    color: #041a29;
}

.post-file a {
    color: #041a29;
    font-weight: 800;
}

.file-thumb {
    border: 2px solid var(--background-rest);
    background: var(--background-rest);
}

.op .post-links a {
    color: #041a29;
}

.op .postmenu{
    border-left: calc(2 * .5em * .866) solid var(--icon-color);
}

.collapse {
    background-color: var(--navbar-color);
    border: 1px solid var(--post-outline-color);
    border-radius: 15px 15px 15px 15px;
}

.label, .rlabel{
    background: #27b3ff;
    color: #041a29;
    border: 0;
}

.modal {
    border: 1px solid var(--post-outline-color);
    padding: 5px;
}

textarea {
    
    color: #27b3ff;
    border: 1px solid var(--post-outline-color);
}

th {
    color: #041a29;
}

.alt {
    background: var(--font-color);
}

.catalog-tile {
    border: 1px solid var(--post-outline-color);
    border-radius: 0px 15px 0px 15px;
    border-top: 0;
    padding-right: 0;
}

.no-m-p {
    padding: 5px;
}

.post-check {
    top: -3;
}

.catalog-thumb {
    box-shadow: 0px 0px 3px 0px var(--highlighted-post-outline-color);
}

.stickynav {
    border: 2px solid var(--post-outline-color);
    border-radius: 15px 0px 15px 0px;
    padding: 2px;
    margin-right: 5px;
    margin-bottom: 5px;
}

[New Reply]

[Index] [Catalog] [Banners] [Logs]

9 replies | 2 files | 10 UIDs

Connecting...

Captcha:

JavaScript is disabled — solve this captcha instead:

/g/ - Technology

What's your setup?

Actions:

Captcha: