Styling as shown on YouTube demo

[jb80]

Hi Jan, thanks for sharing the online video.

Would you be able to share the styling/options used to create the category text overlay and clean images without padding and borders (as pictured). It's something I've always wanted to do on my personal site In my opinion, it should be the default styling out of the box!

[Jan]

Hi,

I am planning to add similar design to Joomla 4 Phoca Gallery version, for now it was just CSS custom styling:

Code: Select all

.pg-csv-box,
.pg-cv-box {
    padding: 0 !important;
	height: auto !important;
	box-shadow: none;
}

.pg-icon-detail {
    margin-top: -30px;
    padding-right: 5px;
    color: #fff;
}

.counter {
    display: none !important;
}

.ph-icon-category,
.ph-icon-download,
.ph-icon-view {
    color: #fff !important;
    font-weight: bold;
}

.pg-cvcsv {
    border: 0;
    padding: 10px;
}


.pg-csv-name-i {
	margin-top: -36px;
	background:rgba(0,0,0, 0.5);
	padding: 5px 10px;
	font-size:120%;
	position:relative;
	border-radius: 0 0 3px 3px; 
}

.pg-csv-name-i a {
	color: #fff !important;
    font-weight: bold;
}

.pg-box3 img {
	box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.7) 0px 3px 7px -3px;
	border-radius: 3px;
}

But, I think, it will be even influenced by template, etc.

Jan

[jb80]

Hi Jan, thanks for sharing, the frameless styling look is truly amazing! Sample from my site below

I have a few questions to complete my site styling to match your example;

1) how did you enlarge the thumbnail size as shown in your example
2) did you include the styling for the category names that overlay onto the picture, i.e. spring, summer, as shown in your example - (my category names are now missing)
3) can you share the same styling concept for the image module

Much appreciated

[jb80]

I am currently using the following configuration; => Category View Settings => Display Name => "Show category name only"

The styling result is the categories name does not apply minus margin to overly the name over the picture (see below) and for the category view the category name class is still shown/enabled but shows empty (bug?) which is causing the image box to be enlarged (see below).

Categories view showing category name without minus margin offset


Category view showing empty category name with enlarged image box

[Jan]

Hi,

1) per standard options, just change the size of thumbnails in Options and recreate thumbnails
2) the tiles were moved to top over the images per minus margin rule
3) module - I didn't test it, but module uses similar divs for displaying the image, so it should be similar to component

When the box for title is empty, this could mean, the the text was moved somewhere (maybe it is below the image hidden), just see the source html code to check, if the title is there and only hidden by CSS

Jan

[jb80]

Hi Jan, thanks for your response and sorry I forgot that I disabled thumbnail creation so please ignore that question (1)

In terms of question (2) the margin offset rule is not working. To ensure that I didn't have any css customisations/conflicts I removed all the default css files and reloaded them by installating the PG package over the top. All css files are now factory default with a new additional style sheet for this change.

The .pg-csv-name-i styling has no affect and it appears the category name inherits styling from default.css using .pg-cv-name. I gather you must have styling rules elsewhere or the name class is wrong?

Only the phocagallery.css (factory) and default.css (factory) with the custom sheet (not shown in image) for this change is enabled so the styling is very basic. Confused?

[Jan]

Hi, hmm, really hard to say without seeing it live

Jan

[christine]

Hi,

Did you try similar:

Code: Select all

.pg-csv-box,
.pg-cv-box {
    padding: 0 !important;
	height: auto !important;
	box-shadow: none;
}
.pg-cv-name {
    margin-top: -30px; /*change to fit*/
    color: #fff;
    }

to your custom.css

Kind regards
Christine

[Jan]

I am now working on version 4.5, I have used this code (the classes are different but you can use the different attributes):

Code: Select all

.pg-categories-box {
    display: flex;
    flex-wrap: wrap;
    align-items: bottom;

}

.pg-category-box {
    /*display: flex;
    flex-direction: column;
    justify-content: flex-end;*/
    border: 1px solid #f0f0f0;
    margin: 0.5em;
    position:relative;
}

.pg-category-box-image img{
    border-radius: 3px;
    box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.7) 0px 3px 7px -3px;
}

.pg-category-box-title {
    position: absolute;
    bottom: 0em;
    left: 0em;
    padding: 0.5em;
    color: #fff;
    font-weight: bold;
    background: rgba(0,0,0,.5);
    width: 100%;
    border-radius: 0 0 3px 3px;
    font-size: 115%;
}

.pg-category-box-count {
    font-size: small;
    color: #d0d0d0;
}

.pg-category-box-title a {
    color: #fff;
    text-decoration: none;
}

There is not used the minus margin but position absolute. Important it, that parent element of the title which is absolutely positioned must include: "position:relative"



Jan

[jb80]

Hi Jan, thank you for your reply however the additional css didn't make any difference. Rather than experiment with the class names it's probably worth me waiting for PG v4.5 to apply this styling.

Will version 4.5 default to this style or at the very least a theme is made available to install? The styling shown above for the CASSIOPEIA example is what I want to copy and in my opinion it should be the default