Modifying graphical profile

[kbundg]

Heya mate, and first and foremost thanks for doing such an amazing job!
We're a small Danish community who'd like to individualize a bit more, and therefore I'd suggest a way of changing the buildt-in graphics via uploads in the admin panel.
Maybe I'm a bit dense, but I haven't found anything elaborate enough on CSS to allow me to do such things very efficient.

Thanks in advance!
Kristian

[furiousgreencloud]

Hello I am the admin for liveplatform.ca (masto) and Digital Director for livebiennale.ca (web) an arts based mastodon instance, I too would like to create process for theming/individualizing mastodon.

https://docs.joinmastodon.org/ contains no references to themes beyoung the dark and light ones.

Any tips would be appreciated around creating new themes. specifically;
is there a SCSS specific tool that the dark and light theme were created in?

Code Digging Reveals:

• I see that the UI/CSS is done in SCSS,
• It looks like the dark one was the original 'classic' and it was morphed into the light one, with the lighten(..) funcion
• Styling is via .scss is in mastodon/app/javascript/styles
• Image are mostly in mastodon/app/javascript/images (.svg, .png and .jpeg in order of abundance)
• default avatar image is in mastodon/public/avatars/original/missing.png

[furiousgreencloud]

https://github.com/trwnh/mastomods is a github of styles for mastodon. But a feature branch would be a more github way to do this no?

[furiousgreencloud]

https://battlepenguin.com/tech/using-custom-css-with-mastodon/ is a useful guide to the custom css, way of creating themes using the admin form. https://discourse.joinmastodon.org/t/examples-for-custom-css/1378?u=djsumdog

[furiousgreencloud]

This branch

https://github.com/furiousgreencloud/mastodon/tree/theme-warm

from 3.2 stable

Modifies all the files you might want to need to create a 'warm theme' though you can use it to create almost any theme, since the CSS is all changed with a 1 line tint,

1. merge my branch to yours.
2. edit the Hue and Saturation shift, in

mastodon/app/javascript/styles/color-shift.scss
@return color.scale(adjust-hue( $c, 102), $saturation: -60%); # which does a hue shift of 102deg and a 60% saturation reduction,

finally edit the images, to match your colour shift,

1. app/javascript/images/logo.svg
2. app/javascript/images/logo_alt.svg
3. app/javascript/images/mailer/logo_full.png
4. app/javascript/images/preview.jpg
5. public/favicon.ico

BUGS / KNOW LIMITATIONS:

• checkboxes and radio buttons are not themed (yet), and still blue (chrome), grey (firefox)

[weex]

Have you considered making a PR out of this? The changes seem reasonable enough to me.

[furiousgreencloud]

not sure _everyone_ needs this functionality, can you merge them into your branch without a Pull Request?

…

On Sun, 22 Aug 2021 at 20:58, David Sterry ***@***.***> wrote: Have you considered making a PR out of this? The changes seem reasonable enough to me. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#16325 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4UR7OI5UGXXOFV2IVD33T6HBOBANCNFSM45WMVV3Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

-- brady ciel marks )she/her( / +1.604.727.1325 / listen <http://wetlandproject.com/stream>

[weex]

Certainly, I only asked for the discussion it would invite about better theming.

[furiousgreencloud]

i'll generate the Pull Request, i will say that this does not allow auto theming for the .pngs and .svgs

[furiousgreencloud]

here is the pull request