Add custom css fieldset to Theming Controlpanel

plone · Apr 20, 2020 · 6edf346 · 6edf346
1 parent b5bf979
commit 6edf346
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/src/plone/app/theming/browser/controlpanel.pt b/src/plone/app/theming/browser/controlpanel.pt
@@ -584,6 +584,35 @@
                     </div>
 
                 </fieldset>
+                <fieldset>
+                    <legend i18n:translate="">Custom Styles</legend>
+                    <p i18n:translate="description_custom_css_styles">
+                    </p>
+
+                    <div
+                        tal:define="error errors/custom_css | nothing;
+                                    custom_css view/theme_settings/custom_css | python: '';
+                                    custom_css python:request.get('custom_css', custom_css)"
+                        tal:attributes="class python:'field error' if error else 'field'">
+
+                        <label for="custom_css" i18n:translate="label_custom_css">Custom CSS</label>
+                        <div class="formHelp" i18n:translate="help_custom_css">
+                            Define your own custom CSS in the field below. This is a good place for quick customizations of things like colors and the toolbar. Definitions here will override previously defined CSS of Plone. Please use this only for small customizations, as it is hard keep track of changes here. For bigger changes you most likely want to customize a full theme and make your changes there.
+                        </div>
+
+                        <div class="errorMessage" tal:content="error" tal:condition="error" />
+
+                        <textarea
+                            name="custom_css:lines"
+                            id="custom_css"
+                            rows="40"
+                            cols="160"
+                            placeholder="Put your plain css..."
+                            tal:content="custom_css"
+                            ></textarea>
+
+                    </div>
+                </fieldset>
             </div>
 
 

diff --git a/src/plone/app/theming/browser/controlpanel.py b/src/plone/app/theming/browser/controlpanel.py
@@ -19,6 +19,7 @@
 from plone.registry.interfaces import IRegistry
 from plone.resource.utils import queryResourceDirectory
 from Products.CMFCore.utils import getToolByName
+from Products.CMFPlone.utils import safe_unicode
 from Products.CMFPlone.interfaces import ILinkSchema
 from Products.statusmessages.interfaces import IStatusMessage
 from zope.component import getMultiAdapter
@@ -187,6 +188,8 @@ def update(self):
             markSpecialLinks = form.get('markSpecialLinks', None)
             extLinksOpenInNewWindow = form.get('extLinksOpenInNewWindow', None)
 
+            custom_css = form.get('custom_css', '')
+
             if not self.errors:
                 # Trigger onDisabled() on plugins if theme was active
                 # previously and rules were changed
@@ -197,7 +200,9 @@ def update(self):
                 self.theme_settings.rules = rules
                 self.theme_settings.absolutePrefix = prefix
                 self.theme_settings.parameterExpressions = parameterExpressions
-                self.theme_settings.hostnameBlacklist = hostnameBlacklist
+                self.theme_settings.hostnameBlacklist = [
+                    str(bl) for bl in hostnameBlacklist]
+                self.theme_settings.custom_css = str(custom_css)
                 self.theme_settings.doctype = doctype
 
                 # Theme base settings

diff --git a/src/plone/app/theming/interfaces.py b/src/plone/app/theming/interfaces.py
@@ -139,7 +139,7 @@ class IThemeSettings(Interface):
         ),
         value_type=schema.TextLine(),
         required=False,
-        default=[u"127.0.0.1"],
+        default=["127.0.0.1"],
     )
 
     parameterExpressions = schema.Dict(
@@ -171,6 +171,24 @@ class IThemeSettings(Interface):
         default="",
     )
 
+    custom_css = schema.SourceText(
+        title=_(
+            u'Custom CSS',
+        ),
+        description=_(
+            'help_custom_css',
+            u'Define your own custom CSS in the field below. This is a good '
+            u'place for quick customizations of things like colors and the '
+            u'toolbar. Definitions here will override previously defined CSS '
+            u'of Plone. Please use this only for small customizations, as it '
+            u'is hard keep track of changes here. For bigger changes you most '
+            u'likely want to customize a full theme and make your changes '
+            u'there.',
+        ),
+        default=u"",
+        required=False,
+    )
+
 
 class IThemingLayer(Interface):
     """Browser layer used to indicate that plone.app.theming is installed