Styling as shown on YouTube demo

Phoca Gallery - image gallery extension
jb80
Phoca Member
Phoca Member
Posts: 47
Joined: 16 Feb 2013, 16:53

Styling as shown on YouTube demo

Post by jb80 » 02 Feb 2021, 01:20

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 :D In my opinion, it should be the default styling out of the box!

Image

Image


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

Re: Styling as shown on YouTube demo

Post by Jan » 02 Feb 2021, 03:02

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. :idea:

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

jb80
Phoca Member
Phoca Member
Posts: 47
Joined: 16 Feb 2013, 16:53

Re: Styling as shown on YouTube demo

Post by jb80 » 19 Feb 2021, 01:11

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

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 :D

Image

jb80
Phoca Member
Phoca Member
Posts: 47
Joined: 16 Feb 2013, 16:53

Re: Styling as shown on YouTube demo

Post by jb80 » 19 Feb 2021, 10:14

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
Image

Category view showing empty category name with enlarged image box
Image

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

Re: Styling as shown on YouTube demo

Post by Jan » 19 Feb 2021, 19:18

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 :idea:

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

jb80
Phoca Member
Phoca Member
Posts: 47
Joined: 16 Feb 2013, 16:53

Re: Styling as shown on YouTube demo

Post by jb80 » 20 Feb 2021, 22:44

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

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? :idea:

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?

Image

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

Re: Styling as shown on YouTube demo

Post by Jan » 20 Feb 2021, 23:22

Hi, hmm, really hard to say without seeing it live :-(

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

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

Re: Styling as shown on YouTube demo

Post by christine » 22 Feb 2021, 00:47

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

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

Re: Styling as shown on YouTube demo

Post by Jan » 22 Feb 2021, 13:54

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"

Image

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

jb80
Phoca Member
Phoca Member
Posts: 47
Joined: 16 Feb 2013, 16:53

Re: Styling as shown on YouTube demo

Post by jb80 » 22 Feb 2021, 21:13

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 :)

Post Reply