Download the PHP package cm/neos-thememodule without Composer
On this page you can find all versions of the php package cm/neos-thememodule. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download cm/neos-thememodule
More information about cm/neos-thememodule
Files in cm/neos-thememodule
Package neos-thememodule
Short Description Backend module to customize supported themes / site packages
License GPL-3.0-or-later
Informations about the package neos-thememodule
Backend Site/Theme Module for Neos
This packages allows you to customize your theme package in a backend module.
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
Requirements / Limitations
- This package is tested with Neos 3.0, 3.1 and 3.2
- .sass style is not supported! .scss only!
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
In the Settings.yaml your have to declare the location of your scss code and your compiled 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:
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
:
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:
Defining fonts:
To add a selectbox with fonts from Google Webfonts and other additional fonts add this and change it to your needs:
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:
There are four fontSource types:
1) _FONT_SOURCESYSTEM Webfont which is usually on every device available like font "Arial"
2) _FONT_SOURCELOCAL A webfont which is available in the Public folder of your template
3) _FONT_SOURCECDN Use this for webfonts from other font distributors like font.com, linotype if the font get added via <link>
tag in the head of your page
4) (_FONT_SOURCEGOOGLE) 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_SOURCESYSTEM:
_Configuration for a FONT_SOURCE_LOCAL:_
_Configuration for a FONT_SOURCECDN:
Defining a textbox:
To add a regular input form add this and change it to your needs
Inspector Validator for color values: hex, rgb, rgba
Add to your node property the validator like this:
Currently the there's a bug which makes it neccessary to add
../../
this issue is already reported. See github issue #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
- @kdambekalns
- Schwabe AG, Muttenz, Switzerland
- @Sebobo
Contributing
I highly encourage everyone to provide PRs for missing functionality, improvements or bugfixes.
License
Licensed under GPLv3+