Custom CSS

With the Custom CSS Tool, Site Admins are able to write their own CSS to modify aspects of any template.

This tool is located within Appearance > Custom CSS.

For security purposes, all CSS is sanitized before being allowed onto the site. Once you hit update, you will notice that the formatting may change. That is the sanitizer CSSTidy at work.

You can revert to the previous version of your custom CSS by clicking the Revert to previous version link that appears underneath the editor.

Allowed CSS

The following CSS selectors, values, and properties will work in the Custom CSS plugin.

Default CSS

Default fields from HTML Purifier
- Most of HTML4 and CSS2

Additional CSS

:before
:after
area
article
audio
section
aside
base
bdi
body
canvas
command
datalist
details
dialog
embed
footer
figure
figcaption
head
header
hgroup
html
keygen
link
main
map
mark
meta
meter
nav
output
progress
rp
rt
ruby
source
style
summary
time
title
track
video
wbr

align-content
align-items
align-self
background-clip
background-origin
bottom
border-radius
border-image
box-shadow
box-sizing
color
content
display
filter
flex-grow
flex
flex-direction
flex-flow
font-size-adjust
font-stretch
justify-content
left
min-height
min-width
opacity
order
overflow
overflow-x
overflow-y
position
right
tab-size
text-align-last
text-justify
text-overflow
text-shadow
top
visibility
word-break
word-wrap
z-index

src
rgba()
!important

If your site needs to use CSS properties not listed here, look into custom theming.

Custom Block CSS

Sites using the Cynder theme and the assoicated block/Gutenberg editor can make use of custom CSS that is scoped to specific blocks. To do so, select a block, navigate to the block settings in the right sidebar, and click the Advanced dropdown menu. There you should see two options, one for additional CSS classes and another for just additional CSS.

Custom CSS settings for blocks

Additional CSS class(es) will apply the space-separated list of classes to the block, in case you want to apply CSS rules to specific blocks throughout the site.
Additional CSS will apply actual CSS styling directly to the block itself, and will update the preview of the block you see in the editor. While this can be useful, it’s recommended to use this approach sparingly, as it can be hard for site users/editors and network admins to trace problematic CSS to this setting.