Custom CSS styling for Moodle Mobile

Custom CSS styling for Moodle Mobile

by M Horn -
Number of replies: 23

I want to apply custom styling for our institution's students using Moodle Mobile.

I have found the following at http://docs.moodle.org/25/en/Mobile_app#Style_customization 

Style customization

The app can also retrieve your custom styles from your Moodle site. Since the app is a HTML5 app, you can apply safely any CSS, CSS2and CSS3 style.

In your Moodle installation go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles. The original styles to override can be found here: https://github.com/moodlehq/moodlemobile/tree/master/css

The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)

Once the user is logged in the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles.

Notice that on the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app.

 

The only "problem" is that I don't really know CSS (I can read and understand the code and make basic changes, e.g. colours etc.but that's were it ends)

 

And therefore I have these questions:

1. "The app can also retrieve your custom styles from your Moodle site" - Where is this CSS file located? I assume it is a single file?

2. "The original styles to override can be found...." - Do I need to download both the style.css and layout.css as well as the fonts-folder? When I've made changes to style.css and layout.css where is the best place in my Moodle installation to place it?

3. What is the "format" of the 'mobilecssurl' needed? Do I need to include my site url or can I just link to it as /themes/... ?

4. Should the 'mobilecssurl' link to a single CSS file (i.e. ending in .css) or does it link to a folder contatining the CSS file(s)?

 

Thank you smile

Average of ratings: -
In reply to M Horn

Re: Custom CSS styling for Moodle Mobile

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

Hi,

1. Its a single file you must upload to your Moodle installation and add the URL in the configuration field mentioned in the documentation

2. Nope, you need to override the styles mentioned in style.css. You new css file should have only the styles you want to modify

3. It's a url, it should be placed in your moodle installation but it can be placed anywhere

4. single file

 

Here you have an example:

http://mm.cvaconsulting.com/moodle/local/mobile.css

It changes the user fullname color from white to black

Average of ratings: Useful (1)
In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by M Horn -

Thank you, Juan. I managed to change the colour of the Moodle Mobile app for our institution.

It does, however, seem to be a hit-and-miss as it reverts back to the default orange colour sometimes. I'll try to see if there is a "pattern", but for now I'm sorted.

 

Thanks again!

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by Diego Racero -

Hy Juan. I just followed the instructions to customize the Moodle Mobile style.

Download the file from GitHub page, modified some aspects of style.css and then uploaded it to my moodle site in the Administration->plugins->WebServices->Mobile. I wrote an URL which is working properly because when I typing It in the navigation bar I see the style.css file.

 

The problem is that I still seeing the orange page.

I could not realize what I'm doing wrong, could you give some advice?

 

Thanks in advance.

In reply to Diego Racero

Re: Custom CSS styling for Moodle Mobile

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

Hi Diego,

maybe the styles are not working as expected, I mean, the style css is being downloaded by the styles doesn't change because an error in the CSS

Please, create a new CSS with only this style, and restart the app (purge all caches and refresh) you should see that your username is now black instead white (at the top of the orange menu)

.panel.user-menu {
    color: black;   
}
In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by Diego Racero -

Hi Juan, I just replaced the code you sent in my styles.css file but I didn't see any change. 

 

Is there any other problem?. May be the version on Moodle?

 

I'm actually using 2.4, should I change for other one most new.

 

Thanks in advance.

In reply to Diego Racero

Re: Custom CSS styling for Moodle Mobile

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

Hi,

if you can create me a test user account in your Moodle site I will check what is happening, please, write me a private message with the credentials

Regards

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by daniel trujillo -

Buenas tardes, tengo muchas dudas sobre la personalización de moodle mobile.

1- En el apartado de CSS mobilecssurl tengo que poner una url, haciendo referencia al documento que tengo en moodle, para poder cambiar los colores que moodle maneja para dispositivos móviles.




In reply to daniel trujillo

Re: Custom CSS styling for Moodle Mobile

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

Hola,

puedes indicar las dudas concretas que tienes?

Un saludo, Juan

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by daniel trujillo -
Hola que tal, oye no te molesta si te pido ayuda como mi asesor, es que soy novato en esto y no se mucho. vi uno de tus estilos que hiciste o modificaste, para la aplicación de moodle mobile, cambia el color amarillo por el azul, lo que hice yo fue agarrar tu código (espero y no te moleste, ya que modifique el color), y en vez de azul lo pase a otro color e hizo los cambios en la aplicación, la app tiene que tener los colores de la universidad en la que hago mi estadi. a hora lo que quiero hacer es cambiar el color donde se introduce la url y hay mismo poner el logotipo de la imagen de la universidad, no se de que manera puedo hacer eso, también para poder hacer eso se hace en la style.css o eso es muy a parte.

