Changing size of page header

The header of Archaius has four sections:

  • Header top
  • Header page inner container
    • Logo container
    • Login info container
  • Custom menu

The height of the header page is a summation of the height of the header page inner container (<= 150px;), custom menu (<>50px) and header top (45px)

Screen Shot 2014-09-06 at 4.59.36 PM

If you want to modify the height of the header, the best way to do it is make your logo smaller or put a max height for its container, because the height of the header inner page depends of the size of the logo.

Example

I want a smaller header, more or less 200px, so, I will reduce the max height and margin of my logo. I will use the custom CSS option in Archaius setting page:


#logo img, #mobile-logo img{max-height:70px;margin:0px 0px 0px 10px;}

Doing this small change your header page is going to looks like this:

Screen Shot 2014-09-06 at 5.09.50 PM

Instead of:

Screen Shot 2014-09-06 at 5.10.28 PM

Conclusion

The default header size of Archaius is kind of big, so, I wanna reduce it or add and option to allow people to choose the size of the logo.

BTW

Using CSS rules to control images size is ok, and some times it is needed, but it is better if you optimize images too. It is better for performance. Remember that Image are heavy, it is good idea to optimize your images using tools like Photoshop. if your image is not going to have a width bigger than 300px in your screen, there is no reason have an image with 3000px of width

You may also like...

13 Responses

  1. Kasey says:

    How do I get rid of that space between the Header top and the Header page inner container? I don’t like that thin white horizontal line it creates.

  2. dmuneras says:

    Hi Kasey, You can remove that line using the custom CSS setting.

    Add this:

    .page-header-top{border-bottom:none;}

    Daniel.

  3. Kasey says:

    Fantastic! 2 cups of coffee on the way!!

    Kasey

  4. dmuneras says:

    two cups of coffee, great! ūüėÄ

  5. Hamsel Ertome says:

    I tried to change header but i didnt do that, because the header image is too big, so i resize it on http://www.imagesizereducer.com and fits well, thanks dmuneras.com
    Best Regards…

  6. Manuel says:

    Hola DMunera, que tal?

    Ante todo felicitarte por el theme Archaius para moodle, lo uso en una plataforma Moodle 2.8.5+ y est√° muy bien. Te escrib√≠a porque recientemente he visto que me da un fallo en el comportamiento al usar la actividad “libro”, es a la hora de imprir el cap√≠tulo completo (por ejemplo un cap√≠tulo con 5 paginas), al intentar imprimirlo aparece una ventana nueva en la que se muestra todo el contenido del libro, hasta ah√≠ bien, pero cuando desde esa pagina intento imprimir con el enlace que aprece en la parte superior “Imprimir libro” y que te abre el dialogo de impresoras de windows, elija la impresora que elija (ya sea pdf, o impresi√≥n en papel) la impresi√≥n no se hace correctamente, ya que parece que cada p√°gina va a√Īadiendo m√°s m√°rgen a a la derecha y acaba estrechando el texto hasta que lo hace desaparecer. He probado cambiando el tema y la impresi√≥n se hace correctamente, por lo que deduzco que tiene que estar relacionado con el Archanius, tienes alguna idea de porque puede ser eso?

    Un saludo y muchas gracias por adelantado.

  7. dmuneras says:

    Hola Manuel,

    Para serte sincero, nunca he visto como se comporta el tema con la actividad libro, le daré un vistazo y te mantendré informado.

    Muchas gracias por tu reporte,
    Daniel.

  8. I have a course display problem. Can you please suggest me to resolve this issue? For example:
    NAME OF COURSE
    this is the coursesdasdas
    sdhasdjkhasdjhaksjdhasj
    ashdjkasdhkajsdhaksjdha

    INSTEAD OF APPEARING LIKE THIS
    NAME OF COURSE
    This is the courseasdasd
    asdasdashdjkasdasdas
    asdasdasdasdasdasdasd

    Please Help. Thank You for the nice theme.

  9. I have a course display problem. Can you please suggest me to resolve this issue? For example:
    NAME OF COURSE
    GAPGAPGAPGAPGAP this is the coursesdasdas
    GAPGAPGAPGAPGAP sdhasdjkhasdjhaksjdhasj
    GAPGAPGAPGAPGAP ashdjkasdhkajsdhaksjdha

    INSTEAD OF APPEARING LIKE THIS
    NAME OF COURSE
    This is the courseasdasd
    asdasdashdjkasdasdas
    asdasdasdasdasdasdasd

    Please Help. Thank You for the nice theme.

  10. David says:

    how can I change the size of the user picture in the top(header)
    como puedo cambiar el tamano de la foto del usuario cuando aparece en el top(header)

    • dmuneras says:

      Add this to your custom css

      .usermenu .moodle-actionmenu .toggle-display .userbutton .avatars .avatar, .usermenu .moodle-actionmenu .toggle-display .userbutton .avatars img {
      display: block;
      width: 50px; // put the width you want
      height: 50px; // put the height you want
      }

  11. Ed says:

    I just tried the Contact me tab on your website and it appears not to be working. I was hoping to contact you privately about the theme and possibly enlist your help. I really like your collapsed topics in archaius and was wondering if you could help me as I set up my first child theme. We could talk about compensation when you contact me.

    • dmuneras says:

      Hi Ed,

      Thanks I just realized the contact form was broken. It is working again, I will try to contact you by email.

      Regards,
      Daniel.

Leave a Reply

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