Adaptable theme - Drop-down menus in above-header

Adaptable theme - Drop-down menus in above-header

by Gonzalo tm -
Number of replies: 8

Moodle version 3.3.2+
Adaptable theme version 1.5.3

Hello!

I plan to modify Adaptable's upper header to change the "Links menu" into drop-down menus. In the attached screenshot you can see an example.

Can anyone give me some hints on where to make these changes? As I plan to insert content (text for the menus), I doubt that using Adaptable custom CSS box is enough. I guess I need to modify the front page code.

Then, do you know whether modifying the core files would be safe? Is there a more simple way to do this?

Thanks!


Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Drop-down menus in above-header

by Mary Evans -

Hi,

It depends what you want to do with the menu?

If you know PHP then you can change the menu using a renderer which can override the core renderer which is in the Parent theme for Adaptable. But then again it all depends on what you would like to do.

Technically there is nothing stopping you adding your own custom menu if you want to use one you found code for online as there are an abundance of menus available, To do that you would have to alter the Adaptable theme to block the custom menu it carries and then add the code for your customized one, which would just be HTML /JavaScript based.

I did something similar in a theme I made and it worked OK, but then I built the theme from scratch, but I learned a lot on the way.

I am sure someone from the Adaptable theme will be able to help you, so I will leave it at that.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adaptable theme - Drop-down menus in above-header

by Gonzalo tm -

Thank you Mary, I really appreciate your answer!

I will try to explain what I want to do with the menu:

I intent to use the upper header as "site map", very much as in this same site we're using right now (https://moodle.org). That is, show some titles (3-5 in my case) that define the main areas of the site. For my site, I find this better than the "Links menu" defined in Adaptable's theme, because you don't need to click on it to see these titles.

Besides, I would like to add drop-down menus to these titles. This is to allow the user to check the site structure at a glance, or to quickly find something inside the site. A good example of this is in the screenshot of my first post. Sorry I forgot to add the sample site's URL in the first place: https://www.entreculturas.org/.

These titles and drop-down menus will link to site pages, created as described in Front page FAQ's, "How can I add a page to the Front page?".

I hope this explains what I want to do with the menu smile

I am looking forward to a member of the Adaptable team to give us some light on this smile smile

Thank you!

Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Drop-down menus in above-header

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

Due the number of menus you can add to the header, the best choice is to join all the menus in a single page, and especially for mobile view.

If you want to modify this feature, just roll back the code located in the header to the oldest 1.5 version. The menus are coded in a render so it is easy to replace.

Average of ratings: -
In reply to Fernando Acedo

Re: Adaptable theme - Drop-down menus in above-header

by Gonzalo tm -

Thank you very much Fernando and Mary. Over all, I was worried that changing the code would mess the whole theme. I will follow your suggestions and give it a try. All the best!

Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Drop-down menus in above-header

by Jez H -

Hi Gonzalo,

Older versions of adaptable did display separate drop down lists for each menu very similar to what you are trying to do here.

The reason we moved them behind a "links" overlay was because they did not work on mobile devices.

In order to keep things sane on mobile the old links menus were hidden below a certain screen size, then users would ask "why cant I access the links on mobile".

So, if you do go ahead and change this give some thought to how it will work on Mobile devices, and if you figure out a good solution let us know!

Average of ratings: Useful (1)
In reply to Jez H

Re: Adaptable theme - Drop-down menus in above-header

by Gonzalo tm -

Hi Jez

This is great feedback, thank you very much!

It all started with my panic to edit the code and crash the whole site. But it's turning into something much more interesting wink

It came to me that it could be interesting to keep the links overlay for smaller screens, and use the drop-down menus for larger screens. I will let you know what comes out.

Kind regards

Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Drop-down menus in above-header

by Gonzalo tm -

Hello Jez, Fernando, Mary

I am having trouble finding the html file inside my server, to edit the front page code. Can you give me any hint on where this code is hiding? wink

Thanks! Regards

Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Drop-down menus in above-header

by Mary Evans -

Which code are you wanting to change? As some code on the Frontpage can be found in the site index.php file which if changed will break your Moodle site.

The frontpage for the Adaptable theme is in your moodle site  > theme > adaptable > layout > frontpage.php

https://bitbucket.org/covuni/moodle-theme_adaptable/src/bf9cc2182330b801a481fa60e62803de31deae32/layout/frontpage.php?at=master&fileviewer=file-view-default

Average of ratings: -