Custom css field in Phoca Gallery options

[Kordian]

Hi,
I have recently upgraded joomla and my Phoca Gallery. In the older versions there used to be a "Custom css" field in the PG options, where custom css could be inserted. This field seems to be missing in the latest version (I have 4.3.10). Moreover if I look at the phocagallery.css file, I see also the "code" changed, so when I simply insert the custom.css setting from the older file, it is not recognised.
Am I correct or do I miss something?
Thank you for clarification...

[christine]

I see also the "code" changed, so when I simply insert the custom.css setting from the older file, it is not recognised.
Am I correct or do I miss something?

that's correct - as the html structure has been changed accordingly. Such as new classes, bootstrap elements, for responsive design (rows, column layouts) and much more. If you check with inspector, you can take the requested segment to change something, or to add new parameters etc.
These new or amended parameters could be added to your e.g. template.css and/or custom.css - depends which template you are using.

What do you want to change? If you show us your URL, we could check.

Kind regards
Christine

[Kordian]

Dear Christine,
Thank you for your answer. Generally I had custom colours of the template, here is the full content of my "custom css" field:
Part 1

Code: Select all

/* pole podpisu kategori i zdjecia a trzecie to sam napis */
#phocagallery a img {
	padding:0;
	margin:0;
	border:0px;
	background-color: #2e2925;
}
#phocagallery .pg-cats-name,
#phocagallery .pg-name,
#phocagallery-statistics .pg-name{   
color:#F7FB28;  
text-align:center;  
font-weight: bold;  
text-shadow: 1px 1px 1px #111;  
margin: 1px 10px; }  
#phocagallery .star-rating-small {  margin: 1px 10px; }  
#phocagallery .pg-cats-name.small {  
float: right;  
margin-top: -30px;  
padding-left: 20px;  
background: url(images/icon-folder-small.png) 0% 50% no-repeat; }  
#phocagallery .pg-cats-name.medium {  
float: right;  
margin-bottom: 5px;  
padding-left: 20px;  
background: url(images/icon-folder-small.png) 0% 50% no-repeat; 
background-color: #2e2925;}   
#phocagallery .pg-cats-name a:link, 
#phocagallery .pg-cats-name a:focus, 
#phocagallery .pg-cats-name a:visited, 
#phocagallery .pg-cats-name a {  
color:#2e2925;  
text-decoration: none; }  
#phocagallery .detail,
#phocagallery-statistics .detail{   
margin: 1px 10px; }  
.pg-category-view 
.pg-cats-box-float {  width: 25%; }  
#phocagallery .pg-cats-box { background-color: #2e2925; } 
/* przycisk back podkategorii */
#phocagallery .phocagallery-box-file.pg-box-backbtn { 
background-color: #2e2925;
-moz-border-radius:  3px;  
-webkit-border-radius: 3px;  
-khtml-border-radius: 3px;  
border-radius:   3px;  
-moz-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-box-shadow: inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-khtml-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
box-shadow:   inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-transition: all 1s ease-in-out;  
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out;  
-ms-transition: all 1s ease-in-out;  
transition: all 1s ease-in-out;  
padding: 3px;  margin: 7px;    
text-align: center; } 
/* podfolder */
#phocagallery .phocagallery-box-file.pg-box-subfolder { background-color: #2e2925;
-moz-border-radius:  3px;  
-webkit-border-radius: 3px;  
-khtml-border-radius: 3px;  
border-radius:   3px;  
-moz-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-box-shadow: inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-khtml-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
box-shadow:   inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-transition: all 1s ease-in-out;  
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out;  
-ms-transition: all 1s ease-in-out;  
transition: all 1s ease-in-out;  
padding: 3px;  margin: 7px;    
text-align: center; } 
/* przycisk back 2 poziom */
#phocagallery .phocagallery-box-file.pg-box-parentfolder { background-color: #2e2925;
-moz-border-radius:  3px;  
-webkit-border-radius: 3px;  
-khtml-border-radius: 3px;  
border-radius:   3px;  
-moz-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-box-shadow: inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-khtml-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
box-shadow:   inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-transition: all 1s ease-in-out;  
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out;  
-ms-transition: all 1s ease-in-out;  
transition: all 1s ease-in-out;  
padding: 3px;  margin: 7px;    
text-align: center; } 

[Kordian]

and Part 2

Code: Select all

/* okno obrazków */
#phocagallery .phocagallery-box-file.pg-box-image { background-color: #2e2925;
-moz-border-radius:  3px;  
-webkit-border-radius: 3px;  
-khtml-border-radius: 3px;  
border-radius:   3px;  
-moz-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-box-shadow: inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-khtml-box-shadow:  inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
box-shadow:   inset 0px 0px 10px 8px #0e0d0b, 2px 2px 2px 1px #624f40;  
-webkit-transition: all 1s ease-in-out;  
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out;  
-ms-transition: all 1s ease-in-out;  
transition: all 1s ease-in-out;  
padding: 3px;  margin: 7px;    
text-align: center; }
#phocagallery-statistics .phocagallery-box-file.pg-box-mv, 
#phocagallery-statistics .phocagallery-box-file.pg-box-la {  
-moz-border-radius:  3px;  
-webkit-border-radius: 3px;  
-khtml-border-radius: 3px;  
border-radius:   3px;  
-moz-box-shadow:  inset 0px 0px 10px 8px #f3f3f3, 2px 2px 2px 1px #c0c0c0;  
-webkit-box-shadow: inset 0px 0px 10px 8px #f3f3f3, 2px 2px 2px 1px #c0c0c0;  
-khtml-box-shadow:  inset 0px 0px 10px 8px #f3f3f3, 2px 2px 2px 1px #c0c0c0;  
box-shadow:   inset 0px 0px 10px 8px #f3f3f3, 2px 2px 2px 1px #c0c0c0;  
-webkit-transition: all 1s ease-in-out;  
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out;  
-ms-transition: all 1s ease-in-out;  
transition: all 1s ease-in-out;  
padding: 3px;  margin: 7px;  
background-color: #f9f9f9;  
background: #fff;  
text-align: center; }  
#phocagallery .pg-cats-box.small, 
#phocagallery 
#phocagallery-categories-detail.pg-cats-cv .pg-cats-box {  
text-align: left; }  
#phocagallery .pg-cats-box:hover, 
#phocagallery .phocagallery-box-file.pg-box-backbtn:hover, 
#phocagallery .phocagallery-box-file.pg-box-subfolder:hover, 
#phocagallery .phocagallery-box-file.pg-box-parentfolder:hover, 
#phocagallery .phocagallery-box-file.pg-box-image:hover, 
#phocagallery-statistics .phocagallery-box-file.pg-box-mv:hover, 
/* podswietlenie folderu */
#phocagallery-statistics .phocagallery-box-file.pg-box-la:hover  {  
-moz-box-shadow:  inset 0px 0px 10px 8px #624f40, 2px 2px 2px 1px #0e0d0b;  
-webkit-box-shadow: inset 0px 0px 10px 8px #624f40, 2px 2px 2px 1px #0e0d0b;  
-khtml-box-shadow:  inset 0px 0px 10px 8px #624f40, 2px 2px 2px 1px #0e0d0b;  
box-shadow:   inset 0px 0px 10px 8px #624f40, 2px 2px 2px 1px #0e0d0b; }  
#phocagallery-statistics a img.pg-image, 
#phocagallery a img.pg-image,
#phocagallery a img.pg-cat-image, 
#phocagallery a img.pg-cats-image, 
#phocagallery .phocagallery-box-file-third a img.pg-image, 
#phocagallery .phocagallery-box-file-third a img.pg-cat-image { 
-moz-border-radius:2px;  
-webkit-border-radius:2px;  
-khtml-border-radius:2px;  
border-radius:2px;  
-moz-box-shadow:  0px 0px 2px 1px #ccc;  
-webkit-box-shadow: 0px 0px 2px 1px #ccc;  
-khtml-box-shadow:  0px 0px 2px 1px #ccc;  
box-shadow:   0px 0px 2px 1px #ccc;  
border: 0; 
background-color: #2e2925;} 
#PhocaGalleryobjectPicture, .pg-detail-image {  
-moz-box-shadow:  0px 0px 3px 2px #ccc;  
-webkit-box-shadow: 0px 0px 3px 2px #ccc;  
-khtml-box-shadow:  0px 0px 3px 2px #ccc;  
box-shadow:   0px 0px 3px 2px #ccc;
 } 
#phocagallery .pg-cats-box-img{  padding: 10px; }  
#phocagallery .pg-cat-tags {  
text-align: right;  
font-size:x-small;  
margin: 0px 10px; }  
.bgPhocaClass{  
background:#fff;  
z-index:1000;  
-moz-border-radius:2px;  
-webkit-border-radius:2px;  
-khtml-border-radius:2px;  
border-radius:2px;  
-moz-box-shadow:  0px 0px 2px 1px #ccc;  
-webkit-box-shadow: 0px 0px 2px 1px #ccc;  
-khtml-box-shadow:  0px 0px 2px 1px #ccc;  
box-shadow:   0px 0px 2px 1px #ccc; } 
.fgPhocaClass{  
background:#fff;  
z-index:1000; } 
.fontPhocaClass{  
color:#777;  
z-index:1001; } 
.capfontPhocaClass, 
.capfontclosePhocaClass{  
color:#777;  
z-index:1001;  
font-weight: bold; }

[christine]

Hi Kordian,

it seems, you are using legacy settings in categories view? For example: .pg-cats-box-float {.....}.

Your mentioned codes does not help to solve it. Just show us your site, with information, what exactly you want to change.
Then we could check required codes.

Kind regards
Christine