Your Tender site's public pages (the home page, discussions, the knowledge base, search and login) come in two designs:
- The modern design: responsive, so the same pages work on phones, tablets and desktops. It supports dark mode and a header banner. New sites start with it.
- The classic design: Tender's original layout, with a separate mobile view for phones. Sites created before the modern design keep it until they move.
The support dashboard is the same whichever design your site uses.
Moving to the modern design
If your site uses the classic design, write to us at support@tenderapp.com and we'll move it for you. We do it one site at a time, because your theme comes along:
- We build a version of your theme (colours, logo, and CSS rewritten for the new pages) and can send you a preview link, so you can see your site in the new design before anyone else does.
- When you're happy, we switch your site over.
- The theme's CSS moves into Account & Settings › Settings › Appearance & Text › Custom CSS, where you can change it like any custom CSS. Your classic custom CSS stays below it, inside a comment that starts
---- Your custom CSS from before the new design ----. It's switched off, because it was written for the old pages, and it's there for reference: delete it whenever you like.
If something isn't right after the switch, tell us and we can switch you back.
Checking the other design
Add ?view_version=1 (classic) or ?view_version=3 (modern) to the address of any page on your site to see it in that design for the rest of your visit, without changing anything for anyone else. This is handy for checking how your custom CSS looks. Note that CSS written for one design usually doesn't fit the other.
On phones
The modern design is responsive: there is no separate mobile site, and the same custom CSS applies on every screen size. To style phones differently, use a media query in your custom CSS:
@media (max-width: 600px) {
.tn-frontend #header { padding-top: 8px; }
}
On the classic design, phones get a dedicated mobile view, with Full site and Mobile site links at the bottom of the page to switch between the two. Because classic custom CSS often doesn't suit the mobile view, it has its own settings in Appearance & Text:
- Custom Mobile CSS: CSS used only on the mobile view.
- Activate mobile view for all users: when this is unticked, customers on phones get the desktop pages. Your support staff always get the mobile view on a phone, so you can work on your mobile CSS before turning it on for everyone.
- Your logo for the classic mobile site: a logo for the mobile view.
What you can change
These work on both designs unless noted:
- Logo, logo for dark mode and header banner (modern design only): see Adding a graphic or logo to your Tender site header.
- Colours: see Using Tender Themes.
- Custom CSS: see Styling your install with custom CSS.
- Custom JavaScript and a custom HTML header: see Adding custom JavaScript.
- Home page text: the Personalized Text box in Appearance & Text holds the HTML shown on your home page to visitors who are logged out and to those who are logged in.
- Dark mode: see Dark mode (modern design only).
Custom CSS, custom JavaScript and the custom HTML header depend on your plan; Account & Settings › Plans & Billing shows what each plan includes.