CSS Squad

If you haven't already chosen a designer, check out these experienced, recommended CSS Squad experts.

Step 1 - Create a sandbox site

NOTE: In order to create a sandbox, your account must be licensed for microsites. If your account is not licensed for microsites, create a case with Higher Logic Support to request one. Higher Logic will provide one to you free of charge. To learn more, visit the Microsites section of the knowledge base.

1. In the Admin Toolbar, click Site Options > Site List (or right click to open in a new tab).

2. Copy your main site and name it [site_name] sandbox (or something similar).

This microsite will function as your "sandbox."

This is where your in-house or third-party designer can work and test "behind the scenes" without affecting your live site.

Step 2 - Grant access to your designer

Whether your designer is in-house or a third party, the designer has to be able to access your sandbox site in order to edit it. If your designer is a third party, you must create an account in your sandbox site for that person.

• If you have an AMS-managed community (i.e., an integrated membership database), create an account for your designer in that membership database.
• If you have an HL-managed community, create an account for the designer in the Admin interface as described in Add Users.

Your designer must have Site Administrator access in order to do their design and testing work.

See the Manage Site Admins section of Manage Site, Community, and Super Admins to learn how to assign this permission.

Step 3 - Add custom code in Theme Editor

For a comprehensive look at Theme Editor, see Create and Edit Themes.

There are two places in Theme Editor where your designer can add and work with custom CSS code for your site design: Import Theme CSS and Override CSS.

• Import Theme CSS - This is the main location where a designer can insert custom CSS. There are two options:
  • Paste copied CSS code
  • Upload a CSS file
• Override CSS - Your designer will primarily use this section to tweak their CSS to further adjust certain design elements, especially during the testing phase.

Your designer should have Site Admin permissions (refer to the previous section) and should log in as that Site Admin and then be able to access Theme Editor (as described below) to do their design work.

1. In the Admin Toolbar, click Site Options > Themes (or right click for a new tab).

2. On the Theme Editor page, click the Edit button to the right of the Theme to which you want to add a custom design.

NOTE: You can use your live site's Theme for your sandbox. If you do this, we recommend that you make a copy of that Theme, and use that copy as the foundation for your design changes. Click the down arrow icon next to the Edit button and select Copy. Be sure to give the copy a unique name.

3. On the Theme's design page, make the necessary CSS code customizations on the Import Theme CSS and Override CSS sections.

Step 4 - Plan the transition

The most common way for Higher Logic to implement your design updates on your live site is to redirect the main site URL to your sandbox site. This will avoid having to redo a lot of your designer's coding on your live site, and will make sure that the transition is as seamless as possible.

When the site URL is redirected, all of the other URLs will be updated.

NOTE: Any URLs that have been manually coded into HTML content items will not automatically update. We recommend auditing your site for these types of URLs so you can swap them out when the time comes.

You should set a date for the launch of the new site.

Contact Higher Logic Support (support@higherlogic.com) and:

• let us know your planned date and
• include valid login credentials to the new site.

We will use those credentials to ensure that users can go seamlessly through the SSO process.