Skip to content

adds ckeditor stylesheet to subtheme generator #883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
markconroy wants to merge 1 commit into
base: 2.x
Choose a base branch
from
+26 −1
Open

adds ckeditor stylesheet to subtheme generator #883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions localgov_base.info.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ type: theme
core_version_requirement: ^10.1.3 || ^11
base theme: "stable9"
ckeditor5-stylesheets:
- css/base/variables.css
- css/base/ckeditor5.css

regions:
Expand Down
7 changes: 7 additions & 0 deletions scripts/subtheme-items/_subtheme.info.yml_
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@ description: "Your sub-theme, which uses localgov_base as its base theme."
type: theme
core_version_requirement: ^10 || ^11
base theme: "localgov_base"
ckeditor5-stylesheets:
# List any stylesheets you want to apply to the CKEditor
# interface here. This allows you to match your content editing
Copy link
Contributor

@tonypaulbarker tonypaulbarker Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See review comments on scripts/subtheme-items/css/base/ckeditor5.css , applies here too.

# experience to the front-end styles of your site (e.g. for headings,
# links, etc).
- css/base/variables.css
- css/base/ckeditor5.css

libraries-extend:
# Add libraries that you want to load on every page of your site to the list
Expand Down
17 changes: 17 additions & 0 deletions scripts/subtheme-items/css/base/ckeditor5.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
@file CKEditor styles.
These styles are applied within the CKEditor 5 interface to
Copy link
Contributor

@tonypaulbarker tonypaulbarker Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the guidance here should be to use sparingly, for cases where the editor could not otherwise tell how the content would be formatted (like style plug ins). The CKEditor window is not meant to match the front end (fonts, colours, spacing and so on) and making it match in some ways but not others can cause confusion. One example of a case is that heading colours may be different for different sections of the site. A suggestion would be to include a real example from the base theme file again here instead of the heading colours.

I think that linters might complain about a file with only comments?

match the front-end styles of the site.
*/

/*
h2 {
color: var(--color-accent);
}
*/

/*
h3 {
color: var(--color-grey-darkest);
}
*/
0 scripts/subtheme-items/css/variables.css → ...pts/subtheme-items/css/base/variables.css
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion scripts/subtheme-items/subtheme.libraries.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ variables:
# This is called in your LGD_SUB_THEME.info.yml file via `libraries-extend`.
# This ensures that in the cascade, your variables come after the base theme's
# variables.
css/variables.css: {}
css/base/variables.css: {}

# To override CSS from the base theme, add your library here, and then use
# `libraries-extend` to add that code to the library from the base theme. See the
Expand Down