PHPackages cm/neos-thememodule - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. cm/neos-thememodule AbandonedArchivedNeos-plugin[Utility & Helpers](/categories/utility) cm/neos-thememodule =================== Backend module to customize supported themes / site packages 3.2.2(8y ago)121935[1 PRs](https://github.com/coders-market/CM.Neos.ThemeModule/pulls)GPL-3.0-or-laterPHP Since Apr 29Pushed 8y agoCompare [ Source](https://github.com/coders-market/CM.Neos.ThemeModule)[ Packagist](https://packagist.org/packages/cm/neos-thememodule)[ RSS](/packages/cm-neos-thememodule/feed)WikiDiscussions master Synced 2w ago READMEChangelog (1)Dependencies (2)Versions (10)Used By (0) Backend Site/Theme Module for Neos ================================== [](#backend-sitetheme-module-for-neos) This packages allows you to customize your theme package in a backend module. Features -------- [](#features) - Fully customizable, predefine any SCSS variables - Support for bootstrap, foundation and many more - Change colors and fonts in the backend of Neos - Add custom additional SCSS/CSS code - Render your SCSS files - No dependencies to sass compiler libraries - Additional ViewHelper - Support for Google Webfonts - Add any font (local, CDN, Google Webfont) - Neos multi-site setups supported [![Theme Settings Screenshot 1](Documentation/Neos-Theme-Module.jpg)](Documentation/Neos-Theme-Module.jpg)[![Theme Settings Screenshot 2](Documentation/Neos-Theme-Module2.jpg)](Documentation/Neos-Theme-Module2.jpg) Requirements / Limitations -------------------------- [](#requirements--limitations) - This package is tested with Neos 3.0, 3.1 and 3.2 - .sass style is not supported! .scss only! Getting Started --------------- [](#getting-started) 1. Run `composer require --no-update cm/neos-thememodule` *in your site package* 2. Run `composer update` *in your project*. If that does not install the package, because your site package is not managed via composer, you need to run the require from step 1 in your project root again. 3. Run `./flow doctrine:migrate` Login to your Neos backend and open the `Theme Settings` in the backend menu Have a look at `CM.Neos.ThemeModule\Configuration\Settings.yaml.example` there are some defaults defined which you can easily override and/or extend to your needs. ### Adapt Settings.yaml to your needs [](#adapt-settingsyaml-to-your-needs) In the Settings.yaml your have to declare the location of your scss code and your compiled css. ``` CM: Neos: ThemeModule: scss: # folder of your scss code importPaths: 'resource://Vendor.Site.Package/Private/Styles/' # Contains all scss rules and @imports to other files mainScssFile: 'Main.scss' # Expanded, Nested (default), Compressed, Compact, Crunched formatter: 'Leafo\ScssPhp\Formatter\Nested' # Output path has to be in Package Public folder outputPath: 'resource://Vendor.Site.Package/Public/Styles/' outputFilename: 'Main.css' ``` You can use `{packageKey}` in the `importPaths` and `outputPath` settings, it will be replaced by the current package key automatically. This is the default, so you might not even need to define them. **IMPORTANT:** All your SCSS code has to be below specified `importPaths`. Using relative paths in a scss `@import` to a folder outside the `importPaths` will fail. > Make sure you have added this package as a dependency to your site package. This defines the loading order, so that you can overwrite the settings of this package via your site package. If you have multiple sites in a single Neos setup, you can define site-specific settings as well: ``` CM: Neos: ThemeModule: scss: # your default settings here... sites: 'Vendor.Other.Site': scss: # override file names for this package mainScssFile: 'Application.scss' outputFilename: 'app.css' ``` ### Defining a SCSS variable [](#defining-a-scss-variable) You can define the SCSS variables which should be available on the backend module. To define define new variables add them to your `Settings.yaml`. Don't edit the `Settings.yaml` in this package as this breaks the possibility to update the package, as it would for any other package. Basic schema, for more details see `Configuration/Settings.yaml` and `Configuration/Settings.yaml.example`: ``` CM: Neos: ThemeModule: scss: presetVariables: color: # group label: 'Your Color Settings' type: color: greyBase: value: '#000000' scssVariableName: '$grey-base' label: 'Grey Base' bodyBgColor: value: '#ffffff' scssVariableName: '$body-bg' label: 'Background Color' [...] font: label: 'Your Font Settings' type: font: fontFamilySansSerif: label: 'Font Family Sans Serif' category: 'sans-serif' value: family: 'Arial' fontFallbackValue: 'Helvetica, sans-serif' scssVariableName: '$font-family-sans-serif' fontFamilySerif: label: 'Font Family Serif' category: 'serif' value: family: 'Custom Font from CDN' variants: - 'regular' fontFallbackValue: '"Times New Roman", Times, serif' scssVariableName: '$font-family-serif' [...] textfield: fontSizeBase: value: '14px' scssVariableName: '$font-size-base' label: 'Base Font Size in px' headingsFontWeight: value: '500' scssVariableName: '$headings-font-weight' label: 'Headings Font Weight' [...] ``` **Attention:** In order to be able to override your defined SCSS variables in your SCSS file, the variable must have the value `!default`. **Defining color:** To add an input form with an additional color picker add this and change it to your needs: ``` type: color: # Possible types are: color, font, textfield greyBase: # Name of your scss variable, can be any name if unique value: '#000000' # default value scssVariableName: '$grey-base' # variable name in your scss file label: 'Grey Base' # The label which should be shown in the backend. ``` **Defining fonts:** To add a selectbox with fonts from Google Webfonts and other additional fonts add this and change it to your needs: ``` type: font: # Possible types are: color, font, textfield fontFamilySerif: label: 'Font Family Serif' category: 'serif' # Category to show only fonts of e.g. serif or monospace value: # predefined values # font family name, must be part of Google Webfonts or defined as font in fontOptions family: 'Custom Font from CDN' # the font variant which should be choosen, "regular" for fontSource CDN and Local variants: - 'regular' # fallback values which got append to value.family in compiled css fontFallbackValue: '"Times New Roman", Times, serif' # The scss variable to overwrite. IMPORTANT only scss variables with "!default" will get overwritten scssVariableName: '$font-family-serif' ``` **Adding a font:** You can add additional fonts in your Settings.yaml to make them selectable in the backend. The path in your Settings.yaml to add new fonts: ``` CM: Neos: ThemeModule: fontOptions: items: - [...] ``` There are four fontSource types: 1. ***FONT\_SOURCE\_SYSTEM*** Webfont which is usually on every device available like font "Arial" 2. ***FONT\_SOURCE\_LOCAL*** A webfont which is available in the Public folder of your template 3. ***FONT\_SOURCE\_CDN*** Use this for webfonts from other font distributors like font.com, linotype if the font get added via `` tag in the head of your page 4. (***FONT\_SOURCE\_GOOGLE***) Is used for the build in Google Webfonts so you shouldn't need this fontSource Depending on the selected fontSource, the font gets added to your CSS via @font-face rule (FONT\_SOURCE\_LOCAL) or a tag get added to your `prototype(Neos.Neos:Page)` in `head.cmfont` for types FONT\_SOURCE\_CDN and FONT\_SOURCE\_GOOGLE The fontOptions can be set per-site as well. ***Configuration for a FONT\_SOURCE\_SYSTEM:*** ``` # a system font - family: 'Arial' category: 'sans-serif' fontSource: FONT_SOURCE_SYSTEM ``` ***Configuration for a FONT\_SOURCE\_LOCAL:*** ``` # a local font - family: 'My Local Custom Font' category: 'sans-serif' fontSource: FONT_SOURCE_LOCAL variants: - 'regular' - '700' - '700italic' files: # Define your paths for each font variant regular: - 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font.ttf' - 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font.woff' - 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font.woff2' 700: 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font-700.woff2' 700italic: 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font-700-italic.woff2' ``` ***Configuration for a FONT\_SOURCE\_CDN:*** ``` # Fonts from e.g. fonts.com, linotype, adobe, ... if they are using a tag # to include the font on your page. # If the font is added via JS or any other methode use the "FONT_SOURCE_SYSTEM" to # add the font and add your css/js by yourself - family: 'Custom Font from CDN' category: 'serif' fontSource: FONT_SOURCE_CDN variants: - 'regular' # has to be regular files: regular: '//your.custom-font-cdn.tld/css?family=the+font+family' # array key has to be regular ``` **Defining a textbox:** To add a regular input form add this and change it to your needs ``` type: textfield: # Possible types are: color, font, textfield fontSize: # Name of your scss variable, can be any name if unique value: '16px' # default value scssVariableName: '$font-size' # variable name in your scss file label: 'Font Size' # The label which should be shown in the backend. ``` ### Inspector Validator for color values: hex, rgb, rgba [](#inspector-validator-for-color-values-hex-rgb-rgba) Add to your node property the validator like this: ``` 'Neos.NodeTypes:Column': properties: backgroundColor: type: string validation: '../../CM.Neos.ThemeModule/JavaScript/Inspector/Validators/ColorValidator': [] ``` > Currently the there's a bug which makes it neccessary to add `../../` this issue is already reported. See [github issue #1562](https://github.com/neos/neos-development-collection/issues/1562) **Valid values are:** - Hex: #fff or #ffffff - rgb: rgb(255,255,255) - rgba: rgba(255,255,255,0.3) THANK YOU for contributing to ----------------------------- [](#thank-you-for-contributing-to) - @kdambekalns - Schwabe AG, Muttenz, Switzerland - @Sebobo Contributing ------------ [](#contributing) I highly encourage everyone to provide PRs for missing functionality, improvements or bugfixes. License ------- [](#license) Licensed under GPLv3+ ### Health Score 34 — LowBetter than 75% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity20 Limited adoption so far Community13 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 60.9% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~47 days Recently: every ~92 days Total 9 Last Release 2966d ago Major Versions 2.3.0 → 3.0.02017-04-29 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/10349089?v=4)[Christian Burland](/maintainers/CM)[@cm](https://github.com/cm) --- Top Contributors [![kdambekalns](https://avatars.githubusercontent.com/u/95873?v=4)](https://github.com/kdambekalns "kdambekalns (14 commits)")[![akappler](https://avatars.githubusercontent.com/u/30337968?v=4)](https://github.com/akappler "akappler (7 commits)")[![akappler-diu](https://avatars.githubusercontent.com/u/267666191?v=4)](https://github.com/akappler-diu "akappler-diu (1 commits)")[![Sebobo](https://avatars.githubusercontent.com/u/596967?v=4)](https://github.com/Sebobo "Sebobo (1 commits)") --- Tags neosneoscmstheme-customizer ### Embed Badge ![Health badge](/badges/cm-neos-thememodule/health.svg) ``` [![Health](https://phpackages.com/badges/cm-neos-thememodule/health.svg)](https://phpackages.com/packages/cm-neos-thememodule) ``` ### Alternatives [sitegeist/kaleidoscope Responsive-images for Neos 29364.3k11](/packages/sitegeist-kaleidoscope)[kaufmanndigital/gdpr-cookieconsent A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site. 2541.8k](/packages/kaufmanndigital-gdpr-cookieconsent)[neos/seo SEO configuration and tools for Neos 131.0M28](/packages/neos-seo)[techdivision/ckstyles Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration 21175.8k](/packages/techdivision-ckstyles)[sitegeist/taxonomy Manage vocabularies and taxonomies as separate node-hierarchy. 1593.1k1](/packages/sitegeist-taxonomy)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 14101.5k6](/packages/shel-neos-colorpicker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)