Issue with creating a new component in AtoM

[Miguel Acosta]

Hello, I had a question and I hope you can help me. I've been using AtoM for a few months, and it's been a very useful tool! However, I would like to customize different views, such as adding elements to the header or adding a custom footer. The problem is that after exploring AtoM's file structure, I've had trouble finding the HTML or PHP files that would allow me to make these modifications. I would greatly appreciate it if you could guide me on this. Thank you very much in advance!

[Dan Gillean]

Hi Miguel, 

Welcome to the AtoM community!

The best way to make look and feel changes that will be easy to maintain through future upgrades is to develop a custom theme plugin. 

You have joined the project at an interesting moment, when we are in the process of making a major change to AtoM's look and feel as we upgrade the library used for AtoM's style elements. 

We use the Bootstrap framework for AtoM's CSS - in previous versions this was Bootstrap version 2.3.2, which has been deprecated for a number of years. We have finally managed to upgrade this to Bootstrap 5 recently - but to avoid breaking all of the existing custom themes used by our community, we have been spreading the upgrade process over a number of releases. 

In 2.7, both the new Bootstrap 5 theme and the older default Bootstrap 2 theme are included, but we focused all our internal testing on the older BS2 theme templates, and this older theme remained the default for new installations. In the upcoming 2.8 release, we have reversed this: both themes will be included, but the newer BS5 theme will be the default, and all our internal release testing has been focused on the BS5 templates. We consider the Bootstrap 2 theme to be deprecated in the 2.8 release, but will not yet remove it, giving our community more time to create new BS5-compatible theme updates. Finally, in the 2.9 release we will fully remove Bootstrap 2. 

We have just added some basic documentation with an example on how you can create a BS5 custom theme plugin. Please see: 

• https://www.accesstomemory.org/docs/2.8/admin-manual/customization/theming/#custom-bootstrap-5-theme
  

You can see the basic example skeleton from the docs on GitHub, here: 

• https://github.com/artefactual-labs/arThemeB5Plugin
  

I don't know how different the BS5 process is, but Bootstrap 2 themes work by extending the base theme. That means if you want to create a custom header or footer that changes the STRUCTURE (i.e. html and php) of those files, then your theme plugin would typically include their own copies of the _header.php and _footer.php files with those customizations. Otherwise, changes to CSS classes and elements should apply globally.

Please be sure to study the code yourself (including the example skeleton linked above), but for reference, I am also attaching a PDF that explains how BS2 themes were organized. I imagine that it is still similar!

Most of the rest of what you will need to know can be found by reviewing the Bootstrap 5 documentation, but if you have specific questions, please let us know! We hope to add more resources over time to make it easier for users to develop custom themes. 

Cheers, 

Dan Gillean, MAS, MLIS
AtoM Program Manager
Artefactual Systems, Inc.
604-527-2056

@accesstomemory

he / him

On Sun, Dec 3, 2023 at 9:28 PM Miguel Acosta <acost...@gmail.com> wrote:

Hello, I had a question and I hope you can help me. I've been using AtoM for a few months, and it's been a very useful tool! However, I would like to customize different views, such as adding elements to the header or adding a custom footer. The problem is that after exploring AtoM's file structure, I've had trouble finding the HTML or PHP files that would allow me to make these modifications. I would greatly appreciate it if you could guide me on this. Thank you very much in advance!

--
You received this message because you are subscribed to the Google Groups "AtoM Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ica-atom-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/58e6b550-aa18-46a9-8173-d36f01a46803n%40googlegroups.com.