Add shadows on Product Categories

This topic has 13 replies, 2 voices, and was last updated 1 year ago by Hung Pham.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
January 17, 2024 at 5:19 pm #530867

andrea-5600
Participant

Hi,

can i add a shadows like the second image attached?

because when add shadow on the widget it put on the container and not around the images.

tnx

Attachments:
You must be logged in to view attached files.

January 18, 2024 at 7:59 am #531017

Hung Pham
Keymaster

Hi andrea-5600,

Thank you for reaching to us.

Please navigate to Theme Settings > Product archive > Categories styles and enable Categories with shadow option https://prnt.sc/NS-4HkHMiaPx

Regards,

January 22, 2024 at 12:12 pm #532097

andrea-5600
Participant

Hi,
there isn’t what you say…. is only for some category design… maybe can i add a css?

look at the photo

tnx

Attachments:
You must be logged in to view attached files.

January 23, 2024 at 8:01 am #532470
Hung Pham
Keymaster
Hi andrea-5600,

It works with two first designs only https://prnt.sc/6x8zSpVghAi8

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
```
.wd-cats.wd-grid-f-col .wd-cat-inner{
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
}
```
Regards,
January 29, 2024 at 12:58 pm #534475

andrea-5600
Participant

tnx work great!!!

and if i want add shadows in the gallery grid?

in this page?

tnx

January 30, 2024 at 5:53 am #534772
Hung Pham
Keymaster
Hi andrea-5600,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
```
.wd-gallery-item{
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
}
```
And you need to increase the gap between images.

Regards,
January 31, 2024 at 11:58 am #535375

andrea-5600
Participant

something wrong look the picture… a vertical white line come out and the edge are not rounded

Attachments:
You must be logged in to view attached files.

January 31, 2024 at 4:02 pm #535539
Hung Pham
Keymaster
Hi andrea-5600,

Please try below CSS code
```
.wd-grid-f-col>.wd-col.wd-gallery-item{
	margin-right: 20px;
	padding: 0;
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
    width: 95%;
    flex: 0 0 calc(95% / var(--wd-col) * var(--wd-col-wider, 1));
    max-width: calc(95% / var(--wd-col) * var(--wd-col-wider, 1));	
}

.wd-grid-f-col>.wd-col.wd-gallery-item a {
    border-radius: var(--wd-brd-radius);
}
```
Regards,
January 31, 2024 at 8:32 pm #535638

andrea-5600
Participant

ok now better, but not good border radius.

check picture

Attachments:
You must be logged in to view attached files.

February 1, 2024 at 2:16 pm #535799
Hung Pham
Keymaster
Hi andrea-5600,

Please remove previous code and use below one
```
.wd-grid-f-col>.wd-col.wd-gallery-item{
	margin-right: 20px;
	padding: 0;
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
  width: 95%;
  flex: 0 0 calc(95% / var(--wd-col) * var(--wd-col-wider, 1));
  max-width: calc(95% / var(--wd-col) * var(--wd-col-wider, 1));	
}

.wd-grid-f-col>.wd-col.wd-gallery-item {
  border-radius: var(--wd-brd-radius);
}
```
Regards,
February 2, 2024 at 6:06 pm #536316

andrea-5600
Participant

perfect tnx !!

its possible to zoom a little bit when i hover with the mouse?

February 3, 2024 at 8:06 am #536371
Hung Pham
Keymaster
Hi andrea-5600,

Please try below code
```
.wd-grid-f-col>.wd-col.wd-gallery-item{
	overflow: hidden;
}

.wd-grid-f-col>.wd-col.wd-gallery-item img{
	transition: transform .5s;
}

.wd-grid-f-col>.wd-col.wd-gallery-item:hover img{
  transform: scale(1.5);
}
```
Regards,
February 3, 2024 at 4:10 pm #536476

andrea-5600
Participant

ok perfect for the zoom!!!

but i was wrong for last code…. saw that this code non put the shadow on picture yet! look at picture attached

.wd-grid-f-col>.wd-col.wd-gallery-item{
margin-right: 20px;
padding: 0;
box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
width: 95%;
flex: 0 0 calc(95% / var(–wd-col) * var(–wd-col-wider, 1));
max-width: calc(95% / var(–wd-col) * var(–wd-col-wider, 1));
}

.wd-grid-f-col>.wd-col.wd-gallery-item {
border-radius: var(–wd-brd-radius);
}

Attachments:
You must be logged in to view attached files.

February 3, 2024 at 7:14 pm #536515
Hung Pham
Keymaster
Hi andrea-5600,

Please remove all above code and use below one:
```
.wd-grid-f-col>.wd-col.wd-gallery-item{
	margin-right: 20px;
	padding: 0;
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
  width: 95%;
  flex: 0 0 calc(95% / var(--wd-col) * var(--wd-col-wider, 1));
  max-width: calc(95% / var(--wd-col) * var(--wd-col-wider, 1));	
}

.wd-grid-f-col>.wd-col.wd-gallery-item {
  border-radius: var(--wd-brd-radius);
}

.wd-grid-f-col>.wd-col.wd-gallery-item{
	overflow: hidden;
}

.wd-grid-f-col>.wd-col.wd-gallery-item img{
	transition: transform .5s;
}

.wd-grid-f-col>.wd-col.wd-gallery-item:hover img{
  transform: scale(1.5);
}
```
Regards,
Author

Posts