Skip to first unread message

riahi....@gmail.com

unread,
Apr 23, 2019, 5:11:00 AM4/23/19
to AtoM Users
Comment je peux insérer un logo dans AtoM ? Et comment je peux changer le thème ?

Dan Gillean

unread,
Apr 23, 2019, 12:52:40 PM4/23/19
to ICA-AtoM Users
Salut!

I will try to include some comprehensive information to get you started below, depending on what exactly you want to do. 

Changing the AtoM logo in the base Dominion theme

If you would like to replace the default AtoM logo with a logo of your own choosing in the base Dominion theme, you can simply replace the existing file in AtoM. The AtoM logo is stored in the images directory, just below the root AtoM installation directory (which, if you have followed our recommended installation instructions, is generally found at /usr/share/nginx/atom), and is named logo.png. So the full path is: 
  • /usr/share/nginx/atom/images/logo.png
It is enough to simply swap in a replacement image, recompile the theme, clear the application cache and restart PHP-FPM. Here is an example in a 16.04 environment - first we will rename the old AtoM logo, in case we want it back in the future: 
  • mv /usr/share/nginx/atom/images/logo.png /usr/share/nginx/atom/images/atom-logo.png
    • Now our original AtoM logo is named atom-logo.png. Let's copy in our new logo, from wherever you have it on your server:
  • cp path/to/my/new/logo.png /usr/share/nginx/atom/images/logo.png
Now we will recompile the CSS, clear the application cache, and restart PHP-FPM. These commands should be run from AtoM's root installation directory:
  • make -C plugins/arDominionPlugin
  • php symfony cc
  • sudo systemctl restart php7.0-fpm
You should now be able to see the new logo in the header - if not, remember to clear your browser cache as well! An example: 

logo-swap-example.png

ONE IMPORTANT NOTE about changing the logo in the Dominion theme: 

The AtoM header in the Dominion theme will break if your logo has a height higher than 50px. We also don't recommend a logo that is wider than about 200px, to accommodate narrow devices, and all the other header elements that will be present when a user is logged in. If you intend to add a logo with a height greater than 50px, then you may need to create a custom theme that includes changes to the default header. 

Changing themes via the user interface

AtoM includes 2 themes by default - the base / default theme when AtoM is first installed is the Dominion theme, pictured above. However, we include a second theme, the ArchivesCanada theme, as an example - mostly so developers can see the ways in which it is possible to extend the base Dominion theme and add new customizations, such as custom headers and footers, etc. 

You can switch these themes via the user interface, by logging in as an administrator, and navigating to Admin > Themes. See: 
Making small customizations to the base Dominion theme

I have previously given some examples of how you could modify things like the header bar color in the base Dominion theme in this user forum thread: 
Please be sure to check out the warning included in this post about future upgrades, however! From the post: 

Now, the warning: every time you upgrade, these changes will be overwritten and lost, because you've made them in the base Dominion theme. You will have to repeat these steps, and any other customizations you make. 

A more permanent solution, but also one requiring more development, is to create your own custom theme plugin. 

Developing new custom theme plugins

If you are looking to develop a new theme from scratch, we do have some resources to help you get started. 
An overview of how themes work in AtoM

AtoM was built using a PHP framework called Symfony 1.x. AtoM custom theme plugins use Symfony’s plugin architecture, which you can read about more generally here. We generally recommend that new theme plugins extend AtoM’s base Dominion theme, and the arArchivesCanadaPlugin is an example theme we include in all AtoM releases that demonstrates this. We develop all the custom themes we create for our clients following this design pattern - it keeps them contained, and therefore makes future upgrades much easier.


This means that your custom plugin directory will contains files, directives, and assets (such as background images, logos, etc) that, when found, will override AtoM’s default version of these same assets, used in the Dominion theme. Where no alternative versions are found, AtoM will generally make use of the default theme’s assets and styles.


Below is an image showing the subdirectories found in a simple custom theme, which includes a custom homepage:


example-theme-plugin-dirs.png

The config directory will contain a file that registers the plugin in Symfony, so it shows up correctly in your Themes setting page, and works when you enable it. Creating this file is one of the first things you'll do as part of creating your custom theme - see the links above for more information and examples. The CSS directory will contain any custom style sheets used in your theme - generally, you will find most of your customizations in the custom.less file found in the less subdirectory.


The images directory is where any custom assets, such as a splash image for your homepage, etc. will generally be kept.


The modules directory will contain files that override AtoM’s existing modules. If your theme includes changes to the default menus included in AtoM for example, you will likely find those changes in a PHP file located in modules/menus. The number of subdirectories and files here will depend on your custom theme.


Depending on your theme, there may be other directories as well. For example, if your has a custom header, you would likely create a custom _header.php file in a templates subdirectory, or if your theme disables the “Browse by” menu that usually appears on the home page, then you might create a customized version of homeSuccess.php in the templates directory.

You will also need to add a Makefile in the root directory of your custom theme plugin. AtoM uses lessc to extend CSS and as a compiler, that allows us to minimize the CSS files for easier storage and distribution. This Makefile is necessary, and it’s what allows you to compile your theme assets by running the make command.


Generally, any theme modifications you need to make will be made in one of these locations. You can add new CSS rules that override the base Dominion CSS to the custom.less file found in css/less. If you want to add a new module or page template element to AtoM that you wish to customize in your theme, you can find the relevant file in AtoM’s code, copy it into the relevant subdirectory in your custom theme plugin, and modify it there.
 

As I mentioned earlier, we include the arArchivesCanadaPlugin in AtoM's public codebase as an example for developers of how a custom theme can extend the base Dominion theme. You can explore it in our code repository here: 
[note to future readers referencing this forum thread: if the link above doesn't work, it is because 2.5 has been released - once a new version of AtoM is released, the branch name will be changed from qa (used for development branches) to stable - simply change the "qa" part of the link above to "stable" and it should work.]

General AtoM development resources

We do maintain some basic development resources - you'll find some initial ones here:



You will find an overview of the elements that make up AtoM, and a tour of the AtoM code, in the following resources:



AtoM was originally developed using the Symfony 1.x framework, and the Propel 1.x ORM. You might want to familiarize yourself with Symfony before beginning:



AtoM also currently uses Elasticsearch 5.6 (in the upcoming 2.5 version - if you are developing new features we strongly recommend you work against our qa/2.5.x branch) for its search index, Twitter Bootstrap 2.3.2 for theming, and several other libraries. MySQL is used for data storage. We keep all our code in a git repository, so being comfortable with git or other distributed version control systems will also help you. There are a lot of resources out there on all of these!


We maintain a Vagrant box that can be used for local development - see:


In this user forum thread thread, I explain how to upgrade the Vagrant box to ensure you are working against the latest code:



We also have a slide deck that introduces developers to major feature development, here:



You probably won't need this for theme development, but for reference I include it anyway - in terms of understanding AtoM's database and working with SQL, we keep copies of Entity Relationship Diagrams for AtoM's database on the wiki here:



And we have a slide deck that introduces users to performing SQL queries against an AtoM database here:



In terms of working with the Symfony 1.x framework, we recommend that developers adding features to AtoM follow Symfony's plugin development model whenever possible - and this definitely includes custom themes. Most of the existing modules in AtoM have been built as plugins - developing this way makes them easier to maintain in the long-term. Here are some of the best Symfony 1.x resources on Plugin development:



There is also a Symfony plugins page that lists "1458 symfony plugins developed by 609 contributors." These are generally not themes, nor anything to do with AtoM, but they can be a great reference, to see how others using Symfony have developed their plugins for other projects. See:



For reference all of AtoM's current plugins can be studied here:



Finally, you will find many examples of AtoM users with custom themes by exploring some of the sites on our example users list, on the wiki, here: 

Good luck - and let us know how it goes! 

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


On Tue, Apr 23, 2019 at 5:11 AM <riahi....@gmail.com> wrote:
Comment je peux insérer un logo dans AtoM ? Et comment je peux changer le thème ?

--
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 post to this group, send email to ica-ato...@googlegroups.com.
Visit this group at https://groups.google.com/group/ica-atom-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/ica-atom-users/40454a63-bbe0-4e05-885f-5c108fff1677%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Maximilian

unread,
Mar 11, 2020, 5:15:35 AM3/11/20
to AtoM Users

When I execute the “make -C plugins/arDominionPlugin", the error has prompted.

 

:/usr/share/nginx/atom# make -C plugins/arDominionPlugin

make: Entering directory '/usr/share/nginx/atom/plugins/arDominionPlugin'

Running LESS compiler...

lessc --compress --relative-urls css/main.less > css/main.css

The --relative-urls option has been deprecated. Use --rewrite-urls=all.

The compress option has been deprecated. We recommend you use a dedicated css minifier, for instance see less-plugin-clean-css.

make: Leaving directory '/usr/share/nginx/atom/plugins/arDominionPlugin'


How to fix the issue?

riahi....@gmail.com於 2019年4月23日星期二 UTC+8下午5時11分00秒寫道:

Dan Gillean

unread,
Mar 11, 2020, 4:38:40 PM3/11/20
to ICA-AtoM Users
Hi there, 

In the installation instructions for lessc, we specify a restriction on the version installed. Did you follow these instructions?
  • sudo apt install nodejs npm make
  • sudo npm install -g "less@<2.0.0"

If not, I suspect that this error may be because you've installed a later version, and our current implementation is using older methods. I would suggest you try uninstalling your current version, and installing using the instructions above. 

If that doesn't work as expected, you can try preceding the commands above with the following: 
  • sudo apt-get install nodejs-legacy
Hopefully this should clear up any issues! Please let us know how it goes. 

Regards, 

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.
Reply all
Reply to author
Forward
Message has been deleted
0 new messages