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.
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);
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:
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:
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:
- 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: