Help changing top bar color

[ad...@wsaarchives.org]

We have replaced the default logo.png with a logo that has a dark blue background (#00306E).  We would like to change the top bar color from black to dark blue in order to match the background of our custom logo.png.

We have looked in this location 

/usr/share/nginx/atom/plugins/arDominionPlugin/css

but did not see anything in the less file about color choices and were unable to make sense of the main.css in that directory.

Can you tell us where to change the top bar color where the logo.png is located to #00306E for the arDominionPlugin?

We would also like to change the search box background color to white so that it stands out.

Many thanks,

Daniela

[Dan Gillean]

Hi there, 

If you intend to make these changes directly in the base Dominion theme, both of these changes would be made in plugins/arDominionPlugin/css/less/header.less. However, be sure to see my warning about this below. First, here's how to make the changes you want. 

I should point out as well - I didn't know how to do this until you asked. I figured this out by using my web browser's inspect option to look at the element I wanted on the demo site (e.g. the header bar), copying the css class name from what the browser inspect tool showed me (there was a class called #top-bar), then going to the AtoM code repository and searching top-bar. I read through the results returned, looked at the most promising page, found the elements that seemed to match, and quickly tried modifying them in my local AtoM Vagrant box. 

If you decide to make further changes, I would suggest doing some investigation on your own using these methods, to see if you can figure out how and where to make the changes :)

Modifying the Dominion theme

As  I mentioned above,  both of these changes would be made in plugins/arDominionPlugin/css/less/header.less.

To get there, enter the following from AtoM's root installation directory:

• cd plugins/arDominionPlugin/css/less/

You can use nano, or your preferred terminal text editor to access the file. 

• sudo nano header.less

We've used RGB colors rather than hex values in the CSS - the rgb color value for your chosen color of #00306E is: rgb(0, 48, 110). You should be able to find many online color pickers that will help you figure out RGB values from hex color values. 

Update the value on line 18 with that rgb value to change the header's background color - the line should read: 

@topBarBackgroundColor: rgb(0, 48, 110);

See: https://github.com/artefactual/atom/blob/HEAD/plugins/arDominionPlugin/css/less/header.less#L18

The search box background is just declared as a color - we have to look at the search input field down on line 385. We can simply change this from @grayDark to @white. The line should read: 

background-color: @white; 

See: https://github.com/artefactual/atom/blob/HEAD/plugins/arDominionPlugin/css/less/header.less#L385

Be sure to preserve the line indentation. 

Now we're ready to exit and save. With nano, use CTRL+X to exit - it will prompt you to save (enter Y). Keep the same filename. 

After you've made these changes, you will need to clear your cache (which also means restarting PHP-FPM and memcached), and recompile the CSS before your changes will be visible. These commands need to be run from the root AtoM directory so let's return back up: 

• cd ../../../..

Make sure you are now at the root AtoM installation directory (i.e. if you have followed our recommended installation instructions, this should be /usr/share/nginx/atom)

To clear the application cache: 

• php symfony cc

To restart PHP-FPM

• Ubuntu 14.04: sudo service php5-fpm restart
• Ubuntu 16.04: sudo systemctl restart php7.0-fpm

To restart memcached: 

• Ubuntu 14.04: sudo service memcached restart
• Ubuntu 16.04: sudo systemctl restart memcached

Now we have to recompile the CSS, using the make command: 

• make -C plugins/arDominionPlugin

Make sure your browser cache is cleared as well, and now you should be able to see your changes. 

On theming (a warning about changing Dominion)

Now, the warning: every time you upgrade, these changes will be overwritten and lost, because you've made them in the baseDominion 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. We have slides and basic documentation, including an example repository for developers to download and play with, here: 

• Docs: https://www.accesstomemory.org/docs/latest/admin-manual/customization/theming/
• Slides: https://www.slideshare.net/accesstomemory/creating-custom-themes-in-atom

Regards, 

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

@accesstomemory

--
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-users+unsubscribe@googlegroups.com.
To post to this group, send email to ica-atom-users@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/7c98abb9-b0aa-4808-a476-3d8db3b7734f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ad...@wsaarchives.org]

Dan, thank you very much for your beautiful instructions.  You have helped us through several issues.  We were able to customize our top bar and search bar colors to look exactly as we dreamed that they should. We understand your warning about modifying a default theme. 

We really love AtoM. 

Daniela

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.

[Matthew Bruton]

Hi there,

So I followed your instructions about to change the colour.

When I got to recompiling the Css it gave me an error.

Though when I went back into the file the colours were still changed.

But the problem is that my website now looks like the screenshot attached. Disaster. You'll see what I mean....

So I thought everything would be alright if I just changed back the colours. I did that, and still the same problem.

I tried putting a copy of the header css file from another instance of atom and pasting in the the place of the current one.

That did  not work.

Nothing comes up in the nginx logs about this btw.

Let me know your thoughts...

[Dan Gillean]

Hi Matthew, 

That's exactly what AtoM looks like when the theme is not compiled. I don't think it was changing the color values specifically that broke it - for some reason, the make command didn't work, and we just need to get that to run properly. Your data should be unaffected, however, so let's get to the bottom of this! 

What exactly was the error you encountered when you tried to run the make command? If you installed from the tarball, it's possible that lessc is not installed on your system - in the tarball, we have pre-compiled the CSS, so there's no need to run the make command, while an install from the code repository will require it. As such, we have instructions under Option 2 for installing AtoM (install from our code repository) that include instructions on how to install the correct version of lessc that AtoM expects, and how to compile the theme:

