Moodle for mobile

Custom CSS styling for Moodle Mobile

 
 
Picture of M Horn
Custom CSS styling for Moodle Mobile
 

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: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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)
Picture of M Horn
Re: Custom CSS styling for Moodle Mobile
 

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!

 
Average of ratings: -
Picture of Diego Racero
Re: Custom CSS styling for Moodle Mobile
 

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.

 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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;   
}
 
Average of ratings: -
Picture of Diego Racero
Re: Custom CSS styling for Moodle Mobile
 

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.

 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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

 
Average of ratings: -
Picture of daniel trujillo
Re: Custom CSS styling for Moodle Mobile
 

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.




 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hola,

puedes indicar las dudas concretas que tienes?

Un saludo, Juan

 
Average of ratings: -
Picture of daniel trujillo
Re: Custom CSS styling for Moodle Mobile
 
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


 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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


 
Average of ratings: -
Picture of daniel trujillo
Re: Custom CSS styling for Moodle Mobile
 

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.




 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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

 
Average of ratings: -
Picture of daniel trujillo
Re: Custom CSS styling for Moodle Mobile
 

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



 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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

 
Average of ratings: -
Picture of daniel trujillo
Re: Custom CSS styling for Moodle Mobile
 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup 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

 
Average of ratings: -
Picture of daniel trujillo
Re: Custom CSS styling for Moodle Mobile
 

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.




 
Average of ratings: -
Picture of Juan Leyva
Re: Custom CSS styling for Moodle Mobile
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hola,

esto no es posible usando la hoja de estilos del sitio.

Tendrías que crear tu propia versión de la aplicación siguiendo este tutorial:

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

Saludos, Juan

 
Average of ratings: -