I have added some code (see below) in to the custom CSS to adjust the colour of the arrows in the carousel. Somehow this resulted in some errors on both web and mobile. This comes as a surprise as the previous days this has been working perfectly without making any changes.
This is a customization question and support doesn't offer customization services as we wrote on our support homepage and on this area.
— Your second CSS code is working as it should.
— Your first CSS code is not working because those CSS classes doesn't exist in that page.
P.S: If you're looking for professional help in this matter, there's always someone available for such tasks on Codeable website. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
The code you mention to work is not working, hence the reason for me to reach out. The colour change is there but the position of the arrow changes each time I change slides, after removing the code entirely the bug of changing arrow position remains. This was working perfectly a few days ago and the only change I did was adding and removing the code in the custom CSS Please advise on this. Link: http://www.vincentkuyvenhoven.nl/portfolio/near-future-past-europeans/
Just a few days ago I payed an additional 45 dollars in order to have acces to professional support, if this is not sufficient and I am bound to do an enquiry to get my money back as I was not informed of different levels of support and pricing.
When going to my site (vincentkuyvenhoven.nl) there are several 'Carousels" I have used in the following pages: U.X.O. , 120 x 120, Ankor watt temple complex, Being Development.
When using Carousels, the arrows to direct forward and backward are not positioned centred like they should be, By each action they lower in position. (see attachment)
When visiting the pages on my mobile, these pages often crash. When I rebuild the entire page with a new 'Carousel', the issue remains.
When I am using 'Lightbox' for instance, like the page 'near-future-past-europeans' the arrows are working properly so the issue limits it selfs only at the carousel section.
Perhaps you can take a look into the code, or in the configurations. Please let ,me know If you need any of the inlog credentials.
Can you please share your Wordpress credentials because I need to login to your site and test this. Your information is safe here (private) in this thread.
To include your credentials click Insert Credentials button in editor toolbar (see how)
— First of all, I saw that you have added JavaScript codes in your Custom CSS area (see video). Adding JS codes there will break your CSS codes and also your JS code will not work.
Instead you can add JavaScript codes in the Laborator > Theme Options > Custom JavaScript area
— Also it's always better to add CSS modifications in the Custom CSS area of the theme and not in the styles.css file (see video).
— You can also manage your theme typography in the Typography area and not add unnecessary CSS codes (see video).
— Your carousel buttons are not showing in the middle because you have applied a maximum image height for that carousel, If i remove 750px there and leave that area untouched then the problem is solved (see video).
I will discuss with our theme developer to ask him if this is a bug and if we can fix it.
Thanks a lot for your extensive reply. Very helpful and insightful :)
- The code that ended up in the other style sheets etc was due to questions and codes given in the q and a's in the discussion panel at kalium support page etc.
- regarding : "— Your carousel buttons are not showing in the middle because you have applied a maximum image height for that carousel, If I remove 750px there and leave that area untouched then the problem is solved (see video)."
~the carousel was working fine in the past and ever since I have used the 750 px setting. When I delete it it will blow up the images somehow. When putting the settings on -1 like noted, all content seems to disappear after publishing. it seems weird to me that the option 'Maximum Image Height' causes the arrows move, which means all users using carousel stumble upon this issue? (video did not work on my side)
then again: I would still love to have all arrows in the portfolio's in #ff561f if you can help with some CSS code on that, great!
— We will check this area in the next 1-2 theme updates, probably we need to re-implement carousel gallery so it will support the custom height that users add.
— As for the arrows color please add the code below to your Custom CSS area:
Hi Kalium,
I have added some code (see below) in to the custom CSS to adjust the colour of the arrows in the carousel. Somehow this resulted in some errors on both web and mobile. This comes as a surprise as the previous days this has been working perfectly without making any changes.
Please advise,
Vincent
.nivo-lightbox-theme-default.nivo-lightbox-overlay {
background-color: rgba(255, 255, 255, 0.97) !important;
}
.single-portfolio-holder.portfolio-type-3 .gallery-slider .slick-next, .single-portfolio-holder.portfolio-type-3 .gallery-slider .slick-prev {
color: #ff561f !important;
}
Hi Vincent,
This is a customization question and support doesn't offer customization services as we wrote on our support homepage and on this area.
— Your second CSS code is working as it should.
— Your first CSS code is not working because those CSS classes doesn't exist in that page.
P.S: If you're looking for professional help in this matter, there's always someone available for such tasks on Codeable website. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
Hi Ylli,
Thank for your answer.
The code you mention to work is not working, hence the reason for me to reach out. The colour change is there but the position of the arrow changes each time I change slides, after removing the code entirely the bug of changing arrow position remains. This was working perfectly a few days ago and the only change I did was adding and removing the code in the custom CSS Please advise on this. Link: http://www.vincentkuyvenhoven.nl/portfolio/near-future-past-europeans/
***
.single-portfolio-holder.portfolio-type-3 .gallery-slider .slick-next, .single-portfolio-holder.portfolio-type-3 .gallery-slider .slick-prev {
color: #ff561f !important;
}
***
Just a few days ago I payed an additional 45 dollars in order to have acces to professional support, if this is not sufficient and I am bound to do an enquiry to get my money back as I was not informed of different levels of support and pricing.
Hi Vincent,
Can you please write exactly what look you want to achieve so I can try it in your site and give you the exact CSS code to make that change.
Thanks!
Hi Ylli,
Thank you for your reply,
When going to my site (vincentkuyvenhoven.nl) there are several 'Carousels" I have used in the following pages: U.X.O. , 120 x 120, Ankor watt temple complex, Being Development.
When using Carousels, the arrows to direct forward and backward are not positioned centred like they should be, By each action they lower in position. (see attachment)
When visiting the pages on my mobile, these pages often crash. When I rebuild the entire page with a new 'Carousel', the issue remains.
When I am using 'Lightbox' for instance, like the page 'near-future-past-europeans' the arrows are working properly so the issue limits it selfs only at the carousel section.
Perhaps you can take a look into the code, or in the configurations. Please let ,me know If you need any of the inlog credentials.
Thank you in advance.
Kinds,
Vincent
Hi Vincent,
Can you please share your Wordpress credentials because I need to login to your site and test this. Your information is safe here (private) in this thread.
To include your credentials click Insert Credentials button in editor toolbar (see how)
Thanks!
Hi Vincent,
— First of all, I saw that you have added JavaScript codes in your Custom CSS area (see video). Adding JS codes there will break your CSS codes and also your JS code will not work.
Instead you can add JavaScript codes in the Laborator > Theme Options > Custom JavaScript area
(view on a new page)
— Also it's always better to add CSS modifications in the Custom CSS area of the theme and not in the styles.css file (see video).
— You can also manage your theme typography in the Typography area and not add unnecessary CSS codes (see video).
— Your carousel buttons are not showing in the middle because you have applied a maximum image height for that carousel, If i remove 750px there and leave that area untouched then the problem is solved (see video).
I will discuss with our theme developer to ask him if this is a bug and if we can fix it.
Thanks!
Hi Ylli.
Thanks a lot for your extensive reply. Very helpful and insightful :)
- The code that ended up in the other style sheets etc was due to questions and codes given in the q and a's in the discussion panel at kalium support page etc.
- regarding : "— Your carousel buttons are not showing in the middle because you have applied a maximum image height for that carousel, If I remove 750px there and leave that area untouched then the problem is solved (see video)."
~the carousel was working fine in the past and ever since I have used the 750 px setting. When I delete it it will blow up the images somehow. When putting the settings on -1 like noted, all content seems to disappear after publishing. it seems weird to me that the option 'Maximum Image Height' causes the arrows move, which means all users using carousel stumble upon this issue? (video did not work on my side)
then again: I would still love to have all arrows in the portfolio's in #ff561f if you can help with some CSS code on that, great!
Once again, many thanks!
Vince
Hi Vince,
— We will check this area in the next 1-2 theme updates, probably we need to re-implement carousel gallery so it will support the custom height that users add.
— As for the arrows color please add the code below to your Custom CSS area:
.lg-outer.lg-kalium-light .lg .lg-actions .lg-next, .lg-outer.lg-kalium-light .lg .lg-actions .lg-prev { color: #ff561f !important; } .single-portfolio-holder.portfolio-type-3 .gallery-slider .slick-next, .single-portfolio-holder.portfolio-type-3 .gallery-slider .slick-prev { color: #ff561f !important; }Thanks for your understanding!