Skip to content

Styling Guide

Jump to bottom Edit New page
Johnny edited this page Jul 28, 2019 · 51 revisions

Looking to port your userstyle from a v2-based fork to the current 4chan X? See here to see how selectors have changed.

General
Document Classes
Header
Notifications
Quick Reply
Settings
Menu
Posts
Selector Reference

General

First things first: You're going to need a general knowledge of CSS in order to style 4chan X.

To view the basics of CSS, you can start with the CSS syntax article on w3schools.com and working your way through. When you feel pretty comfortable, you can use the Mozilla CSS reference page for anything you need to know about CSS.

Once you have the basics down, you can write some CSS with a userstyle manager like the Stylus extension (for Firefox and Chrome). See the Stylus wiki for tips on writing your first userstyle.

Document Classes

4chan X, like many other modern websites, adds many different classes to the document based on the options.

You can add these classes to the beginning of your CSS selectors with :root.class

If you open your browser's element inspector (usually Inspect Element on right click of any page), you can see 4chan X's classes on the document, which is the <html> element.

Here's an explanation of some of the general classes 4chan X adds:

  • All v3 based 4chan X forks add a fourchan-x class to the document. You can use this if you want to support more than just 4chan X, like if 4chan Plus had a #qr that needed different styling from 4chan X's.
  • ua-gecko, ua-blink, ua-webkit, and ua-edge are added to the document depending on the web browser engine being used. For example, gecko would be added for Firefox, blink for Chrome, webkit for Safari, and edge for MS Edge.
  • Theme classes are added depending on the user's choice of theme from the style selector. These are: yotsuba, yotsuba-b, futaba, burichan, tomorrow, and photon.
  • index, thread-view, catalog, and archive are also added to the document to make things easier for you to style based on the type of page you're on.
  • sw-yotsuba and sw-tinyboard are added to the document depending on the type of software the site is running.
  • A data-host attribute (not class) is added to the document to indicate the site you are on by its domain name. Any leading "www." is truncated, and "4chan.org" is used for all 4chan domains.

Example:
:root.gecko.index #qr { background-color: black; }

  • This would make the background color of the Quick Reply black if you're on a board index and using Firefox.

Header

Document classes added:

  • autohide - Added if the header is set to auto-hide.
  • fixed - Added if the header is set to Fixed.
  • centered-links - Added if Centered Links is enabled to change the board list justification
  • top-header - Added if Bottom Header is disabled, and thus the header is at the top of the page.
  • bottom-header - Added if Bottom Header is enabled, and thus the header is at the bottom of the page.
  • shortcut-icons - Added if Shortcut Icons is enabled, and thus the header uses icons from Font Awesome for the shortcuts.

If you're porting a userstyle from an older 4chan X, the header is probably going to be the most noticeable thing that breaks, and might take the most rewriting. You should take advantage of the document classes to move content up or down in your userstyle if you need to.

You'll also probably notice that the header is given the class .dialog. This class is used by 4chan X to style all the floating dialog elements at once. Use this to your advantage!

#header-bar has these children: #board-list, #shortcuts, #scroll-marker, and #notifications (unless Bottom Header is disabled, in which case #notifications is outside #header-bar).

Board List

  • This is the container for the Custom and Full board lists. Whichever one is not showing is set to [hidden].
  • Links in either board list that match the current board are given the class .current.
  • Full board list will have a link .hide-board-list-button that looks like [-], clicking this shows the custom board list. In the Custom board list, toggle-all in Custom Board Navigation becomes a [+] .show-board-list-button link that will show the Full board list, as well.
  • You should try to only style #board-list, that way styling stays the same depending on the list the user chooses to show.
  • The brackets around shortcuts when Shortcut Icons is disabled, as well as other brackets added around links by 4chan X, are added as .brackets-wrap::before and .brackets-wrap::after for easy removal in userstyles.

Shortcuts

  • This consists of many .shortcut elements and is set to float: right;
  • The [EAI] shortcut will have a lower opacity and the class .expand-all-shortcut when images are not expanded, and a higher opacity and the class .contract-all-shortcut when images are expanded
  • The [QR] shortcut, .qr-shortcut, toggles its opacity and the disabled class depending on if the Quick Reply is shown or not.
  • The [Settings] shortcut, #settings-link, was inside the menu in other 4chan X forks.
  • Inside threads, with Updater and Stats in Header enabled, #updater and #thread-stats will be placed in the header as shortcuts. You should try to leave the position up to the users.
  • The last shortcut is always .menu-button, the menu of the header which contains a few extra options. The triangle in the <span> element is not a character but instead a trick with border-radius.

Scroll Marker

You should leave this alone. The scroll marker lets 4chan X know where to scroll for unread posts. It is not a visible element.

Notifications

See Notifications.

Notifications

#notifications only has one child: .notifications, which is given a second class depending on the type of notification:

  • .success: Green background. This is used for "Post successful!" and "____.png uploaded!" type of notifications.
  • .info: Blue background. This is used for general info notifications, such as if an update to 4chan X was found.
  • .warning: Orange background. General errors, like 'No file selected.' and connection error notifications.
  • .error: Red background. This is for when things go horribly wrong! Hopefully you never see this.

Quick Reply

For the current HTML of the Quick Reply, see:

https://github.com/ccd0/4chan-x/blob/master/src/General/html/Features/QuickReply.html

The images below are somewhat out of date.

Note: When the QR is closed with the close button, it is not removed from the DOM, but instead given the hidden attribute.

#qr is given a few different extra classes:

  • .has-captcha if the user is not using a 4chan Pass. If you are specifying the height of different elements in the Quick Reply, they might need to be changed for 4chan Pass users.
  • .captcha-v1 or .captcha-v2 depending on whether you're using Recaptcha v1 or v2.
  • .noscript-captcha if you're using the non-Javascript captcha.
  • .captcha-open if you're using Recaptcha v2 and have the captcha section of the QR open.
  • .forced-anon if you're on a forced-anonymous board.
  • .has-spoiler if you're on a board that supports file spoilers.
  • .focus if any input in the QR is focused. This can be used if you want to create your own functionality for the QR, such as how 4chan Style Script's Fade Post Form option works.
  • .autohide if the auto-hide checkbox is checked.
  • .dump if the dump list is open.
  • .reply-to-thread if you're replying to a thread rather than starting a new one.
  • .sjis-preview if Mona font (for SJIS art) is turned on in the QR comment.
  • .tex-preview if the [math] and [eqn] tags are being previewed with the TeX Preview button.

The QR is made up of a few different things.

  • The top bar is the .move. It lets the user drag around the QR.
  • The form contains everything else. .persona contains the #sjis-toggle and #tex-preview-button buttons to preview [sjis], [math], and [eqn] tags on boards that have them, as well as the .field inputs for name, email, and subject.
  • #qr-filename-container does have a close button. You need to enter a file into it to get it to show.

Settings

There shouldn't be anything extra to explain here. You might need to style <fieldset> elements if porting your userstyle from v2. Make sure that #overlay and #fourchanx-settings always have a higher z-index than anything else.

Menu

Style the menu through .dialog instead of #menu for consistency.

Every entry is given the class .entry.

Entries with submenus have the class .has-submenu and entries while hovered have the class .focused.

The submenu can be styled with .submenu if needed.

Posts

  • Your posts are given the class .yourPost, and given a red left dotted border when Highlight Own Posts is enabled
  • Posts that quote you are given the class .quotesYou when Highlight Posts Quoting You is enabled
  • When Quote Threading is enabled, replies to other posts are moved into different .threadContainer elements that have a left-border to create the lines.
  • You will need to style .hide-reply-button, .hide-thread-button, and .menu-button if needed. Remember that if you position .menu-button that your CSS does not affect the header's menu button. Try something like .reply .menu-button for positioning.
  • Replies are .reply, OPs are .op. These are wrapped in .replyContainer and .opContainer respectively. These containers are given the class .expanded-image if they contain an expanded image, and .noFile if Fappe Tyme is enabled and the post has no image.
  • #unread-line is added before the first unread reply. Change the color with border-color.

Selector Reference

Here you can find the names of some selectors that have changed. This is not a definitive list, and you should still use Inspect Element for any remaining problems, but you should be able to replace the old selectors to get rid of many issues in porting a v2 userstyle.

Old New  
#boardNavDesktop #header-bar The header
.hide_thread_button .hide-thread-button Thread hiding button
.hide_reply_button .hide-reply-button Reply hiding button
.menu_button .menu-button Menu button
.menu_button span .menu-button i First child of menu button
.settingsWindowLink .settings-link Settings link
#dump #dump-button QR dump toggling button
#stats #thread-stats Thread stats
.captchaimg .captcha-img Captcha image container
.userInfo .persona QR container for inputs
.captcha .has-captcha QR indicator for captcha presence
#imgControls label .expand-all-shortcut EAI shortcut
#navtopright #shortcuts Shortcuts
#spoilerLabel #qr-spoiler-label QR spoiler label
.favicon .watch-thread-link Watch thread toggle
Add a custom footer
Add a custom sidebar
Clone this wiki locally