/css/ - Yotsuba B for Endchan v1.1

Name
Email
Subject
Comment
Password
Drawing	x size canvas
File(s)	Drag files to upload or click here to select them
Spoiler

Yotsuba B for Endchan v1.1 Anonymous 04/04/2017 (Tue) 23:04:00 [Preview] No. 2

https://pastebin.com/K71QZ3GW

This stylesheet was made for Endchan as an attempt to mimic the popular Yotsuba B theme used in other imageboards like 4chan and 8chan.

Please note that LynxChan (the engine Endchan runs on) is a work-in-progress, and this stylesheet uses many "hacks" to modify HTML elements that currently lack unique IDs or classes. Eventually this stylesheet will need to be modified or rewritten to reflect forthcoming changes to the software Endchan uses.

Hopefully OdiliTime will just make this the default theme for Endchan.

This stylesheet has been tested only on Firefox and Chrome. This has been made for Endchan but should theoretically work in other instances of LynxChan.

Please post in this thread for any glitches you come across and any improvements that could be made.

Anonymous 04/05/2017 (Wed) 01:22:03 [Preview] No. 9 del

Do note this CSS hides a few Endchan-specific "features" for the sake of minimalism (simplicity) and closer mimicry to 4chan/8chan. Remove the below line numbers (corresponding to the pastebin) to un-hide features that you want back for your customized CSS.

Preview links are hidden (lines 134-135):

/* hide post Preview links */
.linkPreview {display: none;}

Del links are hidden (lines 137-138):

/* hide del */
a.delLink, a[href="#bottom"] {display: none !important;}

Hide User are hidden (lines 143-144):

/* hide Hide User */
a[id^="hide"][id*="User"] {display: none;}

[X] is changed to [--], moved to far left like in 8chan (lines 146-168):

/* Replace [X] with [--] and move it far left like in 8chan */
.opHead a[id^="hide"] {
  color: transparent;
  visibility: hidden;
}
.opHead a[id^="hide"][id*="Thread"]::after {
  color: initial;
  content: "[--]";
  text-decoration: underline;
  visibility: visible;
  float: left;
}
/* move OP backlinks (reply ID links) leftwards to make up for hiding [X]  */
.opHead .panelBacklinks a {position: relative; right: 2em !important;}
 
/* move reply backlink leftwards for similar reason, be more like 4chan/8chan */
.innerPost .panelBacklinks a {position: relative; right: 0.5em !important;}
 
/* reduce backlinks padding-left from 0.5em like in 4chan */
.panelBacklinks a {padding-left: 0.4em;}
 
/* Hide all [X] post hiders (not including OP) */
.innerPost a[id^="hide"] {display: none;}

Anonymous 04/05/2017 (Wed) 01:56:44 [Preview] No. 10 del

Good work anon - testing it out on >>>/res/ right now.

Anonymous 04/05/2017 (Wed) 22:51:14 [Preview] No. 13 del

>>9
>Hide User are hidden (lines 143-144):
When I delete this "hide user posts" still isn't there. What might be causing this?

Anonymous 04/06/2017 (Thu) 00:28:46 [Preview] No. 14 del

>>13
I forgot to make some selectors more specific.

For now do the following

Change (line 147) from:

.opHead a[id^="hide"] {

.opHead a[id^="hide"][id*="Thread"] {

Change (line 168) from:

.innerPost a[id^="hide"] {display: none;}

.innerPost a[id^="hide"][id*="Post"] {display: none;}

By changing those two lines, the removal of lines 143-144 should bring back Hide User Posts properly.

I recommend making Hide User slightly less distracting by reducing its font size by adding:

/* Reduce Hide User font size */
a[id^="hide"][id*="User"] {font-size: 0.85em;}

For the next revision I plan to format the stylesheet better so that the removal of featuring-hiding lines like these is a little more straightforward. I also want to make some adjustments to the catalog page as well as try to fix the inconsistent font sizes in the iPhone's Safari browser. I want to get these bugs fixed before I start making the other color schemes (regular Yotsuba and Yotsuba Green).

Anonymous 04/06/2017 (Thu) 00:49:03 [Preview] No. 16 del

Also since you're using ID's I suggest adding the following lines to make them more pleasant to look at:

/* Beautify poster IDs 4chan style*/
.labelId {
  padding: 0 5px;
  border-radius: 20px;
  font-size: 0.85em;
}

odilitime Root 04/08/2017 (Sat) 04:48:48 [Preview] No. 17 del

>>2
Just noticing this thread now. Best to notify us in >>>/operate/ . I'll port as much of this as I should into the default and make the other stuff an option. It should give the best of both worlds. Great work on documenting this sheet, it's really helpful and has help me promote this to default.

Also I'll work on some better selectors. I'm all ears if you have specific suggestions.

Also there's repo that you can fork and submit pull requests: https://gitgud.io/InfinityNow/8TailedLynx

EDIT: deal with my dyslexic ass ass

Edited last time by odilitime on 04/08/2017 (Sat) 04:49:59.

Anonymous 04/24/2017 (Mon) 07:33:51 [Preview] No. 18 del

>>17
tried to work on this but my laptop just isn't co-operating. Sorry for the delays

Anonymous 05/26/2017 (Fri) 18:48 [Preview] No.19 del

>>16
fixed
/* Beautify poster IDs 4chan style*/
.labelId {
padding: 0 5px;
border-radius: 20px;
font-size: 0.85em;
color: white;
}

odilitime Root 05/31/2017 (Wed) 06:07 [Preview] No.20 del

After cleaning up some of the HTML/CSS for mobile on the homepage. I also started to added this as a layout and color option.

I'll need to import these updates still. Then I'll likely bring what I want into the main CSS and fix up the rest.

Thanks again, great work.

Anonymous 09/12/2017 (Tue) 01:10 [Preview] No.21 del

To push [Last 50 Posts] leftwards, add

.linkLast50 {position: relative; right: 1.4em;}

To just remove it, add

.linkLast50 {display: none;}

Anonymous 09/12/2017 (Tue) 01:20 [Preview] No.22 del

>>19
That doesn't really fix anything. They should make LynxChan automatically set font color to white if background has dark color and font color to black if background has light color like in 4chan.

Anonymous 09/12/2017 (Tue) 01:22 [Preview] No.23 del

>>18
What? I don't have a laptop.

Posting mode: Reply