Questions about Styling

Phoca Gallery - image gallery extension
User avatar
Grover
Phoca Member
Phoca Member
Posts: 14
Joined: 24 Aug 2020, 21:04

Questions about Styling

Post by Grover » 24 Aug 2020, 21:16

I'm pretty pathetic about using CSS but willing to try. I've installed Phoca Gallery to a Joomla site that I have but would like to darken up the gallery pages only, to make the images pop a bit. My question:

Do I edit the Gallery CSS files or do I install a different Joomla theme and apply that theme only to the Phoca Gallery pages?

I tried editing Phoca's default.css [.phocagallery-box-file colouring] but, once saved, there were no apparent changes. Refreshed, cleared the cache and shook a rubber chicken at it but still no changes. Is this the wrong file to be tweaking?

Here's the suspect in question: https://car-free.ca/gallery

Tags:

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 43813
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Questions about Styling

Post by Jan » 25 Aug 2020, 14:11

Hi, the best way to customize CSS is always to user your template custom.css file. This file is mostly loaded as last so it can override previous definition and it is not overwritten when updating.

Jan
If you find Phoca extensions useful, please support the project

User avatar
Grover
Phoca Member
Phoca Member
Posts: 14
Joined: 24 Aug 2020, 21:04

Re: Questions about Styling

Post by Grover » 26 Aug 2020, 07:51

Thanks for that. There is no custom.css file connected to the gallery. Default.css is listed as "custom" in the the "TYPE" column, is this what you mean? If so, I've already tried making changes to default.css but nothing happened. Or are you talking about making site-wide changes? If so, I don't want to change anything except the Phoca Gallery pages.

christine
Phoca Hero
Phoca Hero
Posts: 2182
Joined: 28 Nov 2010, 17:20

Re: Questions about Styling

Post by christine » 26 Aug 2020, 13:16

Hi,

as Jan wrote:
Hi, the best way to customize CSS is always to user your template custom.css file. This file is mostly loaded as last so it can override previous definition and it is not overwritten when updating.
As I can see, there exist one: https://car-free.ca/templates/purity_iii/css/custom.css. Here you can add Codes.
Foll. is an example only, because I don't know what exactly want to change:
.phocagallery-box-file,
.pg-cv-box {
background:#0077bb;
}
Grover wrote:
I tried editing Phoca's default.css [.phocagallery-box-file colouring]
There does not exist a: ".phocagallery-box-file colouring"
You have to find out (with inspector) the requested code/segment and then (see above example) to add to your custom.css

Kind regards
Christine

User avatar
Grover
Phoca Member
Phoca Member
Posts: 14
Joined: 24 Aug 2020, 21:04

Re: Questions about Styling

Post by Grover » 26 Aug 2020, 19:00

It doesn't work for me. Nothing changes when I make overriding alterations to the Phoca Gallery templates in the site-wide template custom.css file. I'll have to live with a predominantly white gallery or try a different gallery altogether.
christine wrote:
26 Aug 2020, 13:16

There does not exist a: ".phocagallery-box-file colouring"
It means I edited the colouring of the specification .phocagallery-box-file

christine
Phoca Hero
Phoca Hero
Posts: 2182
Joined: 28 Nov 2010, 17:20

Re: Questions about Styling

Post by christine » 26 Aug 2020, 20:04

Hi,

in your default.css I can see changes:

.phocagallery-box-file,
.pg-csv-box {
float: left;
padding: 10px;
margin: 5px;
/*background: #000000;*/
background: #fff;

-webkit-box-shadow:1px 1px 2px 1px rgba(120, 120, 120, 0.5), inset 0px 0px 7px 7px rgba(240, 240, 240, 0.2);
box-shadow:1px 1px 2px 1px rgba(120, 120, 120, 0.5), inset 0px 0px 7px 7px rgba(240, 240, 240, 0.2);
-webkit-border-radius: 2px;
border-radius: 2px;
}
For example, you can add to your custom.css (of your template) see again: https://car-free.ca/templates/purity_iii/css/custom.css

Code: Select all

.phocagallery-box-file,
.pg-csv-box {
background:#0077bb;
}
At the moment there is only this:

Code: Select all

@media (max-width: 990px) {
img.medialogofix {
	height: unset !important;
	width: 20px !important;
}
}
Kind regards
Christine

User avatar
Grover
Phoca Member
Phoca Member
Posts: 14
Joined: 24 Aug 2020, 21:04

Re: Questions about Styling

Post by Grover » 27 Aug 2020, 18:23

christine wrote:
26 Aug 2020, 20:04
At the moment there is only this:
That's weird because I left some changes in the custom.css file including the below but nothing changes and obviously you aren't seeing them:

Code: Select all

/* Boo: for Phoca Gallery */ 
.phocagallery-box-file,
.pg-cv-box {
background:#0d0c0c; !important;
}
I've removed this now as it has no effect whatsoever.

I'd attach a screenshot but image tags are off and I'm not about to join yet another image service just so I can post one. That's simply dumb.

christine
Phoca Hero
Phoca Hero
Posts: 2182
Joined: 28 Nov 2010, 17:20

Re: Questions about Styling

Post by christine » 27 Aug 2020, 20:01

Hi,
Grover wrote:
27 Aug 2020, 18:23
christine wrote:
26 Aug 2020, 20:04
At the moment there is only this:
That's weird because I left some changes in the custom.css file including the below but nothing changes and obviously you aren't seeing them:
at the time of writing my post, there was only above 1 Code.

Code: Select all

/* Boo: for Phoca Gallery */ 
.phocagallery-box-file,
.pg-cv-box {
background:#0d0c0c; !important;
}
Above Code and changed view, I saw today morning! > see below screenshot:
Correct it would be:
/* Boo: for Phoca Gallery */
.phocagallery-box-file,
.pg-cv-box {
background:#0d0c0c !important;
}

Image
I've removed this now as it has no effect whatsoever.
Now, present status, it's removed. As you can see, it works > temporary I inserted code to the custom.css.

The question is also: Should it be: .pg-cv-box (see above) OR: .pg-csv-box?
Changes/addition etc. in the custom.css could be take some time. You also hv to clear all caches.

Kind regards
Christine

User avatar
Grover
Phoca Member
Phoca Member
Posts: 14
Joined: 24 Aug 2020, 21:04

Re: Questions about Styling

Post by Grover » 29 Aug 2020, 19:18

christine wrote:
27 Aug 2020, 20:01
The question is also: Should it be: .pg-cv-box (see above) OR: .pg-csv-box?
Changes/addition etc. in the custom.css could be take some time. You also hv to clear all caches.
Yes, you are right it should have been "cSv". That pesky semi-colon was probably messing things up too. I've tweaked the colour setting a bit and am pretty happy with the way Phoca Galley looks now.

christine
Phoca Hero
Phoca Hero
Posts: 2182
Joined: 28 Nov 2010, 17:20

Re: Questions about Styling

Post by christine » 29 Aug 2020, 22:07

Hi,

That's fine. Thanks for your feedback.
Kind regards,
Christine

Post Reply