/tech/ - Technology

Technology & Computing


New Reply
Name
X
Sage
Subject
Message
Files Max 5 files32MB total
Password
[New Reply]


鬼.gif (u)
[Hide] (264KB, 177x169)
This board desperately needs a CSS thread. Why the fuck have none of the retarded board owners given themselves custom spoilers? Why the hell do no boards have custom load bars? I had both of these on fatchan because a nice fellow made them for me when I requested it to Tom but Tom had better shit to do. As far as I can tell that's the only board on JSchan to have ever had custom spoilers or loadbars. What's your fucking excuse? Bunch of shitbird elitist faggots on this site can't even figure out custom spoilers. You're fucking plebs. Either kill yourselves or get in this thread and figure out how to do it for your boards on this site.
Also general CSS but I really wanted to stress that fuck you idiots you're slow and stupid.
7f1477215f31f04f171bb1ae3d906f971ec7259fefc3860bcd4dfaa2ad59c7d4.jpg (u)
[Hide] (799.9KB, 1637x1158)
My excuse is I wanted to have custom CSS but I was always too lazy to tinker with it because I am mostly incompetent and need guidance even though I know the basics.
Grabbed this template for custom .pdf pic off of fat. If you fucked with it a little I bet you could get it to do a fair bit more for other filetypes 
[code]
.attachmentimg[data-mimetype='application/pdf'] {
    background-image: url('/file/FILENAME');
}
[/code]
NIGGER
possible language: css, relevance: 11
.attachmentimg[data-mimetype='application/pdf'] {
    background-image: url('/file/FILENAME');
}
I'm struggling to figure out how to remove or decrease the margins at the top and bottom of the post content.
Replies: >>393 >>394
>>392
.post-message{
  margin-top:0.2em;
  margin-bottom:0.2em;
}

You can also put !important after the value to override any other styles.
Replies: >>395 >>2309
>>392
Never mind I got it
possible language: css, relevance: 8
.post-message {
    text-align: left;
    margin: 0em 0em;
}
>>393
oh fug :DD, thanks anyways anon
ctrl+shift+c.webm (u)
[Hide] (4MB, 1052x942, 01:57)
I wish I had a sexy voice so I could do a better version of this video.
Replies: >>617
Floating post action css

possible language: css, relevance: 17
#actionform {
    background: var(--post-color);
    bottom: 5px;
    left: 5px;
    position: fixed;
}Stolen from fat
Someone tell me there's a way to disable scrolling through thread OP's in the catalog with CSS, please for the love of god.
Replies: >>485
>>484

