Width of the wrapper / Typhoon theme?

[mjk-fi]

Hi!

I have Premium Typhoon theme.

Is there a quick fix how to make a theme narrower?

I asked same question here: https://github.com/getgrav/grav-premium-issues/issues/353

I can't now find a way to shrink the width with Wrapper (and I don't remember what I did with the wrapper settings)... I don't want to compile the whole thing a new, I just need to quick fix.

Any help!

[rhukster]

The configuration option is available in the admin, or editing the theme's configuration YAML directly:

wrapper_spacing: xl:container xl:mx-auto md:px-6 px-4 

The bit that sets the wrapper class is xl:container that basically sets the wrapper to the min-width of the current breakpoint. So the Typhoon default is to be fluid up to the XL breapoint and then be fixed at that XL breakpoint width as the max width of the container. More info here: https://tailwindcss.com/docs/container

if you want to shrink the conainer, you could simply change xl:container to lg:container, to fix it to a max width of 1024px (instead of 1280px set via xl:container).

You will need to recompile the CSS if you change this however, as TailwindCSS only includes the "used" classes. So you will need to recompile to make sure this class is picked up and included in the final CSS.

That process is very easy though. Generally speaking it's simply the following:

npm install
npm run build

More info here: https://tailwindcss.com/docs/container

[mjk-fi]

Thanks for reply!

I have XAMPP installed, have Grav there with Admin plugin. I installed Node.js LTS.

I changed xl:container to lg:container in Typhoon theme's configuration.

I wrote these commands in Typhoon themes folder:

npm install
npm run build

C:\xampp\htdocs\grav\user\themes\typhoon>npm install

up to date, audited 133 packages in 1s

32 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

C:\xampp\htdocs\grav\user\themes\typhoon>npm update

up to date, audited 133 packages in 2s

32 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

C:\xampp\htdocs\grav\user\themes\typhoon>

I clear the cache, and reload the localhost/grav in the browser, but theme's width is not updated/working.

Any ideas what I do wrong here?

[mjk-fi]

I used even WSL and have command "npm run watch" running.

When I update theme settings in admin I get these shown in WSL:

miksu@KarDeski:/mnt/c/xampp/htdocs/grav/user/themes/typhoon$ npm run watch
postcss8-tailwind@1.0.0 watch
tailwindcss -i ./css/site.css -o ./build/css/site.css --postcss --watch --minify --verbose

Rebuilding...

Done in 1117ms.

Rebuilding...

Done in 422ms.

Rebuilding...

Done in 392ms.

The width is still not changing at all when viewing the site.

[rhukster]

What's the URL of the site?

And did you change your configuration to change the wrapper size? what file did you change?

[mjk-fi]

I don't currently have this site online at all, only locally in Xampp.

I just try to change this in Typhoon Configuration in Admin:

[rhukster]

Can you look in your browser's devtools and see if your HTML contains the correct wrapper classes added to the HTML output?

Then try SHIFT-reload browser button to ensure you are not running a cached copy of the CSS.

[mjk-fi]

It seems there's XL-container still used.

I used Chrome browser for this (Firefox used before), so it was "new load" of the site.

[mjk-fi]

I tried to modify the typhoon,yaml:

wrapper_spacing: md:container md:mx-auto md:px-6 px-4

Still shows only XL-wrapper and devtools.

[rhukster]

Could you zip up your site and put it on some cloud storage, so i can grab it and inspect it?

[mjk-fi]

Will do that in couple minutes. Anyway to send you private message here? Or do I delete the Typhoon license file from the site before uploading? There's nothing else in the site that shouldn't be "public" at the moment.

Now I managed to get the source code to change, but width is still same in the browser (even after clearing cache in Grav or browser):

[mjk-fi]

Here's the whole site without Typhoon licence: https://drive.google.com/drive/folders/1gx4SdNx5C85ln5AcWfgKWsLwBjW2fOAu?usp=drive_link

Admin plugin's login info: user: mika password: Testaaja12

[mjk-fi]

I noticed this. Even if I change the container to md, it's width is 1536 in CSS file:

[rhukster]

Ok applogies, I thought that container was enough to set the max-width, but actualy all it's doing is jumping the max-width to match the breakpoint, so you get defined sizes of the breakpoint as teh max width, but doesn't actually set the max-width to a specific one.

To achieve what you want, you just need to set the max-width, something like this:

wrapper_spacing: 'max-w-screen-lg mx-auto md:px-6 px-4'

This will set the max-width to the 'lg' breakpoint size, and up to that point, will not jump but will just expand, if you want it to jump between the breakpoint sizes until it reaches the lg size you can use this:

wrapper_spacing: 'container lg:max-w-screen-lg mx-auto md:px-6 px-4'

You can remove that RAR file now BTW..

[mjk-fi]

Thanks for support!

Now it works as it should.