LimeSurvey forums :: Topic: Slider handle (1/1)

Welcome, Guest

TOPIC: Slider handle

Slider handle 2 years 5 months ago #55103

wschatten
OFFLINE
Fresh Lemon
Posts: 9
Karma: 0

Hi guys!
So I am trying to change the image of my slider handle.
I have searched the forums and found a few tips and looked at other peoples code.
Here is what I have tried adding to template.css

.ui-slider-handle {
height: 21px !important;
width: 10px !important;
background-image: url(projects.chass.utoronto.ca/polsci-survey...es/slider-handle.gif);
}

I tried using background-image and also tried using:
background: url(slider-handle.gif);

I have been putting my full url in there, i have tried just using:
background-image: url(slider-handle.gif);

The code above is resizing the current slider handle, it just won't change the actual image.

Also, I clear my cache after every change I make to template.css

Any suggestions or tips?

The administrator has disabled public write access.

Re: Slider handle 2 years 5 months ago #55109

holch OFFLINE LimeSurvey Team Posts: 1998 Thank you received: 163 Karma: 82	As the slider image is an image, I wouldn't work with reseizing it anyway. Have a look into your template at the slider-handle.gif. You can create your own give and put name it exactly as the current one.
	Have a look at the manual! It is a really valuable source for information. Here some helpful links: Manual (EN) \| Question Types \| Question Attributes \| Workarounds If you found this answer helpful and it saved you some time please consider a donation to the project to keep Limesurvey going! The administrator has disabled public write access.

Re: Slider handle 2 years 5 months ago #55111

tpartner
OFFLINE
LimeSurvey Team
Posts: 2926
Thank you received: 446
Karma: 253

This should do the trick with an absolute URL:

.ui-slider .ui-state-default {
	background: transparent url(http://projects.chass.utoronto.ca/polsci-survey/limesurvey/images/slider-handle.gif) 50% 50% no-repeat;
	border: 0 none;
	height: 23px;
	top: -0.6em;
}

Or with a relative path to an image placed in your template directory:

.ui-slider .ui-state-default {
	background: transparent url(slider-handle.gif) 50% 50% no-repeat;
	border: 0 none;
	height: 23px;
	top: -0.6em;
}

You may also want to tweak the slider callout:

.ui-slider .slider_callout {
	margin-left: -4px;
	top: -25px;
}

And , finally, there is an active class you can use for another image while sliding:

.ui-slider .ui-state-active {
	background-image: url(slider-handle-active.gif);
}

Cheers,
Tony

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.

The administrator has disabled public write access.

Re: Slider handle 2 years 5 months ago #55115

wschatten OFFLINE Fresh Lemon Posts: 9 Karma: 0	Hey TPartner, the code above worked perfectly for what I wanted it to do. Thank you so much for helping me with this. I just donated $30 to the site, I hope you at least get a coffee out of that Have a good one guys. Thanks again!
	The administrator has disabled public write access.

Re: Slider handle 2 years 5 months ago #55121

tpartner OFFLINE LimeSurvey Team Posts: 2926 Thank you received: 446 Karma: 253	No problem, glad we could help. I'm sure that if we weren't on different continents Carsten would buy me a beer
	Cheers, Tony LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project. The administrator has disabled public write access.

Re: Slider handle 2 years 4 months ago #55630

Mazi NOW ONLINE LimeSurvey Team Posts: 5118 Thank you received: 264 Karma: 241	tpartner wrote: No problem, glad we could help. I'm sure that if we weren't on different continents Carsten would buy me a beer Probably not just one but a whole box.
	Best regards/Beste Grüße, Dr. Marcel Minke (Limesurvey Head of Support) Need Help? We offer professional Limesurvey support Contact: marcel.minke(at)limesurvey.org'" The administrator has disabled public write access.

Forum

English support forums

Design issues

Slider handle