Theming your site in Tahoe
Theming an Open edX site with Tahoe is easy, but it's also a big project! There are lots of different jobs you will want to do that fall under the umbrella of "Theming your site." This article is designed to be a step-by-step guide to the basics of what it will result in a customized, great-looking site. You may want to enlist the help of a web designer to achieve the maximum of what is possible with Tahoe theming.
Note: if you are not familiar with your organization's brand guidelines, you may wish to share this article with someone from your marketing team. They will be able to assist you with gathering all the information and assets you need. Here's a checklist:
- Brand colors (at a minimum, primary brand, base text, CTA buttons background and CTA buttons text colors) - Hex codes recommended
- Logo Files (Use a full color SVG file, minimum of 60x160 px. Alternatively, use a PNG file. Do NOT use JPEG files as the image quality is insufficient.)
- Banner Image (Sometimes referred to as a “hero image” on your index page. Size should be no more than 2,600 x 1,734 pixels. JPEG file is acceptable.)
Appearance Settings can be accessed by clicking on the words Appearance Settings within the left-hand navigation bar of the Management Console. This is the first stop you'll want to make on theming your site.
Here is where you can control your site's color scheme, logos, and fonts. Notice that there are multiple tabs at the top of the page.
The Color Scheme tab is the default first tab you land on when selecting Appearance Settings. If you happen to be on another tab, however, you can always click back on the Color Scheme tab at the top of the page to come back to it.
The first color option on this page is to change the primary brand color. This works the same way as all color-chooser options work within the Management Console. Simply click the eyedropper icon, and choose the color you would like to use. You can also paste in HEX code numbers or rgb numbers. Just make sure you click save.
Your Primary Brand Color shows up in lots of places on your Open edX site, but nearly all of them can be overridden on a case-by-case basis.
Other colors you can edit on this page are:
- Base text color
- CTA buttons background color
- CTA button text color
Next, you'll want to make sure your logos are all in order. Click the next tab to the right to access Logo assets.
To add a logo, simply drag an image file onto the empty logo display box. You can also click on the box and use a traditional file browser to upload your logo.
The more of these logos you're able to fill in, the better. Tahoe is able to dynamically tell which type of logo will look best against each background, so the more options it has to choose from, the more likely you're going to get something that looks great! Click here to read more about adding/changing logos.
The next tab over is the Fonts section.
To change the primary font of your site, simply click the Change primary family button. You'll then be directed to a page where all of the available Tahoe fonts are displayed. Click Select this font family on the font you prefer. Your changes are saved automatically.
LMS Header and Footer
The next thing you'll want to look at is your LMS Header and Footer. Access it by clicking LMS Header and Footer in the left-hand nav bar.
The LMS Header and Footer page provides two different sets of theming options: Header navigation type and Navbar color scheme. Each of these currently only have 2 options at the moment, so don't spend too much time overthinking it!
Note: This is an important part of why it's important to have positive and negative logos. You'll want to make sure that no matter what color your navbar is, the logo will still stand out.
Next, you'll probably want to change some of the default images and text on your Open edX site's homepage. In order to do that, click on Page editor in the left-hand navigation.
This page is where you edit all of the content for all public-facing pages on your Open edX site. Right now we're only dealing with the home landing page, also known as the Index Page. To access it, click Edit page in the Index page row.
Change your header image
This page has a lot going on, but for now we're going to keep things simple. Click on the Show options drop down for the top Layout - 1 column.
This is where you will change the primary banner image on your site. First, click the small trash can icon in the Background image section to delete the placeholder image that was already there.
Now add a new image by dragging it from your computer directly onto the area in Tahoe. You can also click on the area and browse your computer's file system for an image. Click Save changes at the bottom of the screen.
Change the heading text
To change the header text, remain on the same Page editor page, and click the Show options drop down within the Heading text block.
Now within the Text content field, simply type the text you would like to use as your heading text. You can also easily adjust the size, color, and alignment of that text within this options window.
When you're satisfied, click Save changes at the bottom of the screen.