Introduction
This is the same theme we use for the ThemeFlood Knowledge Base. We now maintain the Knowledge Base with RapidWeaver, and needed a suitable theme to present all the knowledge base articles with. Emphasis is placed on faster page loading, easy navigation and minimal styling. Although designed primarily for building educational and support websites with, it would certainly be feasible to use Supporty for other website projects too.Print and PDF optimised
The chances are that quite a lot of people using your website published with Supporty will want to print pages or save them as PDF. But have you noticed how terribly bad the printouts from themes developed by some other companies often look? Thankfully you are unlikely to encounter the same problem with Supporty. This is because our theme has a dedicated print stylesheet to hide all surplus elements and make your content look much better. It will even do clever things like appending URLs after links. You can actively encourage people to print or PDF your pages with simple links like this:<a href="#" onclick="window.print();"><i class="fas fa-print"></i> Print This Page</a>Enter this HTML code anywhere you want a simple text link shown. The Font Awesome print icon is optional. It is also possible to style this as an actual button, using Bootstrap button classes. Bootstrap is built into this theme and ready to use!
Navigation
Supporty uses an accessible split-navigation layout. This means parent pages are displayed within a horizontal bar towards the top and child sub pages are listed as a vertical block within the sidebar. A breadcrumb is displayed at the top of the main content container, to enable the website visitor to see where they currently are in the website. Parent page links are again displayed towards the bottom in the footer bar. Of note, you can navigate to all pages of your website using the arrow and tab keys; making Supporty a really accessible theme.Banner background
An optional banner background can be applied easily, by supplying a suitable image in the 'Banner' drop zone, within the RapidWeaver Site Settings or Page Inspector. This image gets applied as a CSS background and resized to fill the whole banner area. You can either apply the same image to every page of the website, or use different images on different pages. The banner is easily hidden if it's not wanted.ExtraContent
Supporty has a total of 15 ExtraContent containers. You can see where these containers are located by using the 'Preview ExtraContent Containers' setting, within the theme Miscellaneous style settings. Add content to these areas using the normal ExtraContent stacks or code snippets.ExtraContent 1 is positioned at the far top-right of the header container. This is a good spot to place a personal greeting, a login button or some social sharing icons.
ExtraContent 5 and 6 are located within the banner region. ExtraContent 5 is suitable for text or a search bar. ExtraContent 6 is a useful area to place a vertical list of page navigation links or more social media links.
ExtraContent 7 is floated to the top right of the main page content container. This is another convenient place to put buttons or links, like a print button.
Customising the sub-navigation title and last updated text
The small title displayed above the sub-navigation links within the sidebar is easily customised with the following CSS code:#sub_nav:before {
content: 'Quiz challenges...';
font-size: 18px;
display: block;
padding-bottom: 10px;
}This code allows you to change the text shown, the font size and its spacing. Sub-navigation links and this title can be hidden completely in the theme style settings, if you have nothing to display here. For the 'last updated' text string in the footer, the procedure is very similar:
#lastUpdated::before {
content: 'Updated ';
}Enter CSS code in your General > Code > CSS or Page Inspector > Code > CSS settings.