Changing text color of Archaius header and footer

Archaius doesn’t have the option to change the color of the text, but you can do it using Custom CSS

Just add the following CSS in the Custom CSS option:

CSS text color header footer

Here is the code to copy and paste:


#page-header,
#page-footer{
color:red; /*https://kuler.adobe.com/ -> to find color hexcode*/
}

#page-footer a,
#page-header a:link,
#page-header a:visited{
color:green; /*https://kuler.adobe.com/ -> to find color hexcode*/
}

After you add the CSS and save, you MUST clear cache or activate editing mode in order to see changes reflected.

Here is the result:

home changing color header

Captura de pantalla 2014-06-12 a la(s) 10.34.43

[likebtn]

You may also like...

18 Responses

  1. Marcos says:

    Hola Daniel.
    Una consulta relacionada.
    Así como usas el CSS para cambiar los colores de las fuentes: ¿Se puede hacer algo similar para cambiar el background, pero no por un color sino por una imagen que se repita?

    Gracias y excelente tu trabajo.

    Saludos

  2. dmuneras says:

    Hola Marcos,

    RESPUESTA CORTA:
    ——————–

    Si es posible 😀

    RESPUESTA LARGA:
    ——————–

    Si es posible, de hecho yo utilizo varias imágenes de fondo en algunos proyectos, por ejemplo: https://cursos.placetotrain.com/

    Puedes utilizar la propiedad background para indicar la imagen, el color y algunas otras cosas, como que la imagen no se repita. Por ejemplo:

    background: white url([LA URL DE LA IMAGEN]) no-repeat center center fixed;
    }

    En esta página puedes encontrar más información sobre esa propiedad CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/background

    También sirve esta: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    También debes tener en cuenta que tu imagen debe estar publica en internet, la mejor forma de hacerlo es poniendo la imagen en la carpeta de pix/ del tema y llamandola desde el CSS como se explica en esta página de Moodle:

    http://docs.moodle.org/dev/Using_images_in_a_theme

    IMPORTANTE: Con lo anterior la imagen puede ponerse de fondo, pero no significa que escale bien cuando cambian el tamaño de la pantalla y que se vea bien en navegadores viejos como IE7 e IE8. Por ese motivo a veces las cosas se complican más, puedes ver este POST para entender la complejidad: http://css-tricks.com/perfect-full-page-background-image/

    SI TUS USUARIOS NO USAN NAVEGADORES VIEJOS, ERES UNA PERSONA MUY AFORTUNADA.

  3. Ana says:

    Buenas días,
    Por favor, cómo podría quitar el recuadro de búsqueda de la parte superior derecha de la página?
    Gracias!

    • dmuneras says:

      Buenos días Ana,

      Ya lo removí en la nueva versión, voy a agregar una entrada en el blog que explica como quitarlo, pero igual si vas a dmuneras.com/moodle26 vas a ver que ya no esta.

      Que tengas un buen día,
      Daniel.

      • Ana says:

        Muchísimas gracias por la rápida respuestas. De dónde podría descargar esta nueva versión de la plantilla, donde ya no aparece el recuadro de búsqueda?
        Enhorabuena por tu trabajo y un saludo.

  4. dmuneras says:

    En el momento esa versión esta en pruebas, si realmente quieres empezar a probarla desde ya, puedes descargarlo de aquí: https://github.com/dmuneras/moodle-theme_archaius/tree/new_header_page

    En la parte inferior derecha encontrarás un botón para descargar el proyecto como ZIP. Para poder utilizarlo debes cambiar el nombre de la carpeta a archaius y reemplazarla en tu instalación.

    RECOMENDACIÓN

    Si la vas a utilizar primero pruebala en una instancia de moodle diferente a la tuya, así evitarás problemas.

    Daniel.

    • Ana says:

      Al descomprimir el archivo me da error en uno de ellos. Pero lo intentaré igualmente. De todas formas, cuando tuvieras tiempo, te agradecería mucho que explicaras cómo quitar la casilla de búsqueda manualmente de la versión anterior de tu plantilla. Muchas gracias!

  5. Ana says:

    He conseguido instalar la nueva versión de la plantilla, pero me sigue apareciendo la barra de búsqueda.

  6. dmuneras says:

    He empezado a copiar la entrada que deseas, dime si tienes inconvenientes y completamos la entrada según tu experiencia:

    http://dmuneras.com/2014/09/15/remove-admin-search-form-archaius-header-page/

    Daniel.

  7. dmuneras says:

    Has limpiado la cache del tema?. https://docs.moodle.org/26/en/Purge_all_cache como no he incrementado la versión del tema debes hacerlo para ver los cambios reflejados.

  8. Ana says:

    Tienes toda la razón. Ahora he conseguido instalar correctamente la nueva versión de la plantilla y no aparece la casilla de búsqueda.
    Muchas gracias!!!

  9. dmuneras says:

    Me alegra mucho. Me gustaría mucho ver el resultado de tu trabajo. Si esta bien para ti puedes compartirme el enlace de tu sitio para agregarlo aquí: http://dmuneras.com/archaius-gallery/

  10. Hi Daniel,

    I added the custom css (above) to our theme, but for some reason it will not implement. Also, the logo that I uploaded will not appear at the correct size. It is much too small, although I did add the indicated custom size css for it. I have editor mode on and have also cleared my cache. Still, none of the custom css is implemented and the logo stays too small.

    I appreciate your help! Otherwise, a beautiful theme.

    G

  11. dmuneras says:

    Hi Gabrielle,

    Sorry for the delay, but take a look at this video :

    http://quick.as/aa8yfvje

    As you can see, you can change what you want using this CSS rules, just put the rules in your customCSS

    ASSETS

    =======

    #logo img,

    #mobile-logo img{

    max-height:none;

    }

    #page-header .page-header-inner,

    #page-footer,

    #page-footer a{

    color:red;

    }

    #page-header a:link,

    #page-header a:visited{

    color:red;

    }

    Regard,
    Daniel.

  12. Edson says:

    disculpa como puedo hacer para que no aparezca el recuadro de la imagen del usuario en el login?, es que no quiero que pida una imagen solo quiero que muestre el nombre de quien ingreso y la opcion de salir sin imagen

    • dmuneras says:

      Edson, perdón por la demora para responder, lo puedes hacer fácilmente agregando lo siguiente al custom css:

      #page-header .avatar img{display: none;}

      Esto funciona en la última versión para moodle 2.9

      Si estas en una versión anterior creo que lo siguiente funciona:

      #page-header .headermenu img{display:none;}

  13. fij0 says:

    Hola, funciona en moodle 3.1 ? lo he instalado, instala pero no me muestra nada del setting, o sea no puedo modificarlo en nada, no puedo cambiar el logo, ni los colores, nada
    He limpiado todas las cache y demas
    Alguna idea ?

    • dmuneras says:

      Buenos días,

      La verdad no he probado mi tema gráfico en Moodle 3.1, apenas el próximo mes espero liberar una versión para Moodle 3.1 y agregar unas nuevas funcionalidades que tengo.

      Que tengas un buen día,
      Daniel.

Leave a Reply

Your email address will not be published. Required fields are marked *