Custamizig atom site

220 views
Skip to first unread message

KUNA SRIRAM

unread,
Sep 13, 2023, 1:18:55 AM9/13/23
to AtoM Users
Kindly help me by providing documentation on command line to customize atom site.
I am trying to update logo & menu icons ...i am facing an error while replacing my desired logo.


Sriram
Library

KUNA SRIRAM

unread,
Sep 13, 2023, 2:20:57 AM9/13/23
to ica-ato...@googlegroups.com
I have the logo(png) 50 pixel downloads

i tried in root
mv /usr/share/nginx/atom/favicon.con /usr/share/nginx/atom/logo.png/
it did not update my logo
 

--
You received this message because you are subscribed to a topic in the Google Groups "AtoM Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/ica-atom-users/GjS0Ullh5G8/unsubscribe.
To unsubscribe from this group and all its topics, 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/f964c641-e4d2-4676-aeea-8895f338471fn%40googlegroups.com.

Dan Gillean

unread,
Sep 13, 2023, 9:11:59 AM9/13/23
to ica-ato...@googlegroups.com
Hi Kuna, 

I'll try to provide some resources below. For the logo, it's simple, and I will provide step by step instructions. Changing the menu icons is more complex, and I will provide as much information as I can. 

Updating the default logo used in AtoM's header

To update the AtoM logo with your own, you will need to replace the existing file, not just add your own in the root directory. Make sure that: 
  • Your logo is a PNG file
  • Its height doesn't exceed 50px (so it doesn't break the default header layout)
  • You have renamed it to logo.png
The current logo you will want to replace is found in the images subdirectory - i.e. the full path will be something like /usr/share/nginx/atom/images/logo.png. You can see it in our code repository here:
After replacing it, you will also want to clear all caches so that you see the changes. First, clear the application cache: - you can run the following command-line task from AtoM's root installation directory:
You will also want to restart PHP-FPM, which has its own cache. The command varies a bit depending on the PHP version you are using - in the latest 2.7 releases where AtoM uses PHP 7.4, use: 
Finally, if you are still not seeing the changes, remember that your web browser also has its own cache. You should either clear that, or test in a private / incognito browser window, where the cache is typically disabled by default. 

Custom theming and other changes to AtoM's look and feel

For customizing the menu icons, things are a bit more complex, and you will need to do some of your own research, as I won't be able to provide step-by-step instructions via the forum. I will give you enough context to be able to study the code further yourself and find additional resources to help you, however - and perhaps other users in the forum will offer their own tips. So: 

Theming and theme plugins

First, it's worth mentioning that if you are going to start changing more of AtoM's look and feel, we recommend that you develop your own custom theme plugin, rather than altering the base theme files directly. This will make it much easier for you to upgrade your AtoM site in the future. If you make changes directly to one of the Dominion themes, then you will need to manually reapply those changes every time you upgrade - and if we have altered the source files, then you may need to deal with conflicts or even redesign your changes from scratch. Instead, it is generally much easier to manage your custom changes by creating your own custom theme.  Theme plugins are pretty well contained, making them easier to move between installations, for example. 

Custom themes in AtoM work by starting with the style rules and assets of the base Dominion theme, and then extending these with custom changes. For example, if you like the basic look and feel but want a custom header for your application, you can make a theme plugin that just has a custom _header.php file - this will override the base Dominion theme's header file when enabled. We include the arArchivesCanadaPlugin as an example theme for developers to study, so you can see exactly how it extends the base Dominion theme and adds all kinds of changes. You can see the ArchivesCanada theme in your local AtoM instance by going to Admin > Plugins, and changing the theme there. You can study the code for the arArchivesCanadaPlugin here in our code repository: 
We have some general resources to help developers get started. See: 
Bootstrap 2 vs Bootstrap 5

Here is where things get more complex. We are in the middle of a multi-release process of upgrading Bootstrap, which is the library we use for all our CSS and theming elements. The current default Dominion theme in AtoM 2.7 used Bootstrap version 2.3.2 - a very old version that hasn't been properly supported since 2013! Currently, we are in the process of upgrading to Bootstrap 5. Bootstrap 5 introduces a lot of changes, including many benefits such as better responsiveness (so AtoM will work better on devices like phones and tablets out of the box) and accessibility (so it will support more ways for users to interact, including better screen reader support, easier font resizing, better keyboard navigation, etc), and in general, it just modernizes the look and feel of everything and includes a lot more patches for contemporary security issues, etc. You can see all the Bootstrap 5 public documentation here: 
We have actually already developed a new replacement Dominion theme for AtoM using Bootstrap 5 - you can see it for yourself by going to Admin > Themes and changing to the arDominionB5Plugin.  