• sudo apt install nodejs npm make
• sudo npm install -g "less@<2.0.0"
• sudo make -C /usr/share/nginx/atom/plugins/arDominionPlugin
  

See: 

• https://www.accesstomemory.org/docs/latest/admin-manual/installation/linux/ubuntu-bionic/#option-2-check-out-the-code-from-our-git-repository
  

Note that we need to install version 2.0.0 or lower of lessc, as specified in the second step above. If you already have it installed, you can check the version you are running with the following: 

• lessc -v
• See: http://lesscss.org/usage/

You can also try which lessc if that doesn't work. 

Don't forget to clear the application cache (and memcached if you have it installed) and restart PHP-FPM after making changes: 

• php symfony cc
• sudo systemctl restart php7.2-fpm
• sudo systemctl restart memcached

If you have PHP 7.0 installed, simply change 7.2 in the second command to 7.0. 

I would also suggest that you double-check your changes in the CSS file - make sure that you've ended each line with a semi-colon; that you've only changed the color values and haven't accidentally deleted or altered anything else unintentionally, etc. 

There's no need to find another AtoM instance to see a copy of the default file - you can see it in the AtoM code repository here:

• https://github.com/artefactual/atom/blob/HEAD/plugins/arDominionPlugin/css/less/header.less  
  

Let us know how it goes!

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

@accesstomemory

he / him

On Thu, Feb 13, 2020 at 6:56 AM Matthew Bruton <matthewb...@gmail.com> wrote:

Hi there,

So I followed your instructions about to change the colour. When I got to recompiling the Css it gave me an error.

Though when I went back into the file the colours were still changed.

But the problem is that my website now looks like the screenshot attached. Disaster. You'll see what I mean.

So I thought everything would be alright if I just changed back the colours. I did that, and still the same problem.

I'm thinking of just getting a copy of the header css file from another instance of atom and pasting in the the place of the current one.

Will that work?

Nothing comes up in the nginx logs about this btw.

Let me know your thoughts...

--
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/aec45a7e-7733-4745-b560-d6e3c39de6b6%40googlegroups.com.

[Matthew Bruton]

Thanks Dan,

Will let you know if that doesn't work.

[Matthew Bruton]

This may not be important, but just to say that the default background colour is not the same as what you list.

for me it reads 22, 21, 20

[Dan Gillean]

Hi Matthew, 

Yes, the values you list are what is listed as the default color in the file I linked to in our code repository. My inclusion of rgb(0, 48, 110) in my original response was implementing the dark blue color that Daniela, the original poster, was trying to achieve in her customization. 

Keep us posted!

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

@accesstomemory

he / him

On Fri, Feb 14, 2020 at 9:56 AM Matthew Bruton <matthewb...@gmail.com> wrote:

This may not be important, but just to say that the background colour is not the same as what you list.

for me it reads 22, 21, 20

--

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/f417c4f0-2782-48ea-b83e-447d4e0efa40%40googlegroups.com.

[Matthew Bruton]

Hi Dan,

So I am making the change on another system entirely and am getting an error when I do the make command. I can't remember if it is the same error as the other system.

I am sending a screenshot of the whole thing.

So yea it does seem I need to install lessc.

Don't have make installed.

Is that not in the instructions as a prerequisite/requirement? If not, should it be?

[Dan Gillean]

Hi Matthew, 

Still looks like lessc might not be properly installed. Did you try running the lessc -v command to see if you have it installed?

If not, try the installation commands I sent in my last message, and then try running the make command again. 

If you do have lessc installed, but it is a version above 2.0.0, you may need to uninstall the current version, and then reinstall with commands I've supplied. 

Cheers, 

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

@accesstomemory

he / him

On Fri, Feb 14, 2020 at 10:20 AM Matthew Bruton <matthewb...@gmail.com> wrote:

Hi Dan,

So I am making the change on another system entirely and am getting an error when I do the make command.

I am sending a screenshot of the whole thing.

I'll wait to implement the fix because the error may mean you have a different answer.

--
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/77ca9bc2-1492-4c50-86f3-7037cda310d5%40googlegroups.com.

[Matthew Bruton]

hi Dan,

So I did your first solution, changed the colour and it worked this time.

So do you know why I didn't have make installed? I used the latest version of linux server, used the atom installer package, but to be honest I don't think it is mentioned in the documentation as a prerequisite for manual installations.

[Dan Gillean]

Glad it worked, Matthew! 

Regarding your question, I tried to address it in my previous post: 

If you installed from the tarball, it's possible that lessc is not installed on your system - in the tarball, we have pre-compiled the CSS, so there's no need to run the make command, while an install from the code repository will require it. As such, we have instructions under Option 2 for installing AtoM (install from our code repository) that include instructions on how to install the correct version of lessc that AtoM expects, and how to compile the theme:  

As far as I'm aware, lessc is not installed on Linux by default, and when installing AtoM via the tarball, there's usually no need to compile the CSS manually, as we compile it before preparing the tarball for download. Unless users are customizing the look and feel of the application, then there is generally no need to recompile either, which is why it's only mentioned in Option 2 of our instructions (download AtoM from our code repository). 

So, you've only run into this issue because you started manually editing the CSS. I'm sure it wasn't pleasant to watch the look of your site revert like that, but fortunately we managed to sort it out in the end with just a few commands to get lessc installed, and then to recompile the theme with your changes included. 

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/88fb36ce-bd84-42c1-97c9-911afce83b14%40googlegroups.com.