Athena Custom CSS

Last updated: August 15, 2019
You are here:

While we typically try to stay within the confines of ProPhoto without additional coding, sometimes we add some custom CSS to some areas. Below, you’ll find the custom css areas which you can edit with an explanation on how to change them.

Blog Categories Block

In the blog, we added a blog categories block at the top for easy navigation. The block has some custom code relating to the hover color and animation.

If you’d like to change the hover color of that grid, follow the steps below.

On the blog layout, click the “Blog – Featured” blocks settings icon.

From there, the settings tab will open. Scroll all the way to the bottom to see the custom css area.

You’ll see a couple of headings. The first is /*CHANGE TEXT BACKGROUND COLOR*/ under this heading, you’ll see the hex code for the background of the text in the grid. Add your own color hex code to change it. Make sure you end the code with a semi-colon. Example: #252525;

Not sure of the color you want to use? Typically you’ll use the same colors as your branding. But if you’re experimenting, try a color picker from a site like –

If you scroll down further, you’ll see another heading labeled: /*CHANGE GRID HOVER COLOR*/ under there, you’ll find another hex code you can edit. The color code allows you to change the color when you mouse over a grid image.

You can also change the color opacity by adjusting the number from 0.1 to 1.0 (Fully transparent to Normal).

Was this article helpful?
Dislike 0

Table of Contents

Still can't find what you're looking for?