Soon, we intend to remove Bootstrap 2 entirely. However, because there are many users out there who have custom themes - and because AtoM custom themes work by extending the base Dominion theme (built in Bootstrap 2), if we remove BS2 without giving people time to upgrade their custom themes to BS5, then all custom themes will be broken the next time users upgrade. This is why we are doing the process slowly over multiple releases. In 2.7, we added the new Bootstrap 5 (BS5) theme - developers can study it and start using it and upgrading their own custom themes now, using the public Bootstrap 5 documentation as a guide. However, we focused most of our testing efforts on BS2 in 2.7, and kept the older BS2 theme as the default. 

In the next major release (AtoM 2.8) we will still keep both Bootstrap versions, but now we will focus our testing on Bootstrap 5 theme templates. Bootstrap 2 will still be included, but not officially supported - the Maintainers are deprecating it with plans to fully remove it in the next (2.9) major release. So: anyone who hasn't yet upgraded their custom themes to use Bootstrap 5 can still upgrade to 2.8, but may encounter more bugs, and will need to make changes before 2.9. 

Finally, as noted, in 2.9 and onwards, we will only support Bootstrap 5. Anyone with a custom theme that is based on BS2 will find it broken when upgrading. 

All of this has been announced in this forum as well as mentioned generally in our release notes - see: 
We will be providing further announcements and resources to help users upgrade their themes once 2.8 is released. 

BS5, timing, and new theme development

This is why things are a bit tricky in terms of timing right now - while our developers do intend to create some basic resources to help newer developers upgrade their themes, we have not YET done so, and will not likely have that guide ready until part way through the 2.8 release cycle - i.e. it may not be until early next year. Experienced developers can read the BS5 documents themselves, study our code, and make the changes now - but we cannot currently easily help with this or point to any of our own resources. 

So, for you this is tricky timing if you want to develop a custom theme. The best solution would be to: 
  • Use the Bootstrap 5 Dominion theme as your base theme
  • Read the Bootstrap 5 documentation
  • Develop your custom theme based on BS5, so it is future-proofed and ready for 2.8 and beyond. 
However, as I said, this means we don't have any guides or resources right now to help guide you. Instead, you can: 
  • Build a Bootstrap 2 custom theme
  • Use the resources provided above in this message to guide you
  • Wait for us to prepare a guide for upgrading your theme, and upgrade it later before 2.9
How you choose to proceed will depend on how comfortable you are experimenting and learning on your own!

Theme plugins and menu icons

Finally, we come back to the icons themselves. This also isn't simple, unfortunately! 

We don't have a directory in AtoM with a bunch of PNG icons for our menus. Instead, AtoM uses an icon font called FontAwesome: 
An icon font uses SVG graphics that can be styled by CSS - so instead of needing one large and one small icon, or one white version and one red, you can use one font icon from the library with different CSS rules for sizing and color as needed. 

However you will see that this means that FontAwesome is kind of embedded in each theme plugin, which is why I recommended using a custom theme plugin to make changes. In Bootstrap 2, we directly include a directory with a number of FontAwesome assets imported, here: 
In Bootstrap 5, rather than store everything locally, we merely import them as a library, here: 
Now, you can see how they are used and styled throughout the custom templates in our theme plugins by searching "fontawesome" in our code repository:
If you just want to use a different fontAwesome icon, you can look in the FontAwesome free library: 
Find the name of an icon you like, find the place in our plugins where the current icon is called and styled, and change the name of what icon is used. You can also use CSS to change the look and feel, such as style, color, background, hover effects, etc. You will then need to recompile your custom theme if using Bootstrap 2 (see below) to see the changes. 

If you want to use a totally different icon or icon font, things will be more tricky and you will need to make changes in multiple places! Good luck! 

Recompiling your custom theme assets

Remember if you make changes in a Bootstrap 2 theme, you will need to recompile the CSS before it will show up. To do so, first there are some dependencies to install just once, if you don't already have them: 
  • sudo apt install npm make
  • sudo npm install -g "less@<4.0.0" n
  • sudo n stable
  • sudo npm install
  • sudo npm run build
Then whenever you make changes to one of the themes, run the following to recompile the theme assets: 
  • sudo make -C /usr/share/nginx/atom/plugins/arDominionPlugin
  • sudo make -C /usr/share/nginx/atom/plugins/arArchivesCanadaPlugin
And do the same for your custom theme plugin, i.e. if you named it arMyThemePlugin, then run: 
  • sudo make -C /usr/share/nginx/atom/plugins/arMyThemePlugin
Whew, that was a lot! Probably not the answer you were expecting, but I hope it helps - good luck!! 

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/CAMSsUrS7iGXGqQaix70AeCQhcZd_tw8%2BosFco7An%3D0s9igXJzw%40mail.gmail.com.

KUNA SRIRAM

unread,
Sep 13, 2023, 11:27:45 AM9/13/23
to ica-ato...@googlegroups.com
Hi Dan,
I tried replacing & cleared cache & restarted php. but still it is reflected my log that i set but its showing in the path at usr/share/nginx/atom/images/logo.png

Kindly let me know any other way

To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/CAC1FhZLuC9wXqvij5LSD%3DFiRnaYJUMiT2U_vahPhaBDWsxdSfA%40mail.gmail.com.
Screenshot 2023-09-13 205659.png

Dan Gillean

unread,
Sep 13, 2023, 12:03:57 PM9/13/23
to ica-ato...@googlegroups.com
Hi Sriram, 

My apologies. You may need to recompile the theme for the logo change to show up. I can see you are using the newer BS5 theme. I included instructions on how to do this in my previous email but I will copy them here for reference. 

There are some dependencies to be installed  - if you haven't done this before, it is a one-time thing: 
  • sudo apt install npm make
  • sudo npm install -g "less@<4.0.0" n
  • sudo n stable
  • sudo npm install
  • sudo npm run build
