Your learning environment comes with a standard theme that is highly customizable. It allows you to control many aspects of the look and feel of your site.
To change the look and feel:
- Go to Site Administration > Appearance > Themes > Dual Code
- Click the specific area that you want to modify.
Below are some areas that are frequently customized by administrators.
General Settings. This section allows you to make changes that are throughout your site, such as adding a page background image or setting the page width. For administrators who are familiar with cascading style sheets (CSS), the "Custom CSS" field at the end of this page allows you to add CSS rules that will be reflected in every page of the site, making it easy for you to customize any section of the theme.
Login Page. This section allows you to configure domain-based authentication in a multi-site environment. It is only used in a multi-site environment.
Custom Menu. This section allows you to customize the top menu as well as the user menu. For more details on customization the menus, see the Customizing the Menu documentation.
Features. This section allows you to enable / disable certain features in the theme, such as floating buttons activity navigation.
Colour. As the name implies, this section allows you to change the colours of your theme by using hexadecimal colour codes or simply selecting a colour from a palette.
Header. This section allows you to control the header section of the site (e.g. above the top menu) and change your corporate logo. It also allows you to to define the following:
- Social Networking. Allows you to add links to your social networking tool sites, such as Facebook, LinkedIn or Twitter. When configured, the icons appear at the top right of the screen,
- Mobile Apps. Allows you to add links to your mobile apps, such as your Android or iPhone app. When configured, the icons appear at the top right of the screen.
Font. This section allows you to select and enter the fonts you want to use in the learning environment.
Footer. This section allows you to control the appearance and content of footer throughout the learning environment.
Frontpage. This section allows you to control the look and feel of your front page, or simply redirect users to a specific URL in the learning environment such as the Progress Report. The frontpage settings includes:
- Front page Content Area. Features an HTML editor that allows you to add content between the slideshow and the marketing spots.
- Front Page Blocks. Allows you to add an area where you can add blocks (e.g. calendar block, etc.)
- Marketing Spots. Allows you to add 3 boxes to the front page to highlight certain features, courses or events. For each spot, you can customize the title, the icon, the image, the content, and add a link that can redirect users to another page.
- Alerts. This section allows you to display user alerts on the front page, such as information, warnings, or general announcements. Users can acknowledge the alerts to delete them.
Slideshow. This section allows you to add up to 16 slides on your front page. For each slide, you can customize the slide title, slide image, slide caption, and add a link that can redirect users to another page.
Category Course Title Images. Allows you to set images for each category of courses.
Category Icons / Images. Allows you to set icons / images for each category of courses.The layout of the front page is quite flexible. Once in the theme settings, you can go to the "Block region builder" tab to modify the layout. This tab allows you to add 4 rows of blocks, and specify how many columns (between 1 and 4) for each row. Once you specify the rows and columns you want on the front page, you can save the page to view the layout. You can then go back to the front page and, while in editing mode, add various blocks in the rows and columns.
Step-by-step Guide
To modify the layout of the front page:
- Go to Site Administration > Appearance > Themes > English > Settings
- Click on the "Block region builder" tab
- Enable the "Enable custom block region on front page" setting
- Specify how man blocks you would like for each row
- For example, 3+3+3+3 would add 4 blocks of equal width, while 4+8 would add two blocks, with the 2nd block being twice as wide as the 1st block.
- If you do not need a row, select "Disabled" to hide it.
- Click on the "Save changes" button.
Once you've saved the page, you will see in the "Check your layout" section the layout of your blocks on the front page of your learning environment. You can now go to that front page to add actual blocks (e.g. Calendar block, Slider block, Text block, etc.) to those rows.
The image below shows the general layout of the front page.
