Phoca Gallery Gantry Phoca nature font color

[Kordian]

Hello,
I have Phoca Nature template for Gantry 5 installed on J5 (https://przyroda.aquila-it.pl) and I would like to change the color of the categories titles. I cannot find this settings neither in Gantry 5 nor in the Phoca Nature template. Created my own Theme css file, but do not know how to change the font color either.
Thanks in advance for help!
Regards

[christine]

Hi,

Try following (it works temporarily):

Code: Select all

.pg-category-box-title a {
color: lightgreen !important;  
}

If you want it also by image-view:

Code: Select all

.pg-item-box-title.category a {
color: lightgreen !important;  
}

to your custom.css

Kind regards
Christine

[Kordian]

It is working!!!
Thanks a lot.
What about when it highlighted by mouse cursor?

[christine]

Hi,

It is working!!!

That's fine.

What about when it highlighted by mouse cursor?

Don't know how it should be highlighted. Therefore, 2 possible examples:
Background colors:

Code: Select all

.pg-category-box-title a:hover {
background: linear-gradient(to right, #a02725, #2e2e2e) !important; 
}
.pg-item-box-title.category a:hover {
background: linear-gradient(to right, #a02725, #2e2e2e) !important; 
}

Colors as desired, of course.

Or just with a different color:

Code: Select all

.pg-category-box-title a:hover {
color: lightgreen !important;
}
.pg-item-box-title.category a:hover {
color: lightgreen !important;
}

Kind regards
Christine

[christine]

Hi,

you could also use a little darker color:

Code: Select all

.pg-item-box-title a,
.pg-category-box-title a {
color: #ffea00 !important; 
}

and for the a:hover the original color:

Code: Select all

.pg-item-box-title a:hover,
.pg-category-box-title a:hover {
color: #ffff00 !important; 
}

https://www.colorhexa.com/ffff00

Kind regards
Christine

[christine]

Hi,

Great, I see that you chose an orange color using with a:hover etc. Does that solve the problem?

Kind regards
Christine

[Kordian]

Hello,
Yes, it is starting looking good, thank you.
Just made a small correction to your suggestion:

.pg-category-box-title a:hover {
color: yellow !important;
}
.pg-item-box-title a:hover {
color: yellow !important;
}

One more thing: what about the color of the "back" arrow in the circle top left of the category list? Which item is it?

[christine]

Hi,

One more thing: what about the color of the "back" arrow in the circle top left of the category list? Which item is it?

Code: Select all

.pg-svg-box svg {
color: yellow;   
}

or:

Code: Select all

symbol#ph-si-back {
color: yellow;
}

Kind regards
Christine

[Kordian]

Thank you, problems solved!

[christine]

Hi,

That's fine.
Kind regards
Christine