This document explains how to preview custom CSS changes for various user roles before actually applying them to your MindTouch site.
Creating the CSS Preview
- Click the Tools menu located on the top Navigation bar.
- Select Control Panel from the menu that appears.
- Click Custom Site CSS on the right sidebar.
- Paste the code in the appropriate field(s). These fields include:
- All Roles CSS - Overrides the CSS for all user types.
- Anonymous CSS - Overrides the CSS for users that aren't logged in to MindTouch TCS and are anonymously navigating the site.
- Community Member CSS - Overrides the CSS for users that are logged in as Community Members.
- Pro Member CSS - Overrides the CSS for users that are logged in as Pro Members.
- Admin CSS - Overrides the CSS for users that are logged in as Admins.
- Make changes to the code.
NOTE: The user types are listed in the order that the CSS overrides are applied. For example, if you change the color of H1s to green in All Roles CSS, but change them to red in Anonymous CSS, then they will be red for Anonymous users, but green for all other users.
- Click Preview Changes at the bottom of the page.
- Copy the link that has been created in the text box next to the Preview Changes button.
CSS Preview links will remain active for only fifteen minutes. That means that anyone who wants to preview the CSS will have to begin their session within fifteen minutes of creation, or else a new link must been created. However, once you've started your session by navigating to the link, you will remain in CSS Preview Mode until you exit the window. This means that so long as you begin a session within fifteen minutes of creating the preview link, you can continue to preview that CSS indefinitely.
One Link per User
CSS Preview Links are not dynamically named. Each MindTouch user has a specific link that is unique to them, which will not change when they create a new preview. Because of this, each CSS Preview link that is created will overwrite any previous links that have been created. However, if a session has already been started with a previous link then it can continue to be previewed even after the link has been overwritten.
Preparing the Browser
When previewing changes to your site's CSS, your site will automatically log you out. Because of this, we recommend you either open a different browser or a private window to preview your CSS with. This will allow you to view the CSS through the lens of different user roles without having to log out of your admin user (thus losing the CSS changes that you've made).
Private windows are an easy way to preview your CSS changes without limiting your ability to log out. The steps to open an incognito window will vary from browser to browser.
You can access Incognito Mode in Google Chrome by either pressing Ctrl+Shift+N or selecting "New Incognito Window" in the menu that is located in the top-right corner of the browser.
You can access Private Browsing in Firefox by either pressing Ctrl+Shift+P or selecting "New Private Window" in the menu that is located in the top-right corner of the browser.
You can access InPrivate Browsing in Internet Explorer by either pressing Ctrl+Shift+P or selecting "InPrivate Browsing" from the Safety section of the menu located in the top-right corner of the browser.
Because Safari's Private Browsing can not open in a new window, if you are using Safari to make your CSS changes then we recommend that you open a new browser to preview those changes. If you still wish to use Private Browsing, select "Private Browsing" from the Safari menu bar.
Previewing the Changes
Now that you've prepared your browser window, you simply need to enter the URL that was generated from the Preview Changes button. Once you've done this, you should be redirected to the homepage of your site with your CSS applied, and across the top of the screen should be a banner that reads "CSS Preview Mode". You will begin as an anonymous user (signed out from all user accounts).
From here you can navigate your site, logging in as different user types and previewing the CSS changes that you've made.