All the themes in this suite have a TRU branding option as well as some other options for non TRU projects. When you click on the Styles menu you will be presented with a variety of palettes and typography options. Pick the combination you like (the TRU branding one is always the second item in both lists) or click the pencil icon at the top right and it will open up the more comprehensive styles menu on the right side of your screen.

You can access this more comprehensive menu from any page in the site editor by clicking the half filled circle icon on the top right. From this menu, you can allows you to edit typography, colours, background, shadow presets, layout spacing settings, and block styles. Additionally, you can import your own fonts and add custom color palettes. Finally, from the second of the second of the 3 dot menus shown in the side bar, you can also access a CSS editor where you can apply additional styles to site content – it’s advised to use this sparingly and to keep a back up of the CSS file in case it accidentally gets cleared.

The palette has 9 colors and a transparent.

Regarding accessibility

The colors have been tested for contrast accessibility via https://webaim.org/resources/contrastchecker/

To work within the bound of accessibility, note that:

• Accent-1 and Accent-2 should not be used on top of one another.
• Borders for UI elements are accessible on the Base color, but you will need to use a different border color from the palette if the background is dark.

The theme is set up for general use cases, but sometimes you want to tweak how something displays or add something like a comments section to your posts. This is when you would edit the templates provided. If you are working with custom post types, or have special pages categories you want to have a different look and feel for, you can create new templates that you can switch to. (switching templates for a specific post is explained in the next section “No Title and Blank Page templates”).

To edit a template, from the templates screen, click the 3 dot menu drop down next to the template title. You should see an option to edit the template. You can add and remove things as necessary from the page. Keep in mind, if you edit one of the purple template part blocks, that will edit will appear across all the templates (see the patterns section of this documentation for more information on template parts).

In the block inserter menu, under the theme heading you will find a lot of useful blocks that might help with what you are trying to edit. This section has dynamic blocks that can pull in data associated with the post using the template you are editing such as the page title, the author’s name, or a comments section.

In terms of design, some patterns accessible to you from other variations of the theme under the Site Template Parts categories. (These may be restricted to just superadmins as they are quite niche and clutter up the patterns menu). To use these, you need to delete the “layout” section from the document overview menu and then add the new pattern into the page. Before going through this process and editing multiple templates, test out other themes in the collection and see if just changing their header and/or footer would better suit your needs.

If things went sideways while making edits, you can always reset a theme default template back to it’s original form. From the templates screen, click the 3 dot menu next to the title of the template you were working on. The drop down menu should now have 2 options. Edit, and Reset. Click reset and your changes will be removed.

By default, when you make a new page on your website, it will use the default pages template. Sometimes, you have a design for your page in mind where you want something like a unique banner at the top of the page or you don’t want to show the page title. To solve for this, you can switch to the No Title or Blank Page templates.

To switch the template of an individual page, in the page editor, you can

1. open the settings toggle
2. click the page toggle
3. click the blue “pages” text item.
4. click “swap template”

You will be presented with a pop up to choose a different template.

The No Title template is exactly what it sounds like, it removes the title from the template so it doesn’t display. Additionally, on most themes in the set, it strips the top and bottom padding on the content container so you can have banners sit right up against the header or footer without white space between. This is important to keep in mind if you don’t have a banner in either location when using this template that you need to manually add your own to the first and/or last block on the page for readability purposes.

The Blank Page template has no title but also no header and footer. The content does have a top and bottom padding, but you can edit that in the site editor if you prefer that it does not. With this template, keep in mind that you may want some kind of navigation button to get users back to the rest of your site.

By default, the theme makes your homepage the “index” template. You can change this 2 ways.

1. The non full site editing way which is to go to dashboard > settings > reading and set “your homepage displays” to a static page and choose a page from the drop down list
2. The full site editing way go to dashboard > appearance > editor > templates > add new template (on the top right) > select front page. You will have to build your template from scratch including adding the header and footer this way. This is great for when you want a different look to the header for your homepage.

