Tutorial: "How to theme your Flowershow website with fonts/colors"

[olayway]

Quick tutorial / howto on modifying your theme using tailwind.config.js

Note: this involves them messing with the .flowershow folder so flag that ...

Job Stories

When i want to theme my site i want to change the default font (i.e. used for navbar, footer, main text) so that ...

When i want to theme my site i want to change the font for headings (and not rest of stuff)

[Low] When i want to them my site i want to use a custom font for just a single section so that ...

Colors

Want to customize

• background color (in dark and light mode)
• text color (in dark and light mode)
• ...?

Acceptance

Tutorial doc page on:

• how to customize colors 06/12/2022 https://hackmd.io/6GfGr0TBQBuslEgYVOYviQ
• How to customize fonts 06/12/2022 https://hackmd.io/6GfGr0TBQBuslEgYVOYviQ

Tasks

• tutorial on how to add custom colors
• tutorial on how to add custom fonts
• Add a commit changing the font for whole site (in a nice way) using a google font only pushing this after font/color fixes has been made in core
• Add a commit changing the key colors (e.g. font, background) only pushing this after font/color fixes has been made in core
• update tutorial as per detailed comments in PR Tutorial: Customize your site's fonts and colors #345

Notes

• Could go into more detail on how to apply these to the whole website instead of just specific pages eg. where you would add these classes in layout/docs

[rufuspollock]

@khalilcodes can you share your notes (hackmd i think?) here from work done on life itself.

[rufuspollock]

@khalilcodes are these the notes you have? https://hackmd.io/_YoAblOjTPSnVq9hEuYUIg

[khalilcodes]

@rufuspollock yes. @PhilippeduPreez 👆 some docs on customization.

[PhilippeduPreez]

Updated theme customization https://hackmd.io/6GfGr0TBQBuslEgYVOYviQ

[PhilippeduPreez]

@rufuspollock @khalilcodes I'm not sure exactly how we want the navbar, footer to be more customizable? Is it only the colors/fonts/background or anything more to do with how its laid out? Also something like the background of the site should probably be using a global var, so a user does not have to make changes at multiples places if they want a background change?

[rufuspollock]

@PhilippeduPreez ignore navbar - i've removed from acceptance. BTw if you are working on an issue i'd imagine a tasks section in description (even if a bit trivial!) - shows you have thought about plan of work b4 starting a bit! 😄

[PhilippeduPreez]

@khalilcodes @rufuspollock I think we need still need to add some custom css to flowershow core make the colors work properly for theming.

Currently this is display in custom dark mode:

The nav might be missing the dark:background-dark class, and I assume we want the headings to be the same color as the paragraphs?

And custom light mode:

[rufuspollock]

@PhilippeduPreez can you confirm @khalilcodes has seen this and we action it asap so we can unblock resolving this.

[khalilcodes]

@rufuspollock I and @PhilippeduPreez discussed this in the call today.