Logre cambiar el color de la app donde se introduce la url y puse la imagen que quería, pero eso lo logre hacer bajando el emulador de moodlemobile-master ya que hay se encuentran los archivos y pues de esa manera lo pude hacer, y vi que esa parte es una imagen / fondo color amarillo. Pero de esa manera como lo hice fue local. pero no se si se pueda hacer como lo hiciste para cambiar los colores en css y subirlo directamente en la plataforma de moodle.  Subo la imagen, quiero cambiar el color y poner una imagen al lado de logotipo de moodle. Espero y me puedas ayudar. Gracias

Attachment app.png
In reply to daniel trujillo

Re: Custom CSS styling for Moodle Mobile

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

Hola,

la hoja de estilos CSS está asociada al sitio que te conectas, por este motivo, no es posible cambiar el color de la página de login ya que en ese momento no hay ningún sitio activo.

Si quisieses cambiar este diseño, tendrías que hacer una personalización completa y compilcar tu propia aplicación siguiendo este tutorial:


http://www.slideshare.net/juanleyva/creating-a-custom-moodle-mobile-app-moodle-moot-spain-2014


In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by daniel trujillo -

Hola Juan gracias, smile 

Aún no logro entender tu tutorial de como hacerlo. si ya logre cambiar todo el color amarillo por otro, como le hago para subir los archivos y que se muestre los cambios en la aplicación no se si se pueda.


Attachment imagen1.png
Attachment imagen2.png
In reply to daniel trujillo

Re: Custom CSS styling for Moodle Mobile

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

Hola,

tienes que subir la hoja de estilos a tu servidor Moodle, configurar en la configuración de Moodle que use la hoja de estilos que has subido y ya está

Está explicado aquí

http://www.slideshare.net/juanleyva/creating-a-custom-moodle-mobile-app-moodle-moot-spain-2014

y aquí

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

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by daniel trujillo -

hola es lo que hice, añadí mi hoja de style.css en la plataforma de moodle (servidor moodle) 

CSS

mobilecssurl: 

nada mas puse el link donde tengo mi estilo css tal y como se muestra en la imagen


disculpa pero no entiendo tu tutorial, como te digo apenas estoy en esto y pues apenas voy adquiriendo experiencia smile


Attachment image.png
In reply to daniel trujillo

Re: Custom CSS styling for Moodle Mobile

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

Hola,

en principio con eso debería funcionar. 

En la captura no veo la URL de tu CSS al completo, la puedes poner por aquí para probar yo que puede estar pasando?

Saludos

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by daniel trujillo -
In reply to daniel trujillo

Re: Custom CSS styling for Moodle Mobile

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

Hola,

a mi me está funcionando, veo la aplicación en rojo cuando añado esa URL

Quizá debas hacer click en el botón de refrescar (arriba del menú principal), pero a mi me funciona


Saludos

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by daniel trujillo -

Hola que tal,

La parte interna de la app ya esta correcta con los colores de la universidad, el cual es la hoja de estilo que ya te envié.

Lo que también quiero hacer; es que a través de la hoja de estilo, pueda realizar el cambio externo de la aplicación, es decir, que al iniciar también aparezca los colores de la universidad y su logotipo, no se si esto es posible dentro del mismo archivo.


te anexo las imágenes

Gracias.


Attachment fon.png
Attachment fon2.png
In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by Sergio Alfaro -

Hola Juan,

Necesito tu orientación.

Quiero dejar por defecto en el apk  de descarga del moodle mobile la url de mi institución.

como y donde hago esto ?

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by Patricio Moron -

Hola Juan,

No se si tendría que preguntar por acá mi duda, pero me esta pasando lo mismo, no logro que me tome el css agregado en la ruta dentro del setting mobile.

En mi caso el archivo se ubica en el path local (https://misitio.com.ar/local/mobile.css)

Puede ser que el plan gratuito de moodle mobile app no me permita trabajar un css personalizado?

Desde ya muchas gracias

In reply to Diego Racero

Re: Custom CSS styling for Moodle Mobile

by Francis Vendrell -
Hi Juan,

I am having the same problem than Diego (Moodle 2.8.3 in my case).

I used the most simplest css file (the one you suggested above), checked that the url is correct, refreshed all caches, forced the css synchronization, waited 5 mn but still can not obtain the expected result.

Any idea will be welcomed!


In reply to Francis Vendrell

Re: Custom CSS styling for Moodle Mobile

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

Hi,

we just released Moodle Mobile 2 (last friday), it's now available for Android and in review for iOs.

You should try with the new styles:

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

Regards, Juan

In reply to Juan Leyva

Re: Custom CSS styling for Moodle Mobile

by Francis Vendrell -

Hi Juan,

Thank you for your message. I could make custom css style work for the last friday Moodle Mobile app for android.

smile