Skip to content

Custom CSS for Mastodon inspired by Northern Lights

License

Notifications You must be signed in to change notification settings

abdessalaam/mastodon_aurora

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mastodon 'Aurora' CSS

Beautiful custom css for Mastodon, designed for artsculture.media (also see an enhanced profile here).

Date: 13 January 2023

Screenshot of Mastodon with Aurora CSS appliedScreenshot of Mastodon with Aurora CSS appliedScreenshot of Mastodon with Aurora CSS appliedScreenshot of Mastodon with Aurora CSS appliedScreenshot of Mastodon with Aurora CSS appliedScreenshot of Mastodon with Aurora CSS applied

Features

  • optimized for dark theme as default
  • Replaced "Publish!" button with "Toot!" (not yet reflected in all the screenshots above)
  • unified, modern colour palette inspired by Northern Lights
  • larger profile header image to allow for more creativity
  • larger profile avatar to make it more personal and relatable
  • cleaner profile links in two columns (CSS grid)
  • more discreet verified links indication
  • larger names of authors in the feed
  • slightly more spacious compose panel
  • custom fonts for navigation, headers, and body
  • added background option for login and sign-up pages
  • custom thumbnail option for moved profiles
  • clearer indication of direct messages (colour accent)
  • pulsating dot for unread direct messages
  • various other small tweaks and changes
  • styled "translate" link (based on DeepL implementation)
  • footer branding (transparent backgroung logo of the instance)

Instructions

This theme can be applied on top of an existing installation by simply calling the css file:

  1. Upload the mastodon_aurora.css to your_mastodon/public/system/custom/ folder.
  2. Login to your mastodon, then go to: Preferences -> Administration -> Server Settings -> Appearance
  3. in Custom CSS put:

@import url("system/custom/mastodon_aurora.css");

(alternatively, copy the content of this css and paste directly into the Custom CSS field in Appearance)

CALLING A CUSTOM FONT

You can @import fonts, e.g. from google (an option is provided), but it is preferable to put required fonts in a local folder and call them from there, to avoid sharing data with external corporations. The fonts can be downloaded from this repository, or from:

and then to be uploaded to your server, to: your_mastodon/public/system/custom/fonts

CUSTOM BACKGROUND for Login & Sign-Up pages

upload an image of your choice to: your_mastodon/public/system/custom/graphics/

CUSTOM THUMBNAIL for accounts that moved

you can download an example from this repository, upload to: your_mastodon/public/system/custom/graphics/

Enjoy, share, adapt, and follow me on mastodon:

@baroquepawel@artsculture.media

🎵 🎹 🐘

License (MIT)

Copyright (C) 2022 Pawel Siwczak

Theme Name: Mastodon Aurora Theme URI: https://www.artsculture.media/ Author: Pawel Siwczak / ArtsCulture.Media Author URI: @baroquepawel@artsculture.media

Permission to use, copy, modify, and distribute this work for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission appear in all copies.

EXCEPTION: IT IS FORBIDDEN TO USE THIS WORK IN RELATION TO ANY NSFW, ILLEGAL, OR VIOLENT CONTENT.

This material is provided "as is", with absolutely no warranty expressed or implied. Any use is at your own responsibility.

About

Custom CSS for Mastodon inspired by Northern Lights

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages