Planet eStream: Make it your own
Make It Your Own
In version 6 of Planet eStream, on top of a complete user interface overhaul, we added the ability to customise and brand the look and feel of your site. You can now change the colour scheme, logos, banner, add widgets, implement custom CSS, and more. This blog post provides instructions on how to accomplish these tasks in our new interface, with examples of what each setting does and step by step guides to make sure you don’t get lost along the way.
Remember: you must be running Planet eStream version 6 or above to make changes to the interface, and you must also have administrative rights
Please also ensure that the new interface has been enabled; this can be done in one of two ways. The first is to enable it globally by going to Menu > Admin > Web Interface Options and checking the “Enable New User Interface” option. The second method would be enabling it on a by-schema basis by going to Menu > Admin > Schemas and under the relevant schema, selecting Settings and Options. On this page, you will find a New Interface option alongside a checkbox; enable this setting to apply the new interface only to this schema and other schemas with the same setting.
Before: the default Planet eStream Light theme
After: a customised version of the eStream interface
Getting Started
Before we dive into creating custom layouts and themes, it’s worth taking a look at some of the interface options and what they do. To access these settings, navigate to Tools, Admin and General Interface Options. When any of these settings are changed, make sure you click Save Options at the bottom of the screen.
Solution Name
This is the name that will appear across the site and in your browser’s page/tab title, shown below:
You will more than likely want to set this to match the name of your institution.
Disable: Ratings, Lesson Plans, Slideshows, Comments
Planet eStream has many features that can be disabled if you have no plans to use them. Any features you do disable can be re-enabled.
Related Media Tab on View Page
Disabling this option will remove the “Related Media” tab on a video’s view page. Depending on your set up, you may not want people uploading related media.
Allow HTML in Comments
Enabling this setting will allow users to implement custom HTML into their comments, so that they could, for example, change the font size or colour.
Show “Install Encoder” Option
We are frequently asked where to find the link to download the eStream Encoder application. In truth, the download link must be enabled here. Once enabled, you will find the Install Encoder button under the Tools option on the navigation bar. Please note that whatever user wishes to install the encoder must also belong to a schema who has encoder permissions set. These can be found under Tools > Admin > Schemas > Settings and Options. At least one of the “Encoder User” boxes must be checked in order to install the encoder application itself.
Hide “Find Live Broadcasts Option”
Disabling this option will prevent users from seeing the “Live Broadcasts” option under the View tab of the navigation bar. Live broadcasts refer to broadcasts made using the Planet eStream Live Encoder application. So, if you only wanted to share broadcasts with specific users, it would be wise to hide this setting.
Other Interface Options
There are several other interface settings you can play with under the “Interface Options” heading in the Admin panel. These include custom names for categories (e.g. subjects) and access control lists (e.g. just “lists”), custom messages shown to users, settings the search results page size, the default images for audio-only files, etc… You are encouraged to explore these options and configure them in a way that best suits your needs.
Creating a Theme
Themes are sets of colours, logos and custom CSS that can be applied to everyone on an eStream site, or selected users. The advantage of being able to create multiple themes is the ability to assign them to different user groups; for example, the history department may have a blue theme, whereas the geography department may have a red one. You can set which theme is assigned to a schema by going to the schema Settings and Options page under Tools > Admin > Schemas. Here, you may either select a specific theme, or choose “Default”. The default theme is set using a checkbox in the theme settings box.
You can find the Theme Editor under the Interface Options heading in the Admin panel. The Theme Editor is where you’ll create, update and delete themes. To start, click New at the top of the page. Name and Create the theme. You may also click Open, select an existing theme and then Copy it using the button in the Settings panel. This is a good way to make edits to a theme without the risk of ruining the original.
Once you’ve created your new theme or copied an existing one and opened it, you’re presented with four tabs in which to edit your theme.
Settings
As described above, this is where you can copy the currently opened theme and set whether or not it is the default. You may also rename, delete and export the theme, if you were to want to share it with other users of eStream.
Colours
The colours section is where the largest visual changes will take place. You are able to set the colour for various elements across eStream by clicking on the coloured boxes. Here, you can either use the colour picker, or you may enter a hex code. A hex code is a 6-character representation of a colour preceded by a #. For example, the hex code for black is #000000, and white is #ffffff. These codes can be incredibly useful when you want to use the exact same colour for multiple elements, as you can simply copy and paste the hex codes in.
On the next page, you will find some examples of what each option actually changes on eStream.
Note: On the colours tab, you will also find the option to change the header font to one of 16 available options.
Top Navigation Settings
Main Settings
Logos
The logos page allows you to change the default Planet eStream logos found across your site. With this, you can upload branded logos specific to your organisation that really makes eStream feel like your own, personal system. We recommend (and in some cases require) using .PNG files for these logos, more often than not with transparent backgrounds.
Please make a note of the recommended/required pixel size value of each logo. If a logo with the incorrect size is uploaded, it may either display incorrectly or not work entirely.
If, after saving changes to the logo page, you do not see the results immediately, please clear your browser cache and refresh the page.
Before: The default eStream logo
After: Custom logo uploaded to the editor
Custom CSS
Here’s where things get a little complicated, and if you’re unfamiliar with CSS, it’s advised that you first grow accustomed to some of the basics of the language. There are a multitude of online tutorials available on the subject, and when you think you’re comfortable enough with basic property changes, the editor couldn’t be simpler to use. A basic guide to CSS language structure can be found at http://www.cssbasics.com/css-syntax/.
To add custom CSS code, simply paste it into the “Site Wide” editor. Changes made in this box will affect every page on the site, so if you were to make the navigation logo larger, it would be larger universally. To add multiple CSS changes, simply paste them one below the other.
Creating Homepage Layouts
Where themes define the colour and logos used across eStream, layouts define the objects on a page, their contents and position.
To edit layouts, the schema of which you are a user must be granted editing rights. These options can be found under Tools > Admin > Schemas > Settings and Options. Under the Page Layout and Theme heading, you’ll find two settings: Edit All Layouts (used to change the home page and categories page for all users) and Edit Own Layouts (used to edit your personal user page and/or a specific categories page if you have edit/admin rights to the category). Ensure that one of both of these is enabled.
On a page that can be edited, you’ll then find the Edit Layouts button by hovering over the larger banner image; it will appear in the top-right hand corner. Click this button to begin editing the layout for that page.
You can also give individual schemas their own personalised home page layouts. To do this, simply create a new layout, configure it as you wish, and then on the schema settings and options page (mentioned above) you’ll see an option called “Default Home Page Layout”. Simply select the appropriate layout for this particular schema, and any user within the schema will see this layout rather than the default.
You will now be presented with an additional box featuring new editing options:
- Save allows you to save any changes made to the current layout being edited.
- Settings will bring up another menu that allows you to change the name of the layout.
- Close will close the layout editor.
- Add Widget presents the widget box, in which you can create new boxes for the layout containing lists of media as specified by you in their settings. Configuration of widgets step-by-step is outlined on the following page.
Display Methods
Please note: The Carousel option is similar to the Title Grid shown above, but is tailored to use on a touch screen.
Data Source
This setting refers to where the newly created widget will pull its content from. So if you were to choose Site Wide, the widget would display all content on a site that a user has permission to view or if you chose Category, it would only show content in a selected category, etc.
Data Source Settings
This setting determines how the content displayed in the widget should be ordered. For example, choosing Last Viewed would display the most recently viewed videos first, whereas Title would display content alphabetically.
There are several other things you can change when editing page layouts. The first of which is the ability to toggle the search bar on or off, by hovering over the widget until the edit icon appears (a white pencil).
This white pencil icon also appears when hovering over other widgets, and will allow you to change any settings you previously entered. We are often asked how to change the banner image on the front page, and this is achieved in the same way. We recommend you use a new banner image that is 1920x300 pixels in size – the display is responsive and will scale the banner appropriately.
You can also embed widgets into web pages by hovering over them in edit mode and pressing the share icon, as highlighted below. However, you first need to ensure your schema has the ability to do this by going to Tools > Admin > Schemas > Settings and Options and ensuring the “Embed Widgets” is checked.
Copy this code and paste it into a HTML editor within a website, or the HTML source code of a site. The content within the embedded widget will depend on how the “widget user” is configured – this can be found under Tools > Admin > Authentication Options at the bottom. Whatever user this is set to determines the view rights for someone looking at an embedded widget; so for example, if you have a Student user with view rights to only one publishing policy, and you set the widget user as Student, any embedded widgets will contain videos only from that policy.
There isn’t currently a way to drag-and-drop widgets to re-order them on a page; instead, we suggest you create them in the order you wish them to appear on the page. So if you create a carousel followed by a slider, the carousel will be presented at the top of the page with the slider below it.
Creating Category Layouts
Layouts for categories work in much the same way as the homepage layout editor described above; simply select “Categories” from the drop-down list of the “Select layout to edit” box that appear when clicking “Edit Layout”.
This will allow you to edit the global categories page; the place where a user can see a list of all categories they have access to, often found by clicking the Categories button on the top navigation bar. However, on the “Add Widget” area of the Category page editor, you will see an additional widget option called Category Thumbs. This is used on the page by default and displays a grid of thumbnails for all existing parent categories.
You can also edit the “Default Category Page” layout, again from the drop-down menu, and any changes made here will affect every individual category page. However, you also have the option of creating unique layouts for each category page. To do this, go to the page in question in select “Edit Layout”. You will be presented with the following (or similar) dialogue box:
This essentially means you will be creating a new layout page unique to that category. Select OK to continue, and now any changes made to this layout won’t affect any other category pages.
Good to go!
Congratulations! You’re now familiar enough with the customisation option in eStream to create your own unique and identifiable branded theme for your organisation. We recommend you create a new test theme from scratch in the editor and make sure you’re happy with it before applying it to your site.
Advanced Customisation
Once you feel comfortable using the features described in this guide, you may wish to experiment with some more advanced customisation that can only be done through the Custom CSS editor. Though this guide touched on the editor briefly, a more comprehensive document that includes various examples you can use in your site can be found on the knowledge base under "Advanced Theming / Custom CSS" .