Custom theme question

[Bryan Vasquez]

Greetings, 

We have succesfully created a new custom theme for our AtoM installation base on BS2, we moved the search bar from the header to the homepage, but now we like to know is there is a way to set a second custom search bar in the browse page, we already tried to set it but it gets the CSS from the homepage bar and we failed with the attempt of create a second _box.php for its customization.

We truly appreciate if you can guide us in order to implement this change.

This is an example of the changed desired.

[José Raddaoui]

Hi Bryan,

I think you have two options here to have a different style in that search box from the browse page. You could modify the template to use different HTML ids and classes in both templates or you could modify the CSS rules so they only target the homepage search box.

For the CSS, this are the rules for the search box:

https://github.com/artefactual/atom/blob/qa/2.x/plugins/arDominionPlugin/css/less/header.less#L357-L439

https://github.com/artefactual/atom/blob/qa/2.x/plugins/arDominionPlugin/css/less/header.less#L458-L489

https://github.com/artefactual/atom/blob/qa/2.x/plugins/arDominionPlugin/css/less/header.less#L541-L543

You could tweak those rules to only target the homepage by using `body.staticpage.home #search-bar` instead of only `#search-bar`.

To change the HTML in a copy of the search box template, it's located in a couple of places, the id we are targeting above is in the header all other components are in the search box partial:

https://github.com/artefactual/atom/blob/qa/2.x/apps/qubit/templates/_header.php#L39

https://github.com/artefactual/atom/blob/qa/2.x/apps/qubit/modules/search/templates/_box.php

Best,

Radda.

[Dan Gillean]

Hi Bryan, 

Just a quick follow-up: 

As you may know, we are in the process of upgrading AtoM's Bootstrap version. AtoM currently still uses Bootstrap 2.3.2 as the basis of its default Dominion theme - a version that has been unsupported since 2013! Due to the number of backwards incompatible changes it has been difficult to update AtoM's version, but starting with the 2.7.0 release, we have begun the process. 

We are doing this across multiple releases to give our community time to learn everything that has changed, and to deal with any custom themes - because any current custom theme will need to be reimplemented using Bootstrap 5, or it will stop working in the AtoM 2.9 release, which is currently when the AtoM Maintainers intend to finally remove all support for BS2. Basically, the plan is: 

• In 2.7 we included a new  Bootstrap 5 Dominion theme. It's mentioned in the Release notes here. The Bootstrap 2 theme is still the default. We focused all our internal release testing on the BS2 templates. 
• In 2.8, Bootstrap 2 will be deprecated, but not removed. This means that the default installation theme in 2.8 will be the BS5 Dominion version, and our team will focus all internal release testing on the BS5 templates. However, existing BS2-based custom themes will still work. 
• In 2.9, all legacy BS2 code will finally be removed. This means anyone with a custom theme using Bootstrap 2 will have issues upgrading - their custom themes will no longer work. 

More contextual information: 

The upcoming release roadmap, as announced by the Maintainers a while back: 

• https://groups.google.com/g/ica-atom-users/c/uShs0qcwpGY/m/RlfFYRGOAgAJ
  

A thread about Bootstrap 2 vs 5, and how all of this impacts current 2.7 users: 

• https://groups.google.com/g/ica-atom-users/c/DRSexDuOZSs/m/eyVorAqRAAAJ
  

All of this to say: 

If you are currently developing a new custom theme, you have 2 options: 

1. Finish creating your theme using Bootstrap 2, and then you will need to re-implement it fusing BS5 before upgrading to AtoM 2.9 in the future, or
2. Develop your theme now using Bootstrap 5

The challenge with Option 2 is that we do not yet have public resources to help you develop BS5 themes. I can ask our developers if they can provide some pointers in a thread, but you'll have to figure some of it out on your own. So - more work now for less later, or less work now for more later :)

Radda did provide me with some of the related links to the same search box elements in the Bootstrap 5 theme plugin - see: 

• https://github.com/artefactual/atom/blob/qa/2.x/plugins/arDominionB5Plugin/templates/_header.php#L36
  
• https://github.com/artefactual/atom/blob/qa/2.x/plugins/arDominionB5Plugin/modules/search/templates/_box.php
  

And for the (very!) basic CSS currently being used for those elements: 

• https://github.com/artefactual/atom/blob/qa/2.x/plugins/arDominionB5Plugin/scss/_layout.scss#L123-L125
  
• https://github.com/artefactual/atom/blob/qa/2.x/plugins/arDominionB5Plugin/scss/_layout.scss#L128-L131
  

One alternative you could possibly consider in the meantime: Rather than embedding a custom search box on the search/browse page, why not just make the Advanced search panel open by default, where there is already a search box and many other options to further refine your search. This can actually be done without any code, by updating the path used in the Browse Menu. To do so: 

First, click into the global search box. Use the arrow keys to select the "Advanced search" option that appears in the drop-down, and hit enter. Take a look at the URL when the page loads - the browse page includes 2 variables, like so: 

• informationobject/browse?showAdvanced=1&topLod=0
  

It's helpful to understand that in AtoM, the search, browse, digital object browse, and advanced search pages are all just one page with different variables applied to change what is shown. In the above example, the topLod variable determines whether the results are limited to top-level descriptions or not - 0 for no, 1 for yes. This is how we show only top-level descriptions at first when browsing. Meanwhile, the showAdvanced determines whether or not the advanced search panel is open or closed on page load by default - 1 for open, 0 for closed. 

So:  if we want to show the Advanced search menu open by default, we can use AtoM's Menu module to just update the path used in the Browse menu to the Browse Descriptions page. To do so: 

• Navigate to Admin > Menus
• Find browseInformationObjects, and click on it
• You will be taken to a details page, that includes and editable path field - currently it says informationobject/browse
• Change this to: informationobject/browse?showAdvanced=1 
• Scroll to the bottom of the page and then click "Save"

That's it. Now when you click open the Browse menu in the header and select "Descriptions" it will show the Advanced search panel open. This could be a stop-gap measure while you prep a BS5 theme?

In any case, one gotcha I learned while writing this up: turns out this works in 2.6, but there is a regression in 2.7.x making it so this doesn't work! I have added it as a note to a related issue ticket (here), which is currently slated for inclusion in the upcoming 2.8 release so.... no promises, but hopefully this will be addressed soon! 

Cheers, 

 

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

@accesstomemory

he / him

--
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/8b23df13-0bc2-43aa-9aa6-9d597f3f314dn%40googlegroups.com.

[Bryan Vasquez]

Hello Mr Dan and José,

Thank you so much for both of your helpfully and quickly answers, 

We moved forward in our atom customization based in the information provided.

Best,

Bryan Vásquez.