0bd4b8 No.37373
Can we get one thread for all custom css/js that people have implemented? I didn't see any listed on /operate/, i know there used to be a couple floating around
please share any custom css/js you have added to 8ch.net. include comments so people know what it does, for example, a js snippet that would go in the [user JS] section:
/* ----------set all pages as default -------*/
if (active_page == 'index' && document.location.hash != '#all') {
document.location.hash += '#all';
}
implements "infinite" scrolling (though 8ch's version of it is slow and buggy)
for css which would go on the [theme] section of the options, for example:
/* video element - fixes webm hover */
div video {
top: 50px !important;
left: 50px !important;
position: absolute;
}
which moves the webm hovered video to top left and lowers it (since the existing webm hover cuts off the top if you have the board list on)
0bd4b8 No.37378
a couple others i have
this removes text in the links on the top bar
/* remove text in board top bar */
$('document').ready(function () {
$('span[data-description="0"]').children('a').each(function()
{
$(this).contents().filter(function(){
return (this.nodeType == 3);
}).remove();
})
});
self-explanatory
/* change options to wrench icon */
/* other icons: fa-cogs, fa-gear, fa-wrench */
$('a[title="Options"]').addClass("fa fa-wrench");
$('a[title="Options"]').empty();
26ff90 No.37381
>>37373
Great idea, i was planning on doing something similar to this. But i guess you beat me to it.
Here's some css that i've been using for awhile to make reading threads in the catalog a bit more enjoyable. Pic related is what it looks like.
/* better centers the catalog, increases max height for threads in the catalog, and increases max height for images in the catalog */
.theme-catalog div.threads {
text-align: center;
margin-left: 0px;
}
.theme-catalog div.grid-size-small {
min-width: 140px;
max-width: 140px;
max-height: 50%;
}
.theme-catalog div.grid-size-small img {
max-height: 50%;
max-width: 95%;
}
/* better centers the catalog, increases max height for threads in the catalog, and increases max height for images in the catalog */
0bd4b8 No.37383
>>37381
yeah i posted on the webm thread about having this kind of thing going and decided to just create one
this one moves the post menu to the left of post/image, and allows a double-click to hide threads
0bd4b8 No.37384
>>37383
and forgot code
/* filter arrows */
a.hide-thread-link {
display: none
}
div[id^='op_'] p.intro {
position: relative
}
div[id^='op_'] a.post-btn {
position: absolute;
left: 0;
/*font-size: 1.2em;*/
transform: translate(-1em,0.24em)
}
div.thread div.file {
position: relative;
z-index: 1
}
div.reply div.file {
position: relative;
z-index: 0
}
.post-menu {
position: relative;
margin-left:-20px;
z-index: 2
}
26ff90 No.37466
>>37381
Here's another piece of code I've been using to make the boards list look a bit better.
/* adds an underline to search & global statistics */
.box-title {
border-bottom: 1px solid black;
background: #98E;
color: #000333;
font-size: 120%;
font-weight: bold;
padding: 4px 8px;
}
/* adds an underline to search & global statistics */
/* adds border to each individual table cell in the boards list */
table.board-list-table .board-uri {
border: 1px solid black;
max-width: 196px;
}
table.board-list-table .board-title {
border: 1px solid black;
width: auto;
}
table.board-list-table .board-pph {
border: 1px solid black;
width: 55px;
padding: 4px;
}
table.board-list-table .board-unique {
border: 1px solid black;
width: 100px;
padding: 4px;
}
table.board-list-table .board-tags {
border: 1px solid black;
position: relative;
height: 15px;
width: auto;
padding: 0 15px 0 4px;
}
table.board-list-table .board-max {
border: 1px solid black;
width: 90px;
padding: 4px;
}
/* adds border to each individual table cell in the boards list */
/* collapses the boards list table */
table.board-list-table {
border-collapse: collapse;
display: table;
margin: 0px;
margin-bottom: 10px;
overflow: hidden;
table-layout: fixed;
}
/* collapses the boards list table */
/* adds full border to "click to load more" */
tbody.board-list-omitted #board-list-more.board-list-hasmore {
border: 1px solid black;
cursor: pointer;
}
/* adds full boarder to "click to load more" */
673b57 No.37655
k
/* Make the boardlist scroll properly on all pages regardless of whether it line-wraps */
.boardlist {
margin: 0 -8px;
position: sticky !important;
}
body {
padding-top: 0 !important;
}
/* How to hide the ads if you're a jew but too much of a pleb to use uMatrix */
.ad-banner, #\38 ch-bottom {
display: none !important;
}
/* Makes the thread header 2 columns to waste less vertical space */
.board_image, .board_image + header, .banner {
float: left;
clear: left;
width: 30em;
}
#post-form-outer {
text-align: initial;
margin-top: 12px;
}
673b57 No.37659
jesus fuck I really need to go write a thing to auto-prune localStorage.own_posts
JSON.parse(localStorage.own_posts).tech.length
1010
5b885d No.37704
how do I get this shit working on my board?
It works when I go to "theme" in options, but not when I put it in stylesheet on my board.
Also, can you have custom javascript on a board?
I might have asked this already somewhere else
ef6cb3 No.37742
Board owners: How to make your own emoji
1. Choose an existing emoji supported by twemoji. This emoji will be replaced and can no longer be used.
Supported emoji: https://twitter.github.io/twemoji/preview.html
For the purposes of this tutorial, I've chosen 💩
2. Prepare your new emoji image. It can have any width/height you wish, and it can even be an animated GIF. Make sure it has a transparent background, if required.
Upload your image to Imgur.
For the purposes of this tutorial, I've chosen https://i.imgur.com/ZujjsSO.gif
3. In your board's CSS, append the following code:
img[class="emoji"][alt="💩"] {
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://i.imgur.com/ZujjsSO.gif) no-repeat;
width: 58px;
height: 119px;
padding-left: 58px;
}
There's a few things you need to change to the code:
- Change 💩 for the emoji you chose in step 1
- Change https://i.imgur.com/ZujjsSO.gif for the Imgur link you got in step 2. Make sure you're using a HTTPS link; 8chan won't let you use the default HTTP one.
- Change the width and padding-left attribute values to the exact width of the image, and the height value to the height.
4. Add a wordfilter for your new emoji. In my case, I would use something like :weedman: → 💩
5. Save changes, and enjoy your new meme! Note that since custom CSS isn't applied while you're in mod.php, you'll need to go to the board directly to see the emoji.
25eaf3 No.37749
>>37704
>how do I get this shit working on my board?
was there any particular piece of code in this thread that wasn't working for you? I just copy & pasted this >>37381 into the /operate/ stylesheet, and it seems to be working fine.
Also keep in mind that custom css isn't visible when you're in mod.php, so that may also be your problem
>can you have custom javascript on a board?
no. And its likely to stay that way in infinity next >>>/next/967
5b885d No.37755
>>37749
>Also keep in mind that custom css isn't visible when you're in mod.php, so that may also be your problem
That might be it…although it's still not working
Just wondering, why doesn't it show up?
I'm pretty sure I entered it in right? When I go to log.php the css shows up, but not on the board itself
e55dcc No.37757
673b57 No.37766
>>37659
Okay I got bored and did it. It runs when you go to /catalog.html and ignores locked threads (i.e. tech's sticky). Removed 450 post IDs on my end.
This probably doesn't work in webkit browsers because they're shit at JS
window.active_page == 'catalog' && (function purge_own_posts(bn) {
"use strict";
var own_posts = JSON.parse(localStorage.own_posts);
if ( !( bn in own_posts) )
return;
var oldest_living_thread = Math.min( ... Array.filter(
document.getElementsByClassName('mix'),
x => x.dataset.locked != 'true'
).map(x => x.dataset.id));
console.debug('Removing %d posts',
own_posts[bn].filter(x => x < oldest_living_thread).length);
own_posts[bn] = own_posts[bn].filter(x => x >= oldest_living_thread);
localStorage.own_posts = JSON.stringify(own_posts);
})(window.board_name);
25eaf3 No.37767
>>37755
>although it's still not working
Could you please show me what piece of code you're using.
5b885d No.37773
>>37767
Okay I got it working again.
Sorry to keep on bothering you, but why can't we have custom css when we're modding the board?
I think that it would be nice feature for board owners
25eaf3 No.37774
>>37773
>custom css
I'm assuming you mean custom javascript here right?
5b885d No.37776
>>37774
no actually custom css while in mod.php
25eaf3 No.37787
>>37776
mod.php? actually used to carry css over. The reason it doesn't now, is if you made a mistake with your css like * { display: none; }. Its also useful for boards like /tex/, or any board that uses css tricks to make posting impossible.
78a03c No.37801
I wrote this, a formatting toolbar for the comment box, which looks like >pic. Because fuck trying to remember all the formatting rules.
Source code too long, so here's the pastebin: http://pastebin.com/dXYSryqQ
or, if you trust me, load this from my dropboxload_js("https://dl.dropboxusercontent.com/s/q3swugl8mvvyzpc/8chan%20formatting%20tools%20minified%20source.js");
5209c2 No.37980
>>37787
SWF localStorage exploit detected. Your settings will be wiped.
fuck. why?
25eaf3 No.38043
I hope you don't mind op, but i think i'm gonna sticky this thread for awhile.
a15671 No.38068
>>37378
This looks so much cleaner.
7f456b No.38119
As someone who knows absolutely nothing about css, is there something to center the starred boards and home-irc buttons
25eaf3 No.38122
>>38119
Do you mean center the contents of the top bar? like this board here: >>>/cyber/
7f456b No.38146
>>38122
yes
also how do you see a certain boards css
25eaf3 No.38169
>>38146
let me know if this works, just copy & paste it in your user stylesheet:
div.boardlist {
text-align: center;
}
>also how do you see a certain boards css
you search for this: https://8ch.net/stylesheets/board/kind.css just make sure to change "kind" to the board you want.
7f456b No.38170
>>38169
nope and it breaks >>37378 'remove text next to links' bit
25eaf3 No.38197
>>38170
could you try removing any and all css/js you have and just use the "remove text next to links" js & the css here: >>38169
that might fix it.
c1cead No.38274
>>37742
this is very nice and all but it doesnt work with my board css
on the left is with yotsuba, on the right is mine, I have no idea what is causing this
7f456b No.38311
File: 1443766331342.png (89.22 KB, 1083x477, 361:159, 2015-10-01-230823_1920x108….png)
>>38197
>>38197
everything removed and still breaks it and makes it so i cant reply [it breaks the captha and quick reply floating window]
e4460a No.38594
>>38311
the div.boardlist should go into your custom css section(ie in the theme section), not the user js section
>>38043
not at all, was hoping for a sticky
c88440 No.38781
I know this isn't a Q&A thread but I have a question (which /boards/ did not answer in their CSS thread)
When posting a short comment + video/image, the word wrapping can be pretty terrible.
A narrow column of words, only a couple per line.
Examples: >>>/mu/55113 >>>/film/3034
Or, one word stuck above the image and the rest of the comment below it.
Examples: >>>/mu/55042 >>>/film/5769 (click through if the preview looks okay)
Has anyone tried to fix this sort of thing with CSS, if it's even possible?
c88440 No.38782
cd4724 No.38783
.file { max-width: 100%; }
All pages. Fixes stupid shit where the image gets bigger than the screen when you show full size.
18cf63 No.38799
For resizing images
If you have a monitor with a shitty resolution and the giant thumbnails get annoying, especially for multi file uploads try this
/*images*/
div.post.reply img.post-image{
max-height: 155px !important;
max-width: 155px !important;
width: auto !important;
height: auto !important;
}
div.post.reply div.file.multifile p.fileinfo{
width: 155px !important;
font-family: calibri !important;
font-size: 8pt !important;
}
div.post.reply div.file.multifile{
width:auto !important;
min-width: 175px !important;
max-width: 100% !important;
}
div.file.multifile img.post-image{
width: auto !important;
height: auto !important;
max-height: 200px;
max-width: 200px;
}
div.file.multifile p.fileinfo{
width: 200px;
font-family: calibri;
font-size: 8pt ;
}
div.file.multifile{
width:auto !important;
min-width: 175px !important;
max-width: 100%;
}
If you want to hide fileinfo and only show it when you hover over it
/*file-info*/
p.fileinfo{
opacity:0 ;
height: 10px;
}
p.fileinfo:hover{
opacity: initial !important;
height: initial !important;
}
here's the before and after comparison
2124fd No.38806
div {
text-transform: uppercase;
color: cyan;
text-shadow: 2px 2px red;
transform: rotate(0.61803398875deg);
transform: skew(0deg,0.61803398875deg);
}
h1 {
color: red;
text-shadow: 2px 2px cyan;
}
>>>/rootneg15/
e81397 No.38844
Is there a script to filter flags out there?
18cf63 No.38846
>>38844
what do you mean? Do you just want to hide flags or hide posts that use flags?
I don't know how to do the latter, but if you just want to hide flags
img.flag{
display: none;
}
0c1b39 No.38950
Is there a way to get the catalog to display the title and text like halfchan? Having to click in a catalog item and scroll is a waste of time and energy
2af903 No.40212
>>37742
this seems to work but the resulting emoji has the original one (💩) superimposed over it and resized to the size of the new custom one. Did you set this up to troll everyone so all the emojis would come out with a shit face or am I just retardded and did it wrong>?
c1034d No.40286
>>40212
adding
visibility:hidden;
should do the trick I guess
334935 No.41110
Newfag board owner here
How the fuck do I make my board's CSS different? How can I change what color bold and italics are?
2574ab No.41390
>>41110
(b or i) {
color: $TEXTCOLOR
}
Where $TEXTCOLOR is whatever hex color/rgb triplet/web color name you want.
c42328 No.41562
How can I make my mouse pointer still visible when I hover over images with image hover turned on?
e3ffb5 No.41702
>>41390
I tried imputing
b{
color: $#FF0000
}
but it didn't do anything
52d468 No.41794
@keyframes niggercuck {
from {color:red;background-color:black;}
to {color:yellow;background-color:red;}
}
*:before {
content: "Freddit Breddit Can Suck Balls!!1";
}
* {
animation-name: niggercuck;
animation-duration: 0.1s;
animation-iteration-count: infinite;
}
52d468 No.41795
>>41794
add this to operate
52d468 No.42005
5f7d9c No.42128
is there any way to use css to make a certain tripcode user's posts not show, or have the css mess with the posts somehow
c37548 No.42396
If you favorite many boards you'll get annoyed because the bar becomes too thick. This CSS keeps the bar at the top of the page. It doesn't scroll with you.
div.boardlist {
position: relative !important;
}
c37548 No.42397
>>42128
That's certainly possible with JS.
afde30 No.42487
>>42396
[code]
$("span.poster_id:contains('5f7d9c')").parent().parent().hide()
[code]
ee0e65 No.42744
here's a theme, mostly a high contrast dark scheme with rounded edges (you can remove the rounded edges very easily by changing border-radius)
http://pastebin.com/1KctX9Hf
28ac0c No.42828
Here is a "why isn't this the default" css.
div.post p {
overflow: hidden;
}
It prevents text from displaying outside of its line.
913714 No.43246
>>42487
rice dat shit mang
$('.poster_id:contains(5f7d9c)').closest('.post').remove()
>>42828
And this:
div.post { min-width: 40vw }
to fix the retarded "two words per line" thing next to a thumbnail
d5c096 No.43500
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:rgba(92,55,3,.1)}::-webkit-scrollbar-thumb{background:rgba(230,160,39,.3)}input,select,textarea{background-color:#362002;color:#E6A027;border-color:#E6A027}input[type=password],input[type=text],textarea{border:1px solid #E6A027}body{background:#381E00;color:rgba(230,160,39,.86)}div.post.reply{background:#362002;font-family:monospace;font-size:10px;border-style:dashed;border-color:#D49324;border-width:2px}a,a:visited{color:#FFA712}div.post.reply.highlighted{background-color:#2B1600;color:#F0B11F;border-style:dotted;border-width:3px}span.trip{color:#FFB700}.intro span.name{color:#ddba10;font-weight:700;font-family:helvetica}.desktop-style div.boardlist:not(.bottom){box-shadow:0 1px 2px rgba(66,39,0,.74);color:#422700;background-color:#3D2502}.options_tab_icon,div.post.reply div.body a{color:#E6A027}#alert_div,#options_div{background-color:#452902;border:3px solid rgba(209,135,45,.75)}.box{background:#5C3703;border:1px solid #5C3703;color:#00FF2B}.box-title{background:#2C2C2C;color:red}table thead th{background:#5D5D5D}table tbody tr:nth-of-type( even ){background-color:#303030}table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell{background:#303030}tbody.board-list-omitted td{background:#5D5D5D;border-top:1px solid #000333}table.board-list-table .board-uri .board-sfw{color:#0BAD00}form table tr th{background:#3D2502}.intro span.subject{color:#BA8C00;font-weight:bold;font-size:110%}.theme-catalog div.thread:hover{background:#3D2502;border-color:#BC0000}div.banner{color:#FFBC47;background-color:#3D2502}div.blotter{color:#E69027}.intro a.email span.name,.quote{color:#E6E600}h1,header div.subtitle{color:#E6A027;font-family:helvetica;letter-spacing:0}span.heading{color:#FFB114}div.post.reply.inline .body{margin-left:.3em;padding-right:.2em}.inline{opacity:1;margin:.2em 4px;padding:.2em .3em .5em .6em;display:table;max-width:94%!important;border:1px dashed red!important}
#quick-reply table {
border-collapse: collapse;
background: rgba(143, 90, 15);
border-style: dotted;
border-width: 3px;
border-color: rgb(212, 147, 36);
}
div.post div.body{font-size:105%;font-family:monospace}
post results, r8, h8
2c17be No.43839
is there a way to only see 2 replies per thread in the index
1a96ee No.43890
>>43839
you're gonna need javascript for that because a code like this
.thread .post.reply:nth-last-child(2n+7) {
display: none !important;
}
would keep replies hidden when in thread.
Also here's a /pol/ theme I made
http://pastie.org/private/repnfhamsay5sorwdv5rkq
738b81 No.45173
2c17be No.45180
>>45173
missing karmadecay (good for source porn threads)
c6f8d8 No.45346
965908 No.45887
If anyone is around in this thread can anyone tell me how to implement my own CSS. I went into the Config menu for my board and just c/p'd the CSS here: https://spit.mixtape.moe/view/raw/87f7700f
However, when I hit save changes and load up my board again I see literally no changes. Sorry I'm not exactly familiar with how this works. Lol
7b2a2e No.45903
c0d24e No.46468
e9fed4 No.46587
This counts the number of images in the thread correctly.
The current one doesn't account for multi-image posting or the images OP started his thread with.
It doesn't work in the catalog (doesn't count op's images), but oddly enough it counts the images in the replies correctly./*correctly displays the image count*/
$('document').ready( function () {
var threadNum = (document.location.pathname + document.location.search).split('/');
threadNum = threadNum[threadNum.length -1].split('+')[0].split('.')[0];
var replies = $('#thread_'+ threadNum +' > div.post.reply:not(.post-hover):not(.inline)');
//images in OP
var threadStart = $('#thread_'+ threadNum +' > div.files');
var threadFiles = threadStart.find(' > .file');
var first = threadFiles.length;
//images in replies
//finds all replies with images.
var imgReplies = replies.filter(function(){
return $(this).find('> .files').text().trim() != false;
});
//gets the number of images in each reply
var imgCounts = imgReplies.map( function () {
var files = $(this).find('> .files');
//console.log(files);
return files.find(' > .file').length;
});
//sums up the number of images.
/*will use reduce function later for cleaner code*/
var count = 0;
for(var i = 0; i < imgCounts.length; i++){
count += imgCounts[i];
}
//adds number of images from replies and first post together.
$('#thread_stats_images').text(count + first);
});
Sorry if it's messy
e9fed4 No.46592
>>46587
okay, I figured out the odd display on the catalog.
For some reason, the catalog image reply is calculated differently than the thread image reply.
So my code isn't doing shit there, like it should.
So it almost calculates it correctly, but for some reason it doesn't want.
This is something from the php. I think here:
https://github.com/ctrlcctrlv/infinity/blob/f9a7bac6f03ad87913aa32cb4964743e5a67900e/templates/themes/catalog/theme.php line 62.
I don't know php, so I don't really know how to fix it.
Also, the index displays things correctly because it's also from php.
f87b14 No.46605
Dumping my current css also the one in >>43246 is broken
/* Make the boardlist render properly regardless of line-wrapping */
@supports (position: sticky) {
.boardlist {
margin: 0 -8px;
position: sticky !important;
}
body {
padding-top: 0 !important;
}
}
/* Make the thread header waste less vertical space */
.board_image,
.board_image + header,
.banner {
float: left;
clear: left;
}
#post-form-outer {
text-align: initial;
margin-top: 12px;
}
/* Make catalog hovers readable on all themes */
.theme-catalog .thread:hover {
background-color: rgba(0,0,0,0.1) !important;
border-color: rgba(0,0,0,0.2) !important;
}
/* Make posts with images not squash the text */
.post.has-file.body-not-empty,
.post pre {
min-width: 40vw !important;
}