Signocore Slate keeps colors, fonts and layout in global settings, so a change in one place reaches every page. Pages and posts can still override the layout one at a time.
Global color palette
The palette holds the 15 colors the whole site is built from. The header, footer, buttons, links and the Signocore Slate blocks all refer to palette colors instead of fixed values, so changing one color updates every place that uses it.
- Go to Appearance → Customize → Colors & Fonts → Colors.
- Under Global Palette, click a swatch and pick a new color.
- Click Publish.
The swatches are grouped by role. Hover a swatch to see its number and name.
| Group | Colors |
|---|---|
| Accents | 1 Accent, 2 Accent - alt, 10 Accent - Complement |
| Contrast | 3 Strongest text, 4 Strong Text, 5 Medium text, 6 Subtle Text |
| Base | 7 Subtle Background, 8 Lighter Background, 9 White or offwhite |
| Notices | 11 Notices - Success, 12 Notices - Info, 13 Notices - Alert, 14 Notices - Warning, 15 Notices - Rating |
Colors 3 to 6 go from strong to subtle and are meant for text. Colors 7 to 9 are backgrounds: the site background uses color 8 and the content area color 9 by default. Headings use color 3 and body text color 4.
Three palettes
The buttons Palette 1, Palette 2 and Palette 3 above the swatches hold three complete sets of colors. The palette you select when you click Publish is the one your site uses. The other two are stored for later, and dark mode can switch visitors to one of them.
Out of the box, Palette 1 and Palette 2 contain the same light colors and Palette 3 contains a dark version.
The reset icon next to the Global Palette title restores the default colors of the selected palette. The button below the swatches opens Select Palette, with ready-made color sets, and Export/Import, where you copy a palette as text and paste it into another site.
Palette colors in the block editor
The palette appears in every color picker in the block editor, under the same names as in the Customizer. A block that uses a palette color changes when you change that color in the Customizer, including blocks on pages you published earlier. A color typed in as a hex code stays fixed.
For your own CSS, each color is available as a CSS variable, from --global-palette1 to --global-palette15. The block editor's variables --wp--preset--color--theme-palette-1 to --wp--preset--color--theme-palette-15 point to the same colors.
.my-notice { background: var(--global-palette7); border-left: 4px solid var(--global-palette1); color: var(--global-palette3); }
Other color settings
The Colors section also sets the Site Background, the Content Background, the background and overlay of titles shown above the content, and the Links Color for links in your content. Button colors are set under Base Button Styles, Secondary Button and Outline Button in the same panel.
Categories can have their own label color on archive pages. Edit a category under Posts → Categories and set Archive Color and Archive Hover Color.
Typography
Go to Appearance → Customize → Colors & Fonts → Typography.
| Setting | What it does |
|---|---|
| Base Font | Font family, size, line height, weight and color for body text. The default is your visitor's system font at 17 pixels |
| Load Italics Font Styles | Loads the italic version of the base font |
| Heading Font Family | One font for all headings. By default headings use the base font |
| H1 Font to H6 Font | Size, line height, weight and color per heading level |
| H1 Title | The page title when it is shown above the content |
| Breadcrumbs | Font for breadcrumbs in the title area above the content |
| Enable Font Smoothing | Smoother font rendering on macOS |
| Google Font Subsets | Extra character sets, such as Cyrillic or Vietnamese, for Google Fonts |
Sizes can differ between desktop, tablet and mobile. Use the device icons next to a setting to set each one.
The font picker offers system fonts and Google Fonts. Google Fonts are downloaded to your own server and served from there by default, so visitors' browsers do not contact Google. You can switch to loading them from Google under Appearance → Customize → General → Performance. See Fonts and performance.
Content width and spacing
Go to Appearance → Customize → General → Layout.
| Setting | Default | What it does |
|---|---|---|
| Content Max Width | 1290 px | The widest the content area gets |
| Narrow Layout Content Max Width | 842 px | Content width for the Narrow layout, used by blog posts by default |
| Content Left/Right Edge Spacing | 1.5 rem | Space between the content and the screen edge |
| Content Top and Bottom Spacing | Space above and below the content |
The same section styles the box around posts and archive items when they use the Boxed content style: Single Post Boxed Spacing, Single Post Boxed Shadow, Single Post Boxed Border Radius and the matching Archive Grid Boxed settings.
Sidebars
Signocore Slate has two widget areas for sidebars, Sidebar 1 and Sidebar 2. Add blocks to them under Appearance → Widgets.
A sidebar appears when a page, post or archive uses the Left Sidebar or Right Sidebar layout. Each layout section picks which sidebar to show, for example Page Default Sidebar and Post Default Sidebar.
Under Appearance → Customize → General → Sidebar you set the Sidebar Width and Widget Spacing, and turn on Enable Sticky Sidebar to keep the sidebar in view while visitors scroll. Only Stick Last Widget keeps only the last widget in view. The Design tab sets widget fonts, link colors, background, divider and padding.
Layouts for posts, pages and archives
Go to Appearance → Customize → Posts/Pages Layout. It has a section for each kind of content:
| Section | Applies to |
|---|---|
| Page Layout | Pages |
| Single Post Layout | Blog posts |
| Archive Layout | The blog page and post archives by category, tag, date and author |
| A Layout and an Archive section per custom post type | Content types added by plugins or code, named after the content type |
The search results page has its own section at Appearance → Customize → Search Results, and the 404 page at Appearance → Customize → General → 404 Page Layout. WooCommerce and the course plugins add their own sections. See Plugin integrations.
Layout options
The main options are the same in each section:
| Setting | Options |
|---|---|
| Default Page Layout, Default Post Layout or Archive Layout | Normal, Narrow, Fullwidth, Left Sidebar or Right Sidebar. Pages and archives default to Normal, posts to Narrow |
| Content Style | Boxed puts the content on a card with its own background. Unboxed puts it straight on the page. Boxed is the default |
| Content Vertical Spacing | Enable, Disable, Top Only or Bottom Only |
| Title layout | In Content shows the title inside the content area. Above Content shows it in a full-width band above. Pages default to Above Content, posts to In Content |
| Show Featured Image? | Pages and posts: shows the featured image, with Featured Image Position (Above, Behind or Below the title) and Featured Image Ratio |
Single posts add options such as Show Post Tags?, Show Post Author Box?, Show Post Navigation? and Show Related Posts?. Archives add Post Archive Columns (1 to 4, default 3), Item Image Placement (Above or Beside the text) and Post Item Elements, where you choose and order what each item shows.
The title settings, such as Title Elements and the title background, sit at the top of each section.
Override the layout on one page or post
The Customizer sets the defaults. To change the layout of a single page or post:
- Open it in the block editor.
- Open the Page Settings sidebar (Post Settings for posts) from its icon in the editor's top toolbar, or from the options menu in the top right corner of the editor.
- Change the settings you need. Default keeps the Customizer setting.
- Save the page.
| Setting | Options |
|---|---|
| Transparent Header | Default, Enable or Disable |
| Title | Inherited Default, Hide Title, Show In Content or Show Above Content |
| Layout | Default, Normal, Narrow, Fullwidth, Left Sidebar or Right Sidebar, with a sidebar choice for the sidebar layouts |
| Content Style | Default, Boxed or Unboxed |
| Content Vertical Spacing | Default, Enable, Disable, Top Only or Bottom Only |
| Show Featured Image | Default, Enable or Disable, with Featured Image Position |
| Additional CSS class(es) | Classes added to the page's body tag, separated by spaces |
| Disable Header, Disable Footer | Hide the header or footer on this page only |
A landing page often uses Fullwidth, Unboxed, Hide Title and Disable for vertical spacing, so a full-width block or pattern starts right below the header.