Mastodon té una opció per aplicar CSS personalitzat des del seu panell d’administració. Malauradament, no he pogut trobar cap exemple de com hauria de ser aquest CSS, fins i tot després de preguntar als Mastodon Fourms. Vaig descobrir com de difícil pot ser la modificació del CSS de Mastodon. No vaig poder esbrinar per què els canvis en l’element body
no afectarien res, i em van informar que Mastodon dibuixa un component amb la classe .ui
. A través d’un treball acurat amb les eines de desenvolupament del Firefox, he pogut esbrinar quins selectors del CSS controlaven què, i he intentat construir una llista per començar amb la creació de temes a Mastodon a través d’un full d’estil personalitzat.
Aquí hi ha una taula de tots els selectors CSS importants que he ajustat per al meu tema personalitzat. Hi ha tres disposicions principals a Mastodon: La pàgina d’aterratge (per a usuaris no registrats), la interfície d’usuari (quan s’ha iniciat la sessió) i la pàgina de perfil (pàgina pública per a un usuari). Poques classes CSS es comparteixen a través de pàgines.
CSS Selector | Element it Styles | Page |
---|---|---|
.ui | Primary content box for logged in user | UI |
.search__input | Search Input Box | UI |
.search-results | Search Results Box | UI |
.search-results__header | Header for Search Results | UI |
.search-results__section h5 | Section Titles for Search Results | UI |
.account__section-headline | Bar under profile with Toots / Replies / Media | UI |
.status-link | Links within statuses | UI |
.account__header > div | Area for tinting User Profiles | UI |
.account__header .account__header__fields dt | User profile keys | UI |
.account__header .account__header__fields dd | User profile values | UI |
.status__content | Text content within individual status | UI |
.reply-indicator__content | Text for reply indication content | UI |
.column | Individual column (opacity useful for transparency) | UI / Landing |
.column-header | Header for Column | UI |
.column-header__button | Settings/Hamburger Button on Columns | UI |
.column-back-button | Back Button / Timeline heading on Landing | UI / Landing |
.hero-widget__text | Can’t Remember | UI |
.drawer__inner | Top half of the composition column | UI |
.drawer__inner__mastodon | Bottom region with Mastodon logo | UI |
.drawer__inner__mastodon img | Mastodon Send logo image | UI |
.drawer__header | Top Left Control Box | UI |
article | Element for most statuses | UI |
.status-public | Background for public statues (default theme colors public/private the same) | UI |
.status.status-direct:not(.read) | Unread direct messages | UI |
.column > .scrollable | Bar under profile with Toots / Follows / Followers | UI |
.column-link | Links in Getting Started Menu | UI |
.column-link:hover | Hover in Getting Started Menu | UI |
.column-subheading | Getting Started Menu Section Headings | UI |
.column-header__back-button | Local timeline Back Button | UI |
.status-reply | Statuses that are Replies | UI |
.detailed-status | Focused Status Opened in Side Column | UI |
.detailed-status__action-bar | Reply / Boost / Star Bar under Detailed Status | UI |
.getting-started | Getting Started Box | UI |
.landing-page | Primary content box for main site | Landing Page |
.landing-page__information | Center/Lower Info Boxes | Landing Page |
.landing-page__forms | Login/Register Box | Landing Page |
.landing-page__call-to-action | User/Status count box | Landing Page |
.public-layout | Primary content box for profiles | Profile Page |
.activity-stream .entry | Background for statuses on public profile | Profile Page |
.public-layout .public-account-bio | Box under User Profile fields | Profile Page |
.public-layout .header | Header above profile | Profile Page |
.public-layout .footer | Footer below toots | Profile Page |
.public-account-bio .account__header__fields dt | User profile keys | Profile Page |
.public-account-bio .account__header__fields dd | User profile values | Profile Page |
Aquesta llista pot no ser exhaustiva, ja que he descobert alguns d’aquests selectors al mateix temps que trobo llacunes en el meu tema. Els diferents patrons de color poden requerir selectors addicionals, però això hauria de ser un bon punt de partida.
Logos
La manera més fàcil de personalitzar el logotip de Mastodon sota el quadre de composició és establir el valor de display
de l’etiqueta img
a none
i després afegir un logotip personalitzat com a imatge de fons. Si s’estableix el background-size
com a cover
, la imatge es reduirà i s’expandirà com el logotip original.
.drawer__inner__mastodon {
background-image: url("https://example.com/images/logo.png");
background-size: contain;
background-color: #0f2a54;
opacity: 0.95;
}
.drawer__inner__mastodon img {
display: none;
}
Temes clars
Vaig començar breument pel camí d’un tema clar, però després vaig decidir un palet més fosc. Per a un tema clar, el color del text per a la majoria dels elements s’han de canviar de blanc a negre amb quelcom com el següent:
.ui p, .landing-page p, .public-layout p {
color: black !important;
}
.status__content, .reply-indicator__content {
color: black;
}
Marges del perfil públic
Per alguna raó, la disposició de la pàgina pública es desplaça 10 píxels des de la part superior. Si afegiu una imatge de fons personalitzada, obtindreu una barra negra. No hi ha cap element sobre el quadre superior, excepte l’etiqueta html
en si mateixa, de manera que intentar solucionar-ho afectaria les altres dues disposicions. Em va resultar més fàcil ajustar els marges per a l’element .public-layout
i el quadrat dels radis per a les capçaleres i els peus.
.public-layout {
margin-top: -10px;
}
.public-layout .header {
background-color: #243d63;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.public-layout .footer {
background-color: #243d63;
padding: 15px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Aquestes modificacions només són necessàries si s’utilitza una imatge de fons, i es poden evitar utilitzant només un color de fons.
Perfil del compte
Veure el perfil d’un usuari és una altra raresa pel que fa al tematisme. Perquè la fotografia de fons en el perfil d’un usuari tingui el tema de color correcte, heu d’aplicar un estil a .account.header > div
i utilitzar la notació rgba()
perquè el color de fons acolorirà tota la regió contenidora, inclosos els camps de capçalera del compte. El valor final és l’opacitat que afecta el tint aplicat a la imatge de fons del perfil que esteu veient.
.account__header > div {
background: rgba(27, 42, 69, 0.9);
}
Dissenyant el tema
El fons s’ha d’establir sobre els tres tipus de pàgina. Això es pot dividir si voleu diferents tipus de fons per a les diferents parts del lloc, però si voleu alguna cosa uniforme, el codi es veurà com el següent:
.ui, .landing-page, .public-layout {
background-image: url("https://cdn.example.com/images/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Moltes de les classes llistades a la taula de dalt tindran un color de fons simple o un color de text. És millor triar primer un palet de color i després assignar elements en grups a aquests colors, com ara:
.account__header .account__header__fields dd,
.public-account-bio .account__header__fields dd,
.drawer__inner, .drawer__inner__mastodon {
background-color: #0f2a54;
}
Tema Sapphire Ocean
Aquest és el tema Sapphire Ocean v1.0 que vaig crear per a la meva instància personal, Hitchhiker.Social. El codi CSS és de domini públic, i la imatge de fons està disponible sota la llicència Creative Commons BY-NC-SA. Copieu i allotjau el fons si voleu utilitzar aquest tema. Es pot emmagatzemar fàcilment el fons a Mastodon permanentment mantenint-lo en un tut ancorat.
Captures de pantalla
Paleta de colors
Codi font
.search__input {
background-color: #343f51;
}
.search-results {
background-color: #182a3c;
}
.landing-page__forms, .public-layout .header,
.public-layout .footer {
background-color:#243d63;
}
.landing-page__call-to-action, .detailed-status {
background-color:#213759;
}
.public-layout {
margin-top: -10px;
}
.public-layout .header {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.public-layout .footer {
padding: 15px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ui, .landing-page, .public-layout {
background-image: url("https://example.org/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.account__section-headline, .column-header__back-button {
background-color: #1b2a45 !important;
}
.status-link {
color: #73a9d1 !important;
}
.account__header > div {
background: rgba(27, 42, 69, 0.9);
}
.account__header .account__header__fields dt, .public-account-bio .account__header__fields dt,
.column-header, .column-header__button, .column-back-button, .hero-widget__text, .status.status-direct:not(.read) {
background-color: #08152b;
}
.account__header .account__header__fields dd,
.public-account-bio .account__header__fields dd,
.drawer__inner, .drawer__inner__mastodon {
background-color: #0f2a54;
}
.column {
background-color: transparent;
opacity: 0.95;
}
article, .status-public, .activity-stream .entry, .column > .scrollable,
.drawer__header, .landing-page__information {
background-color: #0b1d3a;
}
.column-link {
color:#8ba9c7;
background-color:#1e2a3e;
}
.column-link:hover {
background-color: #21314b;
}
.status-reply {
background-color: #071a3a;
}
.detailed-status__action-bar {
background-color:#1c2d49;
}
.getting-started, .public-layout .public-account-bio {
background-color: #002b55;
}
.column-subheading, .search-results__header, .search-results__section h5 {
background-color: #002549;
color: #7398bc;
}
.drawer__inner, .drawer__inner__mastodon {
opacity: 0.95;
}
.drawer__inner__mastodon {
background-image: url("https://example.org/logo.png");
background-size: contain;
}
.drawer__inner__mastodon img {
display: none;
}
Conclusió
He trobat que és més fàcil desplegar Mastodon utilitzant els contenidors oficials Docker publicats pels desenvolupadors de Mastodon. Molts dels tutorials de personalització que he trobat impliquen la construcció de contenidors personalitzats a partir d’aquestes imatges base i la injecció dels actius necessaris. L’opció CSS personalitzat que ara està disponible a la consola d’administració sembla ser una opció molt més neta que modificar l’aplicació base. És una eina poderosa per crear un aspecte i una sensació personalitzada per Mastodon. Espero que aquesta guia d’aprenentatge proporcioni un punt de partida decent per als que busquen personalitzar les instàncies de Mastodon que administren. Estic segur que hi ha maneres de simplificar el nombre de classes que necessiten ser temàtiques, i espero amb interès veure quins altres temes es plantegen.
Publicació original: https://battlepenguin.com/tech/using-custom-css-with-mastodon/