You can see if a block has a class associated with it by opening the “advanced” drop down in the settings panel for any given block. A pattern does not always have it’s class on the outer most block in a group. Sometimes class names are applied to content within the container.

The WordPress default blocks don’t have a lot of settings controls for unique layout styles, nor do they have fine grained controls for tablet and mobile settings. To handle some of these behaviors, class names have been applied to some blocks and a CSS file is stored in the theme folder on the server to make some of the patterns behave a certain way.

Sometimes you may want to remove a class name to create a different behavior. This is completely okay. You may need to do some trial and error however. If class names are removed from blocks, they can cause cascading breaks. This is particularly important to keep in mind for the proper functionality of the SideNav theme.

Some useful classes you can use and when – coming soon

Template parts are synced patterns that are used in templates. The Base Theme has header and footer template parts. The Blog and SideNav child themes also have a sidebar and sidenav template part respectively. If you change a header or footer on one template (for example the page template), it will change for all the other templates that use it (such as posts and archives).

Working with template parts allows you to take pieces of one version of the base theme and use them in another version. An example would be if you like the sidebar in the blog theme but you want the header of the portfolio theme. Activate the blog theme, and switch the header on any template to the portfolio theme header style.

You can make more template parts as well. The process is similar to creating patterns (see drop down “creating your own patterns” below).

Tip: The theme’s headers and footers are special template parts in that you can quickly switch between your current one and another stored in the theme’s library via the block settings area of the site editor when you are editing a template. Just select the template part (1), and choose from one of the other options in the block settings panel on the right (2).

These are patterns to help you get started. They provide a full page of sections that have placeholder content that you can edit to fit your project’s needs. To be developed soon.

Sometimes you use a specific design over and over in your website. To save you time setting up the styles each time, add your design to the patterns library for easy access. Patterns can be non-synced like a note box style you want to use for different notes, synced where if you change the content or design of the pattern on one page it will change everywhere, or synced with an override where the design is synced but the content can be changed. The external resources at the bottom of the page explain how to create your own patterns.

If you have a pattern.json file (for example OpenPress has 2 of such files for their custom footer). You can import it into your patterns collection on the patterns page by clicking the “add new pattern” button on the top right of the patterns page and selecting import pattern. In the case of the footer patterns, you would then edit the current footer template part, delete the blocks within it, then add the newly footer pattern from the block inserter menu.

If you open the document overview panel (the 3 horizontal lines symbol) on a template in the sidebar theme, you will see the following block structure on the left side of your screen:

If you click on any of these blocks, you will see that most of them have a class name in the advanced toggle that is needed to make the theme work, the footer also includes an ID/html anchor. When editing the side bar make sure your content is inside one of the following containers. You should also keep in mind that if you you want to add a picture or something to one of the containers, you might need to add additional CSS to handle that image or content when the sidebar switches to a mobile device view.

Top Group

The top group has CSS that changes the margin when the user views the page on a mobile device.

Middle Group

The middle group does not have special CSS at the moment. If you would prefer to have your navigation in the top group, just move the navigation container there and leave the middle group empty.

Bottom Group

The bottom group has a class name and an ID as mentioned before. These are necessary to hide the footer from the top navigation and recreate the content at the bottom of the page when the user is on a mobile device.

Navigation Container

This container can be moved from the middle group to the top group if that’s preferred. This container is important to ensure the navigation block within switches to the mobile overlay menu when the user is on a mobile device and the nav bar is moved to the top of the page. It also ensures that the drop down lists behave right in desktop view. Nothing else should be placed in the navigation container but a navigation block.

Width

The nav bar is currently set at 350px. If that isn’t wide enough for you, edit the first column in the columns block. No adjustments are needed for the second block.

Color

The background color is set on the column inner block inside “side navigation column” template part. When you change this color keep in mind you will also have to change the “submenu & overlay background” setting to the same color. A simpler workflow is being looked into but unfortunately the wordpress navigation block is not set up well for side nav themes.