.catalog-tile:hover {
    overflow-y: hidden !important;
}
Replies: >>486
>>485
Thank you anon, you've saved my soul
>>396
`:root {
    --icon-color: invert(17%) sepia(89%) saturate(7057%) hue-rotate(2deg) brightness(93%) contrast(120%);
    --darken: #ffffff10;
    --board-title: #c5c8c6;
    --hr: #282a2e;
    --dice-color: darkorange;
    --title-color: #d70000;
    --greentext-color: green;
    --pinktext-color: #E0727F;
    --alt-label-color: darkblue;
    --alt-font-color: white;
    --background-top: #0294a5;
    --background-rest: #0294a5;
    --navbar-color: #c0c0c0;
    --post-color: #c0c0c0;
    --post-outline-color: #c0c0c0;
    --label-color: transparent;
    --box-border-color: transparent;
    --highlighted-post-color: #c0c0c0;
    --highlighted-post-outline-color: #c0c0c0;
    --font-color: black;
    --post-link-color: blue;
    --link-color: #fffff50;
    --link-hover: #555;
    --input-borders: #111;
    --input-color: black;
    --input-background: white;
    --name-color: #ddd;
    --capcode-color: #f00;
    --subject-color: #ddd;
}
.navbar {
    top: unset!important;
    bottom: -3px;
}
.navbar a:first-of-type::before {
    content: '';
    position: absolute;
    background: url(/file/win95home.png);
    background-size: contain;
    height: 1.75em;
    width: 1.75em;
    left: 7px;
}
.navbar a:first-of-type {
    padding-left: 30px;
}
.navbar a {
    color: #000;
}
.nav-item {
    margin: 2px;
}
.close, .filelabel, .nav-item, input[type=submit] {
    color: #000;
    background: 0 0;
    border: 2px outset #d3d3d3;
}
element.style {
    line-height: 1.5em;
}
.stickynav {
    top: 5px;
    bottom: unset;
}
#float .post-container, #livetext, #postform, #threadstats, .board-banner, .catalog-tile, .filelabel, .modal, .navbar, .op, .pages, .post-container:not(.op), .stickynav, .toggle-summary, table {
    border: 2px outset #d3d3d3!important;
}
.post-info {
    margin: -6px -6px 0;
    padding: 3px 5px 3px 3px;
}
#dragHandle, .post-info, th:not(.alt) {
    font-weight: 700;
    color: #ACFA58;
    background: #FA5858!important;
}
.post-name, .post-tripcode {
    color: #ACFA58;
}
body {
	background: url(https://zzzchan.xyz/file/9c1bd58d426a421ab80dd7cd21185366bd023128150b1bd2ea049054868075f1.png) bottom 0px right 20px fixed no-repeat, linear-gradient(var(--background-top) 3em,var(--background-rest) 230px);
} `
Made this for /v/ what do you guys think ?
Replies: >>618
>>617
Just fixed some stuff 
possible language: css, relevance: 312
:root {
    --icon-color: invert(17%) sepia(89%) saturate(7057%) hue-rotate(2deg) brightness(93%) contrast(120%);
    --darken: #ffffff10;
    --board-title: #c5c8c6;
    --hr: #282a2e;
    --dice-color: darkorange;
    --title-color: #d70000;
    --greentext-color: green;
    --pinktext-color: #E0727F;
    --alt-label-color: darkblue;
    --alt-font-color: white;
    --background-top: #0294a5;
    --background-rest: #0294a5;
    --navbar-color: #c0c0c0;
    --post-color: #c0c0c0;
    --post-outline-color: #c0c0c0;
    --label-color: transparent;
    --box-border-color: transparent;
    --highlighted-post-color: #c0c0c0;
    --highlighted-post-outline-color: #c0c0c0;
    --font-color: black;
    --post-link-color: blue;
    --link-color: #fffff50;
    --link-hover: #555;
    --input-borders: #111;
    --input-color: black;
    --input-background: white;
    --name-color: #ddd;
    --capcode-color: #f00;
    --subject-color: #ddd;
}
.navbar {
    top: unset!important;
    bottom: -3px;
}
.navbar a:first-of-type::before {
    content: '';
    position: absolute;
    background: url(/file/win95home.png);
    background-size: contain;
    height: 1.75em;
    width: 1.75em;
    left: 7px;
}
.navbar a:first-of-type {
    padding-left: 30px;
}
.navbar a {
    color: #000;
}
.nav-item {
    line-height: 3em;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    text-decoration: none;
}
.close, .filelabel, .nav-item, input[type=submit] {
    color: #000;
    background: 0 0;
    border: 2px outset #d3d3d3;
}
element.style {
    line-height: 1.5em;
}
.stickynav {
    top: 5px;
    bottom: unset;
}
#float .post-container, #livetext, #postform, #threadstats, .board-banner, .catalog-tile, .filelabel, .modal, .navbar, .op, .pages, .post-container:not(.op), .stickynav, .toggle-summary, table {
    border: 2px outset #d3d3d3!important;
}
.post-info {
    margin: -6px -6px 0;
    padding: 3px 5px 3px 3px;
}
#dragHandle, .post-info, th:not(.alt) {
    font-weight: 700;
    color: #ACFA58;
    background: #FA5858!important;
}
.post-name, .post-tripcode {
    color: #ACFA58;
}
body {
	background: url(https://zzzchan.xyz/file/9c1bd58d426a421ab80dd7cd21185366bd023128150b1bd2ea049054868075f1.png) bottom 0px right 20px fixed no-repeat, linear-gradient(var(--background-top) 3em,var(--background-rest) 230px);
}
.board-banner, .op {
    background: var(--post-color)!important;
}
.post-container.op {
    background: 0 0;
    border-color: transparent;
    width: 0%
}
Replies: >>620
>>618
Now this is truly the final version ultimate edition remaster remake, with added custom spoiler.
possible language: css, relevance: 344
:root {
    --icon-color: invert(17%) sepia(89%) saturate(7057%) hue-rotate(2deg) brightness(93%) contrast(120%);
    --darken: #ffffff10;
    --board-title: #c5c8c6;
    --hr: #282a2e;
    --dice-color: darkorange;
    --title-color: #d70000;
    --greentext-color: green;
    --pinktext-color: #E0727F;
    --alt-label-color: darkblue;
    --alt-font-color: white;
    --background-top: #0294a5;
    --background-rest: #0294a5;
    --navbar-color: #c0c0c0;
    --post-color: #c0c0c0;
    --post-outline-color: #c0c0c0;
    --label-color: transparent;
    --box-border-color: transparent;
    --highlighted-post-color: #c0c0c0;
    --highlighted-post-outline-color: #c0c0c0;
    --font-color: black;
    --post-link-color: blue;
    --link-color: #fffff50;
    --link-hover: #555;
    --input-borders: #111;
    --input-color: black;
    --input-background: white;
    --name-color: #ddd;
    --capcode-color: #f00;
    --subject-color: #ddd;
}
.navbar {
    top: unset!important;
    bottom: -3px;
}
.navbar a:first-of-type::before {
    content: '';
    position: absolute;
    background: url(/file/win95home.png);
    background-size: contain;
    height: 1.75em;
    width: 1.75em;
    left: 7px;
}
.navbar a:first-of-type {
    padding-left: 30px;
}
.navbar a {
    color: #000;
}
.nav-item {
    line-height: 3em;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    text-decoration: none;
}
.close, .filelabel, .nav-item, input[type=submit] {
    color: #000;
    background: 0 0;
    border: 2px outset #d3d3d3;
}
element.style {
    line-height: 1.5em;
}
.stickynav {
    top: 5px;
    bottom: unset;
}
#float .post-container, #livetext, #postform, #threadstats, .board-banner, .catalog-tile, .filelabel, .modal, .navbar, .op, .pages, .post-container:not(.op), .stickynav, .toggle-summary, table {
    border: 2px outset #d3d3d3!important;
}
.post-info {
    margin: -6px -6px 0;
    padding: 3px 5px 3px 3px;
}
#dragHandle, .post-info, th:not(.alt) {
    font-weight: 700;
    color: #ACFA58;
    background: #FA5858!important;
}
.post-name, .post-tripcode {
    color: #ACFA58;
}
body {
	background: url(https://zzzchan.xyz/file/9c1bd58d426a421ab80dd7cd21185366bd023128150b1bd2ea049054868075f1.png) bottom 0px right 20px fixed no-repeat, linear-gradient(var(--background-top) 3em,var(--background-rest) 230px);
}
.board-banner, .op {
    background: var(--post-color)!important;
}
.post-container.op {
    background: 0 0;
    border-color: transparent;
    width: 0%
}
:root {
    --attachment-img: url(/file/attachment.png);
    --spoiler-img: url(https://zzzchan.xyz/file/caea0c0853c7890bb66872c5acc25d2f167cbb72c1948b85843a6209a4f9c37a.png);
    --audio-img: url(/file/audio.png);
    --thumbnail-size: 250px;
    --captcha-w: 150px;
    --captcha-h: 150px;
    --bypass-height: 330px;
}
Replies: >>911
>>620
I wonder why the custom spoiler isn't animated. It was when I used that same spoiler on fat
Replies: >>912
>>911
Might be because the main.js config for zzzchan has animated thumbnails disabled.
Replies: >>913
>>912
Nope. Figured it out and it works now, try it out yourself.

`:root {
    --attachment-img: url(/file/attachment.png);
    --spoiler-img: url(https://zzzchan.xyz/file/892f0e19be86903095a88668849f0f0c844f960f43c27a38c455775c53f1c370.gif);
    --audio-img: url(/file/audio.png);
    --thumbnail-size: 250px;
    --captcha-w: 150px;
    --captcha-h: 150px;
    --bypass-height: 330px;
}`
last attempt

possible language: css, relevance: 32
:root {
    --attachment-img: url(/file/attachment.png);
    --spoiler-img: url(https://zzzchan.xyz/file/892f0e19be86903095a88668849f0f0c844f960f43c27a38c455775c53f1c370.gif);
    --audio-img: url(/file/audio.png);
    --thumbnail-size: 250px;
    --captcha-w: 150px;
    --captcha-h: 150px;
    --bypass-height: 330px;
}
Replies: >>918
Spoiler File (u)
(263.6KB, 600x600)
test
>>915
Going to do a little tweak.
language: css
:root {
    --attachment-img: url(/file/attachment.png);
    --spoiler-img: url(/file/892f0e19be86903095a88668849f0f0c844f960f43c27a38c455775c53f1c370.gif);
    --audio-img: url(/file/audio.png);
    --thumbnail-size: 250px;
    --captcha-w: 150px;
    --captcha-h: 150px;
    --bypass-height: 330px;
}
Replies: >>919
>>918
Nice that's a bit cleaner. I know there's a way, but I don't know what that way is, to address the loadbar and have something behind it when it's active, if you're interested in such a thing.
>building a bare bones personal website recently
>decide to try CSS grids because I'd heard they were useful from a classmate a couple years ago
>spend some time dicking around
>it just werks
It isn't a perfect solution for centring everything on every page, but it helps a lot and avoids a lot of the traditional stupid problems of raw CSS/HTML elements.  As long as you "pad" each grid with a row/column surrounding it, those rows/columns will resize as the page/viewport are resized.  It's very responsive and feels good.

I don't know if anyone will actually benefit from this revelation, but I just wanted to post about it since learning how to use these was a real eye-opener for me.  Infinitely better than using tables or stacking wrappers inside of each other.
Replies: >>1374
>>1343
Horizontal centering at least is very easy and doesn't need all that, you just do margin: auto or margin: x auto y auto where x and y are the top and bottom margins, and you're done. Vertical centering however is much trickier and there are multiple ways to do it depending on your content, so I don't know if using a grid makes it any easier.
Show us that website of yours.
Replies: >>1934
Loadbar

language: css
.post-file-src[style*='loading'] {
    background:url(/file/ENTERFILENAMEHERE) no-repeat center;
    background-size:150px
}
ClipboardImage.png (u)
[Hide] (59.8KB, 1074x663)
ClipboardImage.png (u)
[Hide] (33.1KB, 1276x421)
ClipboardImage.png (u)
[Hide] (35.7KB, 1290x577)
This is is late, but here's the front page of my website.  I'm aware the centering is actually messed up on this page (the white space to the right of the blog link is too large), but I'm going to fix that in the next major revision.  The red highlight in pic 2 is what happens when you mouseover, to show that those are tabs and not just labels sitting there.
plz no dox

>>1374
>horizontal centering
Yeah, but I enjoy having the CSS grids in place in case I need to make changes to the website later on down the line.  I just find them very easy to work with and very extensible, which I like better than just jamming raw HTML elements together.
>vertical centering
I use a CSS grid to "anchor" the elements I want to align, then usually a wrapper div in the grid panel, then content within that div.  The wrapper div is just display: flex; justify-content: center; vertical-align: center;.
Replies: >>1937 >>1977
>>1934
engineer is a protected title like doctor, only people with real engineering degrees can use it so stop using it
Replies: >>1938
>>1937
I have a diploma in software engineering.
Replies: >>1939
>>1938
go apply for  an engineering license then
>>1934
Genuinely looks like a child's website. Sorry anon.
Replies: >>1981
>>1977
still better than 99% of webshits bloated with javascums
Replies: >>1982
0bb3b58f55d8f7cf1a9da7e88efb9c86dbf2deb1368dd6acd5dc3596413d3a4f.jpg (u)
[Hide] (90.2KB, 652x647)
>>1981
What exactly is the problem with js besides 'bloat'? Or is that the only remittance? When does the bloat become a problem? If you ask me, the bigger consequence are those shitty new websites which require you to scroll a million times to get to the bottom of their embarrassingly cookie-cutter web pages.
Replies: >>1983 >>2002
>>1982
web 3.0 bad
Tokyo_Stabbing.jpg (u)
[Hide] (3.4MB, 5230x4563)
>>1982
Are you serious?
It's literal malware. Niggers inject arbitrary code onto your machine which you execute. You're literally running every fucking executable on the internet what the fuck nigger.

It's also a terrible language that can't be made to not be a horrible mess so even if what you were being served was open source (good luck parsing that shit yourself though it's endless copypasta of a million libraries poorly implementing the same thing) it'd be trivial for a hostile actor to obfuscate the fact that what they're serving you is malware, because there are a hundred thousand bugs and unintended consequences in javascript's implementation.
Replies: >>2289
>>2002
Not defending js, but isn't saying it is malware a bit far? The language itself isn't, but it is prone to vulnerabilities like you said.
>>393
>>393
>You can also put !important after the value to override any other styles.
Did not know this, thanks anon

36 replies | 9 files
Connecting...
Show Post Actions

Actions:

Captcha:

Instructions
- news - rules - faq -
jschan 0.1.5