Custom CSS styling for Moodle Mobile

Re: Custom CSS styling for Moodle Mobile

by Juan Leyva -
Number of replies: 19
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