Custom CSS need

This topic has 21 replies, 2 voices, and was last updated 5 months, 1 week ago by Aizaz Imtiaz Awan.

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

Author

Posts
July 3, 2024 at 3:45 pm #577464

studio.ambasador
Participant

Hi there please help us with custom CSS for current Container
We looking to set specific size 210 heigh

Thank you

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

July 3, 2024 at 4:19 pm #578781

studio.ambasador
Participant

We need to create a carousel item with specific size 210 px and items listed to be randomly shows if it’s possible , any information help

July 3, 2024 at 6:56 pm #580747

studio.ambasador
Participant

.wd-carousel-item {
position: relative;
height: 210px !important; /* set size 210px */
flex: 0 0 calc(100% / var(–wd-col));
max-width: calc(100% / var(–wd-col));
padding: 0 calc(var(–wd-gap) / 2);
transition-property: transform;
transform: translate3d(0px, 0, 0);
} works but not showing all items

July 3, 2024 at 7:00 pm #580749

studio.ambasador
Participant

you can check image

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

July 3, 2024 at 9:07 pm #580788

studio.ambasador
Participant

.wd-carousel-item {
position: relative;
height: 210px !important; /* set size 210px */
flex: 0 0 calc(100% / var(–wd-col));
max-width: calc(100% / var(–wd-col));
padding: 0 calc(var(–wd-gap) / 2);
transition-property: transform;
transform: translate3d(0px, 0, 0);
}

not valid we set from elementor

July 3, 2024 at 9:24 pm #580791

studio.ambasador
Participant

if you see this poste please help how we can set the arrow (size and color) for this carousel

July 3, 2024 at 11:28 pm #580804

studio.ambasador
Participant

You can find on image attached, current carousel, and arrows location

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

July 4, 2024 at 1:26 pm #580915

Aizaz Imtiaz Awan
Keymaster

Hello,

Can you please share the page URL so I will check and give you a possible solution.

Best Regards.

July 4, 2024 at 1:30 pm #580916

studio.ambasador
Participant

you can create on your testing environment a new container and insert a banner carousel,

we can’t list a website full of errors we need your support to go ahead, once we have all function worked we can go to publish , so atleast one response , we offer much details as possible if you need more I’m here

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

July 4, 2024 at 2:54 pm #580942

studio.ambasador
Participant

please check also img attached

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

July 4, 2024 at 4:03 pm #580979
Aizaz Imtiaz Awan
Keymaster
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
.wd-arrow-inner{
    height: 50px !important;
    width: 40px !important;
}
.wd-arrow-inner:after {
    font-size: var(--wd-arrow-icon-size, 40px) !important;
}
```
Best Regards.
- This reply was modified 5 months, 1 week ago by Aizaz Imtiaz Awan.
- This reply was modified 5 months, 1 week ago by Aizaz Imtiaz Awan.
July 4, 2024 at 4:19 pm #580987

studio.ambasador
Participant

not working 🙁

July 4, 2024 at 4:23 pm #580991

studio.ambasador
Participant

I set .wd-arrow-inner {
height: 50px !important;
width: 40px !important;
color: black !important; /* Adaugă culoarea neagră */
}

.wd-arrow-inner:after {
font-size: var(–wd-arrow-icon-size, 40px) !important;
color: black !important; /* black color icon */
}

Working woohooo thanks

July 4, 2024 at 4:39 pm #581000

studio.ambasador
Participant

One more thing please, I need to set a hover for arrows if it’s possible to be more visible
And what should I do for mobile to be showed ?

Thank you

July 5, 2024 at 9:55 am #581116
Aizaz Imtiaz Awan
Keymaster
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
.wd-nav-arrows[class*="wd-hover"].wd-pos-sep .wd-btn-arrow{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
```
Best Regards.
July 5, 2024 at 4:44 pm #581333

studio.ambasador
Participant

great it’s working your code Thank you, we find another issue regarding arrows,

Once you acces the page you can use the arrow JUST if you move over mouse then it’s activated and product are alighned to lef, what we looking is when customer acces the page and see this carousel once press the arrow even left or right to move the products

I modify as the code because this is what we looking for as fallow :

/* Basic style for button without shadow */
.wd-nav-arrows[class*=”wd-hover”].wd-pos-sep .wd-btn-arrow {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background-color: #ffffff; /* default white background */
box-shadow: none; /* no shadow */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* transition for hover */
}

/* Style for button on hover */
.wd-nav-arrows[class*=”wd-hover”].wd-pos-sep .wd-btn-arrow:hover {
background-color: #FAFAFA !important; /* light gray background on hover */
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* uniform shadow around the button */
}

Please check image attached

Thank you

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

July 5, 2024 at 5:24 pm #581353

studio.ambasador
Participant

please check video attached

July 5, 2024 at 5:27 pm #581354

studio.ambasador
Participant

video

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

July 6, 2024 at 10:22 am #581439

Aizaz Imtiaz Awan
Keymaster

Hello,

When you enable the “Slider Loop”. You can access both the right and left arrow at the same time. It can enables loop mode that is continuous full rotation without stopping/breaking on the last slide

Best Regards.

July 6, 2024 at 12:55 pm #581485

studio.ambasador
Participant

I’m totaly agree with you, what I request was, “why should I pass over carousel first with My mouse” to enable left right arrows as you can see in video I send you , you can observe this things

Hello,

When you enable the “Slider Loop”. You can access both the right and left arrow at the same time. It can enables loop mode that is continuous full rotation without stopping/breaking on the last slide

Best Regards.

July 6, 2024 at 1:13 pm #581488

studio.ambasador
Participant

Hi there we currently set the CSS then we found a new problem check private content

July 6, 2024 at 2:11 pm #581512

Aizaz Imtiaz Awan
Keymaster

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards.
Author

Posts