Questions about Styling

[Grover]

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

[Jan]

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

[Grover]

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]

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

[Grover]

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.

There does not exist a: ".phocagallery-box-file colouring"

It means I edited the colouring of the specification .phocagallery-box-file

[christine]

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

[Grover]

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]

Hi,

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;
}

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

[Grover]

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]

Hi,

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