add custom css

This commit is contained in:
lasseveenliese 2025-12-03 19:56:10 +01:00
parent 3d70de94c6
commit 68d9653eb7
7 changed files with 73 additions and 1 deletions

View file

@ -423,6 +423,14 @@ template(name='layoutSettings')
.title {{_ 'custom-help-link-url'}}
.form-group
input.wekan-form-control#custom-help-link-url(type="text", placeholder="" value="{{currentSetting.customHelpLinkUrl}}")
li.layout-form
.title {{_ 'custom-css-url'}}
.form-group
input.wekan-form-control#custom-css-url(type="text", placeholder="" value="{{currentSetting.customCssUrl}}")
li.layout-form
.title {{_ 'custom-css'}}
.form-group
textarea#custom-css.wekan-form-control(rows='5')= currentSetting.customCss
li.layout-form
.title {{_ 'text-below-custom-login-logo'}}
.form-group

View file

@ -469,6 +469,8 @@ BlazeComponent.extendComponent({
const customLoginLogoImageUrl = ($('#custom-login-logo-image-url').val() || '').trim();
const customLoginLogoLinkUrl = ($('#custom-login-logo-link-url').val() || '').trim();
const customHelpLinkUrl = ($('#custom-help-link-url').val() || '').trim();
const customCssUrl = ($('#custom-css-url').val() || '').trim();
const customCss = ($('#custom-css').val() || '').trim();
const textBelowCustomLoginLogo = ($('#text-below-custom-login-logo').val() || '').trim();
const automaticLinkedUrlSchemes = ($('#automatic-linked-url-schemes').val() || '').trim();
const customTopLeftCornerLogoImageUrl = ($('#custom-top-left-corner-logo-image-url').val() || '').trim();
@ -496,6 +498,8 @@ BlazeComponent.extendComponent({
customLoginLogoImageUrl,
customLoginLogoLinkUrl,
customHelpLinkUrl,
customCssUrl,
customCss,
textBelowCustomLoginLogo,
customTopLeftCornerLogoImageUrl,
customTopLeftCornerLogoLinkUrl,
@ -801,4 +805,3 @@ Template.selectSpinnerName.helpers({
return Template.instance().data.spinnerName === match;
},
});

45
client/lib/customCss.js Normal file
View file

@ -0,0 +1,45 @@
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
import { ReactiveCache } from '/imports/reactiveCache';
// Keep external or inline custom CSS from admin settings applied to the document head
Meteor.startup(() => {
const head = document.head || document.getElementsByTagName('head')[0];
let customCssLink = null;
let customInlineStyle = null;
Meteor.subscribe('setting');
Tracker.autorun(() => {
const setting = ReactiveCache.getCurrentSetting();
if (!setting) return;
const cssUrl = (setting.customCssUrl || '').trim();
const inlineCss = (setting.customCss || '').trim();
if (cssUrl) {
if (!customCssLink) {
customCssLink = document.createElement('link');
customCssLink.rel = 'stylesheet';
customCssLink.id = 'wekan-custom-css-url';
head.appendChild(customCssLink);
}
customCssLink.href = cssUrl;
} else if (customCssLink) {
customCssLink.remove();
customCssLink = null;
}
if (inlineCss) {
if (!customInlineStyle) {
customInlineStyle = document.createElement('style');
customInlineStyle.id = 'wekan-custom-inline-css';
head.appendChild(customInlineStyle);
}
customInlineStyle.textContent = inlineCss;
} else if (customInlineStyle) {
customInlineStyle.remove();
customInlineStyle = null;
}
});
});