Page 1 of 1
Changing the Hover propery on phoca gallery image
Posted: 15 Jan 2017, 14:50
by zervas
I'd like to know how to change the :hover property of an image of phoca-gallery . Which class do I have to modify ?
In addition, I'd like to know if I could change the zoom property when I user clicks on my images ( I mean make images seem a little bit bigger when a user clicks on my images ).
Thank you in advance
Re: Changing the Hover propery on phoca gallery image
Posted: 16 Jan 2017, 16:14
by christine
Hi,
1. it depends if you mean categories view or category view.
examples could be:
Code: Select all
.pg-cv-box:hover {
background: blue;
}
.pg-csv-box:hover {
background: #fafafa;
}
2. have a look please to options etc:
https://www.phoca.cz/documents/2-phoca-g ... e-joomla-3
e.g. > Images And Detail Window Size Settings and/or different > Detail View settings.
Kind regards, Christine
Re: Changing the Hover propery on phoca gallery image
Posted: 22 Jan 2017, 15:38
by zervas
I have created a photo gallery and I just want to change the :hover attribute. I mean when the user mouse is over an image , the background-color changes . how can I do this ?
I have made a rule in the phocagallery.css (in the main folder)
Code: Select all
#phocagallery :hover /*custom*/
{
background-color:#CCC;
}
but it didn't work
Re: Changing the Hover propery on phoca gallery image
Posted: 22 Jan 2017, 18:59
by christine
Hi,
your syntax is wrong:
#phocagallery :hover
/*custom*/
{
background-color:#CCC;
}
correct:
#phocagallery :hover {
background-color:blue;
}
or in this way (from #ccc to blue):
Code: Select all
#phocagallery :hover {
background-color: /*#CCC;*/blue;
}
Kind regards, Christine
OT: hv deleted the other (similar) post.
Re: Changing the Hover propery on phoca gallery image
Posted: 22 Jan 2017, 20:21
by christine
Hi,
My syntax is wrong because of '{' ? I don't understand why
This was wrong:
#phocagallery :hover
/*custom*/
{
background-color:#CCC;
}
btw: it was your code, therefore I thought, you wanted to hover complete thumbnail.
Try please my code (previous post). Storing at the end of e.g. template.css or custom.css
Code: Select all
.pg-cv-box:hover {
background: blue;
}
.pg-csv-box:hover {
background: blue;
}
as I wrote, it depends if you mean category or categories view.
If not successfull, just show us your URL
Kind regards, Christine
Something went wrong with the answer. (your post has been lost during my edition) I don't know why. Sorry about.
Re: Changing the Hover propery on phoca gallery image
Posted: 23 Jan 2017, 14:06
by zervas
You're a phoca expert. I've put your code into my custom css (named user.css under the category template/protostar/user.css )
but I'd like to ask you a couple of questions regarding your code .
.pg-cv-box:hover , .pg-csv-box:hover
.pg-cv-box:hover (this code affects the :hover attribute of .pg-cv-box ) .
.pg-cv-box (does it refer to my thumbnails ? )
and about the code .pg-csv-box ? (does it refer ro my thumbnails as well ? )
In conclusion, I'd like you to clarify these two classes .
You were helpful
Re: Changing the Hover propery on phoca gallery image
Posted: 23 Jan 2017, 14:30
by christine
Hi zervas,
it depends, if you want to have some effect either in categories view or in category view or in both.
Just try foll. example in your user.css (at the end):
Categories View: (List of categories)
for hover effect:
Code: Select all
.pg-csv-box:hover {
background: blue;
}
not hover effect (active):
Code: Select all
.pg-csv-box {
background-color:red;
}
for
Category View: (List of files/images)
for hover effect:
Code: Select all
.pg-cv-box:hover {
background: blue;
}
not hover effect (active):
Code: Select all
.pg-cv-box {
background-color:red;
}
Kind regards, Christine