Now  whenever you make changes to one of the themes, run the following to recompile the theme assets: 
    • sudo make -C /usr/share/nginx/atom/plugins/arDominionPlugin
    • sudo make -C /usr/share/nginx/atom/plugins/arArchivesCanadaPlugin
    • sudo make -C /usr/share/nginx/atom/pluginsarDominionB5Plugin
    If it's still not working, clear your browser cache as well! 

    Cheers, 

    Dan Gillean, MAS, MLIS
    AtoM Program Manager
    Artefactual Systems, Inc.
    604-527-2056
    @accesstomemory
    he / him

    To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/CAMSsUrQ3NvTs-fgQRDfgbqOBZq5hFs_irqUM3%2B6MckPDhW1GjQ%40mail.gmail.com.

    KUNA SRIRAM

    unread,
    Sep 13, 2023, 1:56:43 PM9/13/23
    to ica-ato...@googlegroups.com
    Hello Dan,
    I tried...it shows err

    atomt7@atomt7-VirtualBox:~$ sudo npm run build
    [sudo] password for atomt7:
    npm ERR! code ENOENT
    npm ERR! syscall open
    npm ERR! path /home/atomt7/package.json
    npm ERR! errno -2
    npm ERR! enoent ENOENT: no such file or directory, open '/home/atomt7/package.json'
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-09-13T17_53_07_973Z-debug-0.log
    atomt7@atomt7-VirtualBox:~$ 



    To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/CAC1FhZKL-%3DOx2K6MQMQJvYF1rrw6NoS79ens88ueUsLgDdWxhw%40mail.gmail.com.

    Dan Gillean

    unread,
    Sep 13, 2023, 3:25:58 PM9/13/23
    to ica-ato...@googlegroups.com
    I will have to ask a developer for further input, but searching online a bit...

    You can make sure that nodejs and npm are properly installed, with: 
    • nodejs --version
    • npm --version
    This StackExchange thread suggests deleting the package.json file referenced in your last command if it exists,rthen unning npm init first, to create a new empty package.json file: 
    Let us know what you find, and I will see if I can gather further suggestions.

    Cheers, 

    Dan Gillean, MAS, MLIS
    AtoM Program Manager
    Artefactual Systems, Inc.
    604-527-2056
    @accesstomemory
    he / him

    To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/CAMSsUrRPmjAVAcOhJmbgZE0z0vhm3Oe04_%2B66JaT5vkjUFjGqg%40mail.gmail.com.

    Dan Gillean

    unread,
    Sep 14, 2023, 2:47:15 PM9/14/23
    to ica-ato...@googlegroups.com
    Hi again Sriram, 

    One of our developers has clarified that you need two missing files for the npm build process to work - a package.json file, and a package-lock.json file. These files are included in our code repository, but NOT in the downloadable tarball, since they are not generally needed there. However, you could try copying them and using a text editor to manually recreate copies of these files in your local instance in the root AtoM installation directory. Here are links to the files to copy: 
    The suggestion from the StackExchange thread I provided previously, i.e. to use npm init, WILL create a package.json file for you where it is run - but doing this will create an empty file, and as you can see there are a number of dependencies listed in AToM's package.json file. So: try copying our files, saving them in /usr/share/nginx/atom with the name names (i.e. package.json and package-lock.json), and then try proceeding from the npm run build command again. 

    Good luck! 

    Dan Gillean, MAS, MLIS
    AtoM Program Manager
    Artefactual Systems, Inc.
    604-527-2056
    @accesstomemory
    he / him

    KUNA SRIRAM

    unread,
    Sep 14, 2023, 4:02:11 PM9/14/23
    to ica-ato...@googlegroups.com
    Thanks dear 

    To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/CAC1FhZKV0-RRrjvupY5AwfXqb3N0SMXPLZ6w8k%2BhpVJ8aYBfRA%40mail.gmail.com.

    KUNA SRIRAM

    unread,
    Sep 15, 2023, 12:42:55 PM9/15/23
    to ica-ato...@googlegroups.com
    Hello 
    I have created both files- package.json and package-lock.json & moved  to /usr/share/nginx/atom 
    then, I run the, sudo npm run build 
    still it shows error
    But, I have a doubt while creating the file package-lock.json it prompts the following in file,,below
    name
    lockfier version
    requires
    path

    these are my current username & differ from the file , so i pasted the below whole...copiedv from package-lock.json

    kindly suggest me. 
    PFA reference....

    Thank you.

    Screenshot 2023-09-15 213152.png
    Screenshot 2023-09-15 213053.png
    Screenshot 2023-09-15 221203.png

    Dan Gillean

    unread,
    Sep 15, 2023, 3:24:58 PM9/15/23
    to ica-ato...@googlegroups.com
    Hi Sriram, 

    I would suggest you try: 
    • Copying the package-lock.json file exactly as-is - do not try renaming elements inside just yet. There are other internal things named "atom" that may be expecting this name, despite the directory name you used during installation.
    • Run the npm command from the AtoM root directory - it looks to me that right now npm is throwing the same error becuase you changed to the root directory before running the npm command, so npm is looking for the package.json file in your virtual machine's root directory, and not AtoM's where you've placed the file.
    Sorry for the hassle - all of this is new to 2.7, and therefore a bit experimental. One other idea: if you are going to be doing development work to customize AtoM, you may want to take the time to reinstall using Option 2 (install from our code repository) anyway, so that you can pull in the latest changes as we continue developing AtoM in preparation for the next release. 

    Good luck!

    Dan Gillean, MAS, MLIS
    AtoM Program Manager
    Artefactual Systems, Inc.
    604-527-2056
    @accesstomemory
    he / him

    To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/CAMSsUrS8YYeEy8zJBUon4ZALWFXhnWOWXRm2kKEFiueyYfLwog%40mail.gmail.com.

    KUNA SRIRAM

    unread,
    Sep 15, 2023, 4:08:16 PM9/15/23
    to ica-ato...@googlegroups.com
    Hello 
    it shows the issue as following webpack. 
    I will try what all i can



    To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/CAC1FhZJzam%2BAKQdCbOsG-LRbsZjt%3Deyf%3D1cWJm_RoatpeyuDPQ%40mail.gmail.com.
    Screenshot 2023-09-16 013309.png

    KUNA SRIRAM

    unread,
    Sep 16, 2023, 3:31:56 AM9/16/23
    to ica-ato...@googlegroups.com
    when i tried , arDominionPlugin  theme
     the following are, 
    I cleared cache, restarted php, then, npm run build

    logo.png
    sudo run build.png

    KUNA SRIRAM

    unread,
    Sep 16, 2023, 4:47:36 AM9/16/23
    to ica-ato...@googlegroups.com
    Hello Dan Logo has updated .

    thank u

    Mohamed vall

    unread,
    Sep 17, 2023, 8:54:34 PM9/17/23
    to ica-ato...@googlegroups.com
    Hello every one , 
    I’m trying to install atom 2.7 with my Ubuntu 20.04 
    I did all the steps in the documentation but when I reached Create database I create an atom database but after that I can’t a user ! 

    --
    IT

    Dan Gillean

    unread,
    Sep 18, 2023, 8:57:24 AM9/18/23
    to AtoM Users
    Hi Mohamed, 

    I have responded to this question and another one of your questions in the same thread, over here: 

    Dan Gillean, MAS, MLIS
    AtoM Program Manager
    Artefactual Systems, Inc.
    604-527-2056
    @accesstomemory
    he / him

    Mohamed vall

    unread,
    Sep 20, 2023, 2:18:54 PM9/20/23
    to ica-ato...@googlegroups.com

    Hello everyone , I installed Atom successfully now how can a user try it from the internet from his computer like every site web !

    --
    IT
    Reply all
    Reply to author
    Forward
    0 new messages