Manipulate the head via Custom Theme

[ikabod]

Attempted Debugging

• I have read the debugging page

Searched GitHub Issues

• I have searched GitHub for the issue.

Describe the Scenario

Hi,

I want to add my own JavaScript and CSS to the head section via PHP.

Reason: I prefer to have all customization files under my custom theme folder. The current approach is, to read the content of my files from the folder "/themes/my-theme/js/" and create the file in "/themes/my-theme/common/custom-head.blade.php". Not yet programmed, but should work.

This seems to me an ugly solution - is there a way to achieve this via a theme event too?

Thanks,
Peter

Exact BookStack Version

BookStack v23.08.3

Log Content

No response

Hosting Environment

php 8.2.10 on localhost (Apache on Manjaro)

[ssddanbrown]

This seems to me an ugly solution - is there a way to achieve this via a theme event too?

There is no specific custom theme event for this, since this is something already well covered by the visual theme system.
As there a reason you feel this is an ugly solution?

[ikabod]

Is it possible to set the setting "app-custom-head" in the APP_BOOT event? If yes, can you pleas provide an example how to access the setting via PHP?

[ssddanbrown]

@ikabod

You could do something like this:

<?php

use BookStack\Facades\Theme;
use BookStack\Theming\ThemeEvents;

Theme::listen(ThemeEvents::APP_BOOT, function () {
    setting()->put('app-custom-head', '<style>body{background: tomato;}</style>');
});

but I wouldn't advise it. I'd say it's much more elegant to add styles via the visual theme system.

[ikabod]

Thanks, that works fine.

I do not know where to put CSS in the visual theme? The docs says only how to override views?

[Man-in-Black]

You can just create an own CSS within in the WebGUI under settings -> personalisation.
Then you can use this class as usual with the "class" attribute.

[ssddanbrown]

I do not know where to put CSS in the visual theme? The docs says only how to override views?

Yeah, so you can override any relevant view and add CSS.

Therefore you could override the custom head template, where custom styles added via the UI are used.

Or you could use this base-body-start.blade.php template that exists for customization. Gets used at the start of the body for pretty much every UI view.
Style tags in body are not technically correct but will probably work find in the vast majority of cases due to browser compatibility handling.

[ikabod]

Thank you for clarification.

I prefer to have all CSS code in a single file (or at least in the same folder).

Therefore I use the event method and write the needed JavaScript and CSS code via PHP into the settings.

Thanks again for taking time to this topic.

[ssddanbrown]

Happy to help, will therefore close this off.