Styling Guide - Spittie/4chan-x GitHub Wiki

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 thing's first: You're going to need a general knowledge of CSS in order to style 4chan X.

To view the basics of CSS, I recommend starting 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 the Stylish extension (for Firefox and Chrome). See the Stylish 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.
  • gecko, webkit, and presto are added to the document depending on if the user is using Firefox, Google Chrome, or Opera, respectively. (Update: blink will also be added for future Chrome and Opera versions. Add these into your style now to prepare for the eventual removal of webkit and presto.)
  • 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.
  • This is specific to this fork of 4chan X, but index, thread, and catalog are also added to the document to make things easier for you to style based on the type of page you're on.

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 - Added if Bottom Header is disabled, and thus the header is at the top of the page.
  • bottom - Added if Bottom Header is enabled, and thus the header is at the bottom of the page.

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 #header-bar, #menu, .submenu, #qr, and #fourchanx-settings all at once. Use this to your advantage!

#header-bar has four children: #board-list, #shortcuts, #scroll-marker, and #notifications

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.

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, is 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.
  • As of v1.1.19, the brackets around shortcuts (and menu buttons, and reply hiding links, etc) are added as .fourchanx-link::before and .fourchanx-link::after for easy removal in userstyles.

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

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. You can delete the .has-captcha class and the .captcha-img and .captcha-input nodes manually in your browser's element inspector if you don't have a 4chan Pass.
  • .has-spoiler if you're on a board that supports file spoilers. This class is only added in this fork.
  • .has-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

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 #dump-button to open up the multiple reply dialog, 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 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 (this fork only)
⚠️ **GitHub.com Fallback** ⚠️