03 January 2025, 3:39

How and where can I style Mahara using CSS?

Also, how can I make a drop down menu like this website on the top? We are in need of something like that.

I can dig into the code, but I think some documentation would be handy. I searched the WIKI but couldn't find anything on styling Mahara.

BTW, is this the correct WIKI? https://manual.mahara.org/en/24.04/

03 January 2025, 6:17

So I ended up copying an existing theme and altering the CSS. This went fine.

The question remaining for now: how to add a drop down menu to the top like on this website? Is there a header.tpl or something that I can edit?

06 January 2025, 8:44

Hi Richard,

The way the top dropdown menu is added to this site is as follows:

1. We have in the htdocs/theme/mahara-org/templates/header/navigation.tpl file the following custom lines at the top

{if $MAHARAORGMAINNAV}
    {include file="header/maharaorg-navigation.tpl"}
{/if}

Which calls a special template to display the extra menu information.

And the styling (CSS) is added by importing a custom scss file in the theme's index file htdocs/theme/mahara-org/sass/utilities/_index.scss

@import "../layout/nav/_maharaorg-main-nav";

And it is in that custom scss the styles for the menus live. And on building the sass the CSS files are created with the extra css code.

Hope that makes sense

Cheers

Robert

31 January 2025, 1:45

Thanks Robert! I will test that.