This feature is available for Edwiser RemUI v3.9.8, v3.10.1 and higher .
Path: On Top right header menu (for Moodle 4.0) OR in left navigation bar (for Moodle 3.9, 3.10 and 3.11) locate the customizer (paintbrush icon) option from the secondary menu (Horizontal bottom menu)
As soon as you turn on the live customizer you can select from the display options available to check how your site looks in responsive modes.
Also, the big blue arrow button is to hide the live customizer menu.
Here, you can insert the favicon for your site.
- Expected image size is 16×16 pixels.
- Accepted file types are web .gif .jpe .jpeg .jpg .png .svg .svg
Here, you can set Font Style/Family; Font Size; Font Weight; Text Transform; Line Height; Text Colour; Link Colour and Hover Link Colour.
Here, you can set Font Family, Font Weight, Text Transform, Text Color, and Line height for Headings (H1 – H6)
Here you can set the :
- Site-wide Primary Colour for your website.
- Choose page background between solid colour, image or a gradient effect.
For Primary buttons on your Moodle site, you can set the Border, Typograpghy body and Padding.
ii) Secondary and Default
For Secondary and Default buttons on your Moodle site, you can set the Colours, Border, Typography body and Padding.
5. Form Settings
Form Element design: Here you can choose between three designs for your inbuilt Moodle forms.
4. Icon Settings
Here you can select between 5 icon designs for the theme icons.
1. Site Identity
You can choose a site logo format between :
- Icon and Sitename – In this format, you could upload icon as well as the site name and they will be correspondingly displayed. (You can choose an icon from the list of font-awesome icons)
- Logo – You can upload an image of your choice from the given uploader
- Site name with logo – You can display the site name along with the logo, however, the layout in Header > Primary > Layout desktop should be set to Top icon bottom menu.
Here you can set the position of the logo for Desktop Layout and Mobile Layout. You can also adjust the size and colour of the bottom border of your header.
If you enable the set site colour of navbar the primary colour set in global > colour will also be applied to the header bar.
If you prefer to use a different colour for the header disable set site colour of the navbar and select the background colour and text colour from the default menu.
You can also set the background hover and text hover for the header menu from the hover menu here.
Not available in Moodle 4.0 since left navigation is now completely removed.
1) Main Sidebar (Main Navigation bar)
Here you can set the colour for
- Link Text – Simply changes the text colour of links on the left navbar
- Background- Simply changes the background colour of the link on the left navbar
- Link Hover Text- Changes the text colour of links on the left navbar when the mouse hovers on it
- Link Hover Background – Changes the background colour of the link on the left navbar when the mouse hovers on it
- Active Link- Active link refers to the page which is currently displayed on the screen and you can set the colour for that link
- Active Link Background – Changes the background colour of the active link in the left navbar
Screenshot for reference:
2) Sidebar Links
From here you can hide the links like Dashboard, Site Home, Calendar, Private files etc from the left navigation bar.
3) Secondary Sidebar
The Secondary sidebar refers to the horizontal menu bar at the bottom of the left navigation bar.
You can set the background colour, Icon colour, Link hover background and the size of the icons on the secondary menu.
You can customize the login page (/login/index.php) from here.
Please note that the Login page cannot be previewed in the customizer because it can be viewed by logged-out users only. You can test settings by saving and opening the login page in incognito mode.
Here you can add a logo for your login page which will be displayed on the login panel. Note: Please make sure that in RemUI settings the Choose site logo format is set to logo only
ii) Color Customization
Here you can choose the Page background Text color Link color ,Link hover color of your login page panel.
iii) Login panel position:
Here you can choose the side on which the login panel should be displayed on your login page.
i) Site Description:
You can add description about your site here which will be displayed on the loginpage.
ii) Upload Background Image:
Here you can add an image as a background for the login page.
iii) Login background opacity:
Here you can apply opacity for your login page background image.
This section helps you customize the footer section of your Moodle site.
Here you can set Background color, Text color, Link text , Link hover text for the footer section.
ii) Social Media Settings:
In this section, you just have to add links to your relevant social media account so that your users are redirected to those pages.Social network icons will be displayed in the footer of your Moodle LMS.
Here you can set the number of sections on your entire footer section
i) Widget Numbers:
Set the number of Widget/Sections you would like to have
ii) Widget Size:
Set the size of your each widget/section by simply dragging
A) Type: Here you can set the widget Type out of following three: Social media links, content and Menu
a) Social Media links: Simply select the social media links you would like to display
b) Menu: For menus you need to add a title of the menu and menu items. You can also set the orientation of the menu
c) Content: For content you need to add a title of the content and body of the content in the content section
i) Terms & Conditions Link :
Here you can add the link for your terms and conditions page.
ii) Copyrights Content:
If enabled you set the copyright content and even use the following tags in your content:
[site] – Site name
[year] – Current year
You can add custom CSS in this section but do note that the changes will be reflected throughout the Moodle site.
Once done with all the settings you can click on the save button or simply reset to previous changes by clicking reset button available on the top menu