Misago
  • Introduction
  • Setup
    • Create server on Digital Ocean
    • Point domain at your server
    • Setup Misago on your Server
    • Upgrading your Misago to latest version
  • Settings
    • Accessing settings
    • Static settings reference
    • Dynamic settings reference
  • Coding style
  • GDPR Compliance Guide
  • Social authentication
  • User rank styles
  • Category styles
  • User authentication
  • Writing new admin actions
  • Permissions framework
  • View decorators
  • Context processors
  • Frontend context
  • Audit trail
  • Forms
  • Cache
  • Sending mails
  • Markup
  • Posting process
  • Profile fields
  • Threads types
  • Extending pages
  • Validating registrations
  • Validators
  • Search filters
  • Template tags
  • Shortcuts
  • View errors
  • Locales
Powered by GitBook
On this page
  • CSS shared for all custom classed
  • Default classes

Category styles

PreviousUser rank stylesNextUser authentication

Last updated 7 years ago

Misago categories allow you to specify their css class when editing them in admin control panel.

This class is then used to build proper css class names used around the UI. For example, entering "protoss" in class's css name will result in category on categories lists and threads in this class on threads list having list-group-category-has-flavor and list-group-item-category-protoss css classes on them, allowing you to differentiate this category and its threads on lists. In addition to this, such category's page and its thread page would have page-threads-protoss and page-thread-protoss classes so you could customize it further.

CSS shared for all custom classed

Items on list that have custom class added to them also have list-group-category-has-flavor css class that allows you to include customisations common for all classes in one place for both simplicity and css size reduction.

Default classes

Misago's default theme defines basic classes named after colors in , visualised as bands added to left side of category and its threads on lists:

  • red

  • light-red

  • pink

  • light-pink

  • purple

  • light-purple

  • deep-purple

  • indigo

  • light-indigo

  • blue

  • light-blue

  • cyan

  • light-cyan

  • teal

  • light-teal

  • green

  • light-green

  • lime

  • yellow

  • amber

  • orange

  • deep-orange

  • brown

  • light-brown

  • blue-grey

  • light-blue-grey

  • grey

  • black

Material Design Palette