Theme images

Theme images

by Dean Leggo -
Number of replies: 4

I would like to customise the theme by adding background images. The 'styleable_elements' image on the Moodle Mobile Themes says you can change three background images. But I don't know how to format the images for mobile apps.

What dimension, format, size, quality should I use (for each background image)?


Also the 'styleable_elements' image says what can be modified but not the css selectors to change that specific element. I'm sure it's simple but can someone tell me the structure of the app and what each section is called, or point me to a doc specifying the sections and their selectors.


Cheers,


Moodle Mobile 1.6 (Android)
Moodle 2.7.1

Average of ratings: -
In reply to Dean Leggo

Re: Theme images

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Dean,

you can see the dimensions and format of the images here:

https://github.com/moodlehq/moodlemobile (directory img, and also, in the directory plugins, each plugin has an image)

I suggest you to use the Moodle Mobile Simulator:

https://docs.moodle.org/dev/Moodle_Mobile_simulator

Is not easy to configure, but you will be able to inspect the DOM as a normal web page

Regards

Average of ratings: Useful (1)
In reply to Dean Leggo

Re: Theme images

by Gary Lynch -

Hi Dean 

I would be interested in how you do this.

Would you be willing to share this?

Regards

Gary


Average of ratings: -
In reply to Dean Leggo

Re: Theme images

by Dean Leggo -
Thanks Juan, the simulator wasn't very hard to set-up. I find the app on my phone very buggy, all the alerts contain 'Uncaught ReferenceError: YUI is not defined' with a different file location with each alert. To fix I have to clear the apps data.

The basic structure is;
#main-wrapper
    .header-wrapper
        .header-main
    #panel-left (styled using .user-menu)
    #panel-center
    #panel-right


Basic structure of panel-left;
header (overwrites .header-wrapper)
.nav (list)
    .nav-item (list elements [courses, calendar, etc])
#general-menu .nav (list, nothing special about styling this)
    .nav-item (list elements [help, logout, etc])


Basic structure of panel-center;
.nav (list)
    .nav-item (list elements [section titles])


Basic structure of panel-right;
header [course title]
section
    h2 [section title]
    .nav (list)
        .nav-item (list elements, plus the class of the mod-type. ie mod-url, mod-label)

Average of ratings: -
In reply to Dean Leggo

Re: Theme images

by Dean Leggo -

Now how I changed the images. Using the 5 sizes on the simulator I chose the following dimensions.

background:  800x1280
header 1:  367x76
header 2:  800x44

  • Bold is what the app specifics the height to be.
  • The other numbers are based on the largest device.
  • Small images will repeat to fill the empty space. i.e. when rotating the device.
  • Smaller screens will just crop the images


Background image:
.user-menu { background: none; }
#main-wrapper { background: #1997d7 url(******); }


header 1:
.user-menu header { background: rgba(1, 65, 113, 0.7) url(******); }


header 2:
.header-main { background: rgba(1, 65, 113, 0.7) url(******); }


****** is the code provided by Base64 File Encoder.

Average of ratings: -