Q: How can I create a custom Theme for my class?
A: You can create a custom Theme for your class by using the new PowerSchool Learning Themes feature and the PowerSchool Learning Theme Library.
To start editing your Theme, open the Theme Editor by clicking Edit Theme in the Manage Class menu.
Within the Theme Editor you will two or three tabs including My Themes, School Themes, and PowerSchool Learning Themes, depending on the features that your school has made available to you. To work off of a pre-existing theme, find the theme in the PowerSchool Learning Themes or School Themes tabs. Click on any theme to Preview it in the editor tool. If you find something you like, select "Apply" to activate the theme and exit the Theme Editor, or select "Apply & Edit" to create a new theme base, using your choice as the base.
This will add a copy of the Theme to your My Themes Tab, so give it a new Theme Name. (You can always change the Theme Name later.) Choosing to "Copy" a pre-existing Theme from the PowerSchool Learning Library will also add a copy of the theme to your My Themes tab. Head back to that tab to continue editing your theme.
Of course, if you are ready to dive right in with a new theme, just click on the Create Theme button in your My Themes tab, and get going! Click on the "Edit" button under your listed Current Theme to get started.
Editing your Theme
The Theme Editor tool is broken up into four tabs: General, Header, Background, and Appearance.
From the General tab, you can edit the Theme Name as well as the Webfonts and font colors for Page and Other Titles, and the font color of Links.
Anytime you see a Webfont drop-down menu in the Theme Editor, click on it to browse and select fonts. As you choose new fonts or colors, they should be Previewed in your class page as shown below the Theme Editor tool.
To change font colors for a particular text-type, just click on the color box located next to it. This will open a color gradient screen, where you can pick just the right color for your font out of the spectrum, or using a hex code. Hit "Set color" to save the changes.
From the Header tab, you can change the Webfont and color of your Class Name, add a Logo, and adjust the Header Background Image, Color, and Opacity.
The Header Tabs are the Pages, Calendar, Connect, and Asses tabs visible from any area of your class. The color you choose for the Header tabs will appear on the tab you are currently using and any sub-tabs contained within it. In this example, the Header tab is customized to a dark red as demonstrated on the Pages tab (and the Add Content Block button).
The Header Background can be filled with a solid color using the Header Background color box. You can also add a Header Image by clicking on "Choose a file" and selecting a file from your computer. Use the image as-is, or tile it by selecting "Tile Header Image" from the drop-down menu. This image will appear behind your header.
The Header Opacity can be set to either Transparent:
To add a Logo to your header, which will appear to the Left of your Class Title, just click on Choose a File beneath the Logo area.
In the Background tab you can choose to upload a Background Image and fill the background will a solid color or color gradient.
The Image will be added to the lower left hand corner of your background and can be presented as-is, or tiled. To tile your background image, choose "Tile background" under the Image down arrow menu.
Click on the color block next to the word Color to select a color for your background. If you would like to have a color gradient background, check the "Use gradient background" box and select your two colors. The gradient will fade from the top of the page to the bottom, first color to second. In the example below, the page will fade from white to dark blue.
In the Appearance tab, you can adjust the Block and Border Styles for your theme.
Block Style options include Independent and Unified.
Border Style can be set to Rounded or Square.
Dimensions of Header and Logo Images:
Maximum Header Height: 175px
Minimum Header Height: 120px
Maximum Header Width: 1230px
Logo images will automatically adjust to fill a height of 70px and a width of 210px.