THEME GUIDE

Master sCSS to customize Snekbooru's appearance

THE sCSS STYLING SYSTEM

Snekbooru's appearance is controlled by sCSS, a powerful styling language that gives you deep control over the look and feel of the application. This guide will walk you through how to create your own themes.

CUSTOM FONTS

You can add your own fonts to use in custom themes. Place your font files (.ttf or .otf) into the following directory and restart the application:

C:/Users/ATroubledSnake/AppData/Local/Snekbooru/Snekbooru\fonts

After restarting, you can use the font's family name in your stylesheet:

* {font-family: 'My Cool Font';}

GLOBAL STYLES & BASIC PROPERTIES

The * selector applies styles to all elements. sWidget targets the base style for all widgets unless overridden.

* {font-family: 'Segoe UI', Arial, sans-serif;font-size: 14px;}sWidget {background-color: #1e1e1e;color: #eaeaea;border: none;padding: 5px;}

Common properties include: background-color, color, border, border-radius, padding, margin, font-size, font-family, font-weight, min-width, max-width, min-height, max-height, text-align.

sWIDGET TYPE SELECTORS

To style a specific type of widget, use its s-prefixed class name.

sCheckBox

Checkboxes

sComboBox

Dropdown menus

sDialog

Dialog windows

sFrame

Basic container

sGroupBox

Grouping containers

sHeaderView

Table headers

sLabel

Text labels

sLineEdit

Single-line text

sListWidget

Lists

sMenu

Context menus

sPlainTextEdit

Multi-line text

sProgressBar

Progress bars

sPushButton

All buttons

sScrollBar

Scrollbars

sScrollArea

Scrollable areas

sSlider

Sliders

sSpinBox

Numeric inputs

sSplitter

Draggable handles

sTabBar

Tab bar

sTabWidget

Tab container

sTableView

Tables

sTextBrowser

Rich text display

sWidget

Base widget

sLineEdit, sPlainTextEdit, sComboBox, sSpinBox {background: #2a2a2a;color: #eaeaea;border: 1px solid #444;border-radius: 4px;}sPushButton {background: #3a3a3a;padding: 8px;}

PSEUDO-STATES

Apply styles based on a widget's state:

:hover — Mouse cursor is over the widget
:pressed — Widget is being clicked
:disabled — Widget is inactive
:checked — For checkable widgets
:selected — For items in lists/tables
sPushButton:hover {background: #4a4a4a;border-color: #666;}sPushButton:pressed {background: #5a5a5a;}sPushButton:disabled {background: #1a1a1a;color: #666;}

SUB-CONTROLS & PARTS

Many complex widgets are composed of sub-controls that can be styled individually using :: (double colon):

sTabWidget::pane — The content area
sTabBar::tab — An individual tab
sGroupBox::title — The title text
sProgressBar::chunk — The filled portion
sComboBox::drop-down — Dropdown arrow
sScrollBar::handle — The draggable part
sTabBar::tab {background: #2a2a2a;color: #aaa;padding: 8px 16px;}sTabBar::tab:selected {background: #3a3a3a;color: #fff;}

STYLING BY ID (objectName)

Elements have unique IDs (objectName in Qt) for highly specific styling, prefixed with #:

sWidget#main_window

Main window

sTabWidget#main_tabs

Main tab widget

sWidget#home_tab

Home tab

sWidget#browser_tab

Browser tab

sWidget#favorites_tab

Favorites tab

sWidget#downloads_tab

Downloads tab

sWidget#minigames_tab

Minigames tab

sWidget#ai_tab

AI tab

sFrame#video_frame

Video frame

sLabel#title

Main title

sLabel#app_logo_mini

Logo

sLabel#total_posts_label

Posts counter

sPlainTextEdit#post_inspector_info

Post info

sTextBrowser#ai_chat_history_browser

Chat history

sPlainTextEdit#ai_chat_input_area

Chat input

sGroupBox#danger_zone

Danger Zone

sPushButton#reset_button

Reset button

ADVANCED PROPERTIES

Gradients

Use qlineargradient or qradialgradient for backgrounds:

background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #2DE2E6, stop:1 #F706CF);

Images

Use url("path/to/image.png") for background images. Paths can be absolute or relative:

background-image: url("path/to/your/image.png");border-image: url("path/to/border.png") 3 3 3 3 stretch stretch;

FINAL NOTES

  • The sCSS system is powerful, but not all web CSS properties are available.
  • Layout is primarily handled by the application's structure, not stylesheets.
  • Experimentation is encouraged!