search

getgrav / grav-premium-issues

Official Grav Premium Issues repository to report problems or ask questions regarding the Premium products offered.
https://getgrav.org/premium
7 stars 2 forks source link

[typhoon] Changing background color - how _exactly_ do i compile tailwindcss again? #386

Closed Staubgeborener closed 10 months ago

Staubgeborener commented 10 months ago

I am using the typhoon one page theme layout. In the admin panel, i select the theme and go to the "layout default" settings. There is something like this for section classes: bg-white dark:bg-gray-800 py-8 md:py-24 So i get a gray color (gray-800) as a dark theme.

Let's say i want to change bg-gray-800 to bg-slate-900. In this case, i have to compile tailwindcss again. But how? I mean, i need to run npm run build somehwere. But where? What is the correct path? I read the documentation about typhoon, but can't find an answer. The documentation is more about "This is how you create your own custom theme", but i simply want to edit the given typhoon theme just in this small case - change the background color, not create a whole new theme by myself. So where (absolute path and folder) do i need in order to run the npm run build to compile tailwindcss again?

rhukster commented 10 months ago

First off it's a bit dangerous modifying Typhoon directly, becuase you will end up with modifications that will get overwritten if you ever update it. That's why we recommend using devtools plugin to effectively 'copy' typhoon into your own theme. This way you can make modifications to your new theme and never have to worry about accidentally updating 'everything' and losing your changes.

It's not a lot of work, takes 2 secs, just run one command and then give it a new name (typically the name of your project), and then choose copy and then pick typhoon. That's it. (https://getgrav.org/premium/typhoon/docs#create-a-custom-theme-from-typhoon)

After the new theme is created simply change the theme in system.yaml to use your new theme name, or edit via admin in `configuration' -> 'system'.

Let's assume you have your site installed in ~/home/user/webapps/grav, and your new theme is called my-custom-theme, simply do this:

cd ~/home/user/webapps/grav/user/themes/my-custom-theme
npm install
npm run dev

That's it, now this will automatically pick up any changes you have made in your section classes and recompile the CSS automatically.

If you REALLY want to modify typhoon directly, and i definitely DON'T recommend this, just skip straight to the bit where you change directory into the root of the theme (typhoon), and run npm install then npm run watch. If you don't have NPM installed you should google how to do that on your platform as it's different depending on if you run windows, mac, linux etc.

Staubgeborener commented 10 months ago

I can't run npm run dev. The package.json file in my theme does not show the dev part in scripts section.

grafik grafik

rhukster commented 10 months ago

OK it 'watch' .. sorry, i've switched over my names to 'dev'.

Staubgeborener commented 10 months ago

So i can simply run npm run watch, edit my content (terminal or admin plugin) and tailwindcss compiles the code automaticly in background? Like, i don't have to run npm run build at all when i'm working with watch?

rhukster commented 10 months ago

correct, watch will recompile automatically when it sees a file modified.. this includes CSS, as well as twig templates in the theme, and even .md files in the pages folder (in case you change a setting in a page).

Staubgeborener commented 10 months ago

Thanks so far. So i am running npm run watch, every time i do something and save something in admin plugin, i can see the compilation in my terminal - so it's working. But i entered the following issue: In admin plugin, i go to themes > mytheme (which is a copy of typhoon) > Configuration > Layout Defaults > Section Classes.

I can't tell you right now what the default setting was in this section, but right now it's bg-white dark:bg-gray-700 py-8 md:py-24 in my case. As i am using a dark theme, i'll get a grayish background bg-gray-700, so this works. But now i try to change it to bg-slate-900 (source). This makes my background white instead of slate. By trial and error i figured out, that bg-slate-700 is working but not the other bg-slate-[...]-settings (and with "not working" i mean i'll get a white background). Of course, a npm run build did not do the trick, as i am running npm run watch but it was worth a try.

I checked my tailwindcss version and right now it's the latest version 3.3.3:

npm info tailwindcss version
3.3.3
Staubgeborener commented 10 months ago

Issue is solved, i had to wait about 5 minutes (but no, this hasn't anything to do with browser / grav cache). I will close this issue as everything seems to work right now. Thanks so far!