How to customize Archaius custom menu

It is quite easy, You just have to use two archaius setting options:

  • Custom CSS: to change custom menu background color.
  • Color of the current item in custom menu.

Procedure

Color of the current item in custom menu allows you to choose the color you want for the current item.

Screen Shot 2014-04-01 at 1.31.15 PM

Custom CSS’ll be use to change the background color of your custom menu:


#custommenu{
background-color: #ff0000; //it could be any hex color code
}
#custommenu .custom_menu_submenu .yui3-menu-content,
#custommenu .yui3-menu-label-active,
#custommenu .yui3-menu-label-menuvisible {
background-color: #ff0000; //it could be any hex color code
}

custom CSS

You can find the hex color code of the color you want using https://kuler.adobe.com/

I hope it helps!

You may also like...

7 Responses

  1. Vic Denniston says:

    Hi Daniel, you helped me with this, and now we have dropdowns in our custom menu and the background of the dropdown is showing up as the default green. I have tried a couple of things so I can add this to the CSS, but I haven’t had any luck
    Thanks
    Vic

    • Vic Denniston says:

      Update: We figured out how to get the background of the dropdown using this:
      #custommenu{
      background-color: #7E807F; //it could be any hex color code
      }

      #custommenu .custom_menu_submenu .yui3-menu-content, #custommenu .yui3-menu-label-active, #custommenu .yui3-menu-label-menuvisable{
      background-color:#7E807F;

      }

      But now we are left with something odd. When you move off the menu item, and down into the sub-menu the highlight of the menu item changes to the green. If you mouseover it, it turnsback to the red. colour.
      You can tsee what I am talking about here: https://viterbouniv.remote-learner.net/login/index.php
      The last item on the menu (Student Services Links) has the drop-down

    • dmuneras says:

      Hi again Vic,

      You have an error of spelling, if you fix it, everything is going to be ok

      #custommenu{
      background-color: #7E807F; //it could be any hex color code
      }
      #custommenu .custom_menu_submenu .yui3-menu-content,
      #custommenu .yui3-menu-label-active,
      #custommenu .yui3-menu-label-menuvisible {
      background-color: #7E807F; //it could be any hex color code
      }

  2. dmuneras says:

    Hi Vic,

    I had forgotten to put part of the CSS to change the color of dropdowns. I’ve updated the post, check if the new CSS works for you. If it doesn’t work let me know.

    Something more, could you give me the URL of your moodle website?, I am curious about how your moodle looks like.

    Best regards,
    Daniel.

  3. Pregunta: En Moodle 2.6 – Para instalar la mas reciente versión de Archaius (Lunes 18 de Agosto 2014)…¿es necesario desinstalar la version actual de Archaius? o simplemente ¿la versión reciente sustityue a la actual al instalarse la mas reciente…? Si hay que desisntalar la actual, ¿cual es el procedimiento? Muchas preguntas, pero muchas dudas…je je
    —————————————————————————————————————-

    English please!
    Question: In Moodle 2.6 – In order to install the latest release (Monday 18 August 2014) of Archaius…is it necessary to uninstall the current Archaius version? The latest release installs on top of the current version? If you have to unistall the current version…¿how do you do it? Too many questions, too many doubts….ha ha!

  4. dmuneras says:

    Buenas noches Jorge,

    Para instalar la versión nueva debes reemplazar la carpeta de Archaius en tu instalación de Moodle. La carpeta, esta en: moodle-installation-directory/theme/

    Moodle detectará el cambio y cuando ingreses como administrador te llevará una página donde te indica que un plugin ha sido actualizado y que requiere tu atención.

    Ahi la debes dar clic en un botón que dice algo similar a: “actualizar base de datos”, y listo, el proceso de actualización se realizará automatico y Moodle te indicará el resultado. (generalmente éxito).

    IMPORTANTE
    ————-

    Como lo indica en los comentarios de Archaius en el sitio oficial de Moodle, este cambio debe ser probado en el servidor de pruebas, ya que he realizado cambios profundos en Archaius. He probado el proceso de actualización en diferentes instancias de Moodle por 2 semanas y no he tenido problemas; pero es muy importante que prueben el cambio en un servidor de pruebas.

    DATO PERSONAL
    —————–

    Los cambios que realizaste, como el del zoom en dispositivos móviles y la dirección URL a la que apunta el logo de tu universidad se deberán volver a hacer luego del cambio.

    Igualmente, cualquier inconveniente que se te presente no tengo ningún problema en ayudarte.

    Que tengas una buena noche,
    Daniel.

Leave a Reply

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