Clickable images

Resolved wpguillaume
(@wpguillaume)

4 years, 6 months ago
Hello,

I’ve had some time to follow your suggestion from this other thread (https://ww.wp.xz.cn/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!

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author QuantumCloud
(@quantumcloud)

4 years, 6 months ago
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
Thread Starter wpguillaume
(@wpguillaume)

4 years, 6 months ago
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?
Thread Starter wpguillaume
(@wpguillaume)

4 years, 5 months ago

Hello @quantumcloud, would you by any chance have some more time to take a look again at this issue?

Thank you! 🙂

Plugin Author QuantumCloud
(@quantumcloud)

4 years, 5 months ago

Hi,

Missed your last message somehow. Thanks for the follow-up. We released a new version. Please update and check again.

Thanks
Thread Starter wpguillaume
(@wpguillaume)

4 years, 4 months ago
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.
Plugin Author QuantumCloud
(@quantumcloud)

4 years, 4 months ago

Hi,

We released a new version. Please upgrade and check.

Thank you!
Thread Starter wpguillaume
(@wpguillaume)

4 years, 4 months ago
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. 🙂
Plugin Author QuantumCloud
(@quantumcloud)

4 years, 4 months ago

You are most welcome!
Thank you for your cooperation and constructive feedback.

Regards

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Clickable images’ is closed to new replies.