Creating Custom Skin

This guide explains how to create your very own skin for your portfolio pages in Mahara.  You can share your skin by making it publicaly accessible to other users. You also have the option to Import Skin, that others have shared online or Export Skin to save all your personal skins.

NOTE:

If you wish to use an image as the background for your custom skin, you will need to upload the image file first. Navigate to Files under the Content tab. Click the Choose Files button or drag and drop your image file.  Be mindful of the file size as large files will affect your quota.  The recommended file format for images are .GIF, .JPEG / .JPG and .PNG.

To create a new skin, navigate to Skins under the Portfolio tab. Click the Create Skin button. The next screen presents several tabs with customisation options as follows:

General
  1. Under the General tab, name the Skin title. Add a description if required.
  2. Set Skin access.
    •  This skin is a public skin: Allows other users to see and use the skin.
    •  This skin is private: Only you can use this skin on pages.
  3. Click Save.
Background
  1. Background colour
    • To add a background colour, click inside the text field to prompt the colour picker. Select a colour. Or you can type in the colour’s hex code (i.e. #00FF00 for green).
    • If you do not wish select a custom colour, tick Default. 
  2. Background image
    • Click Add a file, in the pop up select the file and click close.
  3. Background image repeat
    • Don’t repeat: No repetition of the image. This option should only be used if you have a very large image or if the image is larger than your page.
    • Repeat only horizontally: Your image will only be repeated horizontally, but not vertically. This setting can work for a very wide but short page.
    • Repeat only vertically: Your image will only be repeated vertically, but not horizontally. This setting can work for a narrow but long page.
    • Repeat both directions: Your image will be repeated both horizontally and vertically. This setting is the most flexible for your page.
  4. Background image attachment 
    • Fixed: If you select this option, your background stays in place and does not move. Only the page content will scroll.
    • Scroll: If you select this option, your background will scroll together with the page.
  5. Background image position 
    • Set where your background image shall be anchored. Select an option to set the position.
  6. Click Save.
Fonts and colours
  1. Heading font: Choose the font for your headings. You can choose from any of the installed fonts. The font will be applied to all your headings, i.e.
    • page title
    • block titles
    • headings in the text if you marked them as headings
  2. Text font: Choose the font for all other text. You can choose from any of the installed fonts.
  3. Font size: Choose a relational font size. Headings will be changed proportionally.
  4. Text colour: Decide on the colour for text that appears on the page.
  5. Heading text colour: Choose the colour of your page heading.
  6. Emphasized text colour: Choose the colour of your block titles and other emphasized text.
  7. Normal link colour: Choose the colour in which links shall be displayed.
  8. Underline link: Tick this check box if you want your links to be underlined.
  9. Highlighted link colour: Choose the colour of your links when you hover over them.
  10. Underline link: Tick this check box if you want your highlighted link to be underlined.
  11. Click Save.
Advanced
  1. If you know how to edit CSS, you can change other styles for your skin here and overwrite other elements on a page.
  2. Here is example used in the current templates. You will need to copy and paste the CSS in the Custom CSS text field.
  3. Click Save to apply the changes.