Clickable images

Hello, I’ve had some time to follow your suggestion from this other thread ( https://wordpress.org/support/topic/clickable-images-15/ ). Briefly: I tried to apply CSS overrides to the available button function in each slide, in order to have a link associated with every image in my slider. I couldn’t get it to work, apparently because some inline definitions are marked with the !important keyword, for instance: .hero_slider_btn1 { padding: 0px 10% !important; } Or: .slider_hero_btn_cls_one1 { border: 2px solid !important; } It seems this !important keyword in inline definitions prevents any overrides. Am I correct? I can’t see a visual change if I remove this keyword occurrences in the Firefox Inspector. Any chance of them being removed in your code? 🙂 Or could you point me to the right direction to achieve these overrides? Thank you very much! Hi, Thank you for bringing this to our attention. We released a new version. Please upgrade. Now if you use important flag like the following then it should work. .slider_hero_btn_cls_one1 { border: 1px solid #fff !important; } Thanks Hi @quantumcloud , Thank you for the prompt support. I installed the new version, created a new slider with only one slide and a button, added the CSS code below to my theme’s style.css, but didn’t see a difference. .slider_hero_btn_cls_one2 { border: 1px solid #fff !important; } Behaviour is visible at this link . In the inspector, my style.css change is struck out unless I untick the following code at two inline occurrences listed above my style.css change: .slider_hero_btn_cls_one2 { border: 2px solid !important; } Thank you. This reply was modified 4 years, 6 months ago by Jan Dembowski . This reply was modified 4 years, 6 months ago by wpguillaume . Reason: missing link? Hello @quantumcloud , would you by any chance have some more time to take a look again at this issue? Thank you! 🙂 Hi, Missed your last message somehow. Thanks for the follow-up. We released a new version. Please update and check again. Thanks Hi @quantumcloud , Thank you again for the fast response, I missed it when you posted and just got back to the issue. I’m getting somewhere with the following code: .qcld_hero_content_area { top: 0px !important; height: 100% !important; } .hero_slider_btn2 { width: 100% !important; height: 100% !important; padding: 0px !important; /* this one is ignored, see below */ } .slider_hero_btn_cls_one2 { width: 100% !important; height: 100% !important; } It seems another inline “!important” tag is preventing me from sizing the button to the full page width: .hero_slider_btnX { padding: 0px 10% !important; } Would it be possible to remove it as well? Also, the button is not exactly centered ( see link ). I’m toying around the CSS code with my browser’s dev tools, but if you know what I should do, I’d love to hear it, I’m struggling a little. 🙂 Thanks. Hi, We released a new version. Please upgrade and check. Thank you! Hi @quantumcloud , Thank you very much, I got it to work in the end. For those interested, if you have just one button per image, with just a space character as button title, with no title nor description for each image, the following CSS code is what I added to the style.css file: .qcld_hero_content_area { top: 0px !important; height: 100% !important; position: sticky !important; } .hero_slider_btn1 { height: 100% !important; width: 100% !important; padding: 0px !important; } .slider_hero_btn_cls_one1 { height: 100% !important; width: 100% !important; border: 0px !important; } There might be better/cleaner ways to do it, though, I wouldn’t know. 🙂 You are most welcome! Thank you for your cooperation and constructive feedback. Regards