- Posts: 3
- Thank you received: 0
Can I make the navigator buttons images?
Can anyone point me in a direction in the help files, css template, or whatever? I did some searches but did not find anything in the forum or via google search.
Thanks in advance for your help

dm
Please Log in or Create an account to join the conversation.
Where to find them is hard to tell and depends very much on the template you are using.
They should be in the navigator.pstpl, which for Citronade for example looks like this:
<p class="navigator">{NAVIGATOR}</p>
<ul class="tools">
<li>{SAVE}</li>
<li>{CLEARALL}</li>
</ul>
So you would have to look for the classes navigator and tools.
I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Please Log in or Create an account to join the conversation.
We added code to the template.css file and code to the navigator.pstpl file.
We have added this to our template.css file. This is CSS for custom next and previous buttons.
.cn_wrapper {
width: 600px;
overflow: hidden; /* will contain if #first is longer than #second */
}
.customnav_prev{
width: 300px;
float:left; /* add this */
}
.customnav_next{
width: 300px;
float:left; /* add this */
}
.customnav_next a {
width: 300px;
height: 110px;
display: block;
background: url('next_custom2_normal.png');
background-repeat:no-repeat;
}
.customnav_next a:hover {
background: url('next_custom2_hover.png');
background-repeat:no-repeat;
}
.customnav_prev a {
width: 300px;
height: 110px;
display: block;
background: url('prev_custom2_normal.png');
background-repeat:no-repeat;
}
.customnav_prev a:hover {
background: url('prev_custom2_hover.png');
background-repeat:no-repeat;
}
And in the navigator.pstpl file, we added:
<div class="cn_wrapper">
<div class="customnav_prev"><a href="#" class="submit" id="moveprvbtnbis" title="Previous"></a></div>
<div class="customnav_next"><a href="#" class="submit" id="movenextbtnbis" title="Next"></a></div>
</div>
<script>
$(document).ready(function(){
$("#movenextbtnbis").click(function(){
$("#movenextbtn").click();
});
});
$(document).ready(function(){
$("#moveprvbtnbis").click(function(){
$("#moveprevbtn").click();
});
});
</script>
When we implement this, the buttons show up fine in the survey...but so do the original navigator buttons.
1) When we delete {NAVIGATOR} from the navigator.pstpl file...the javascript stops working.
2) When we add CSS:
.navigator-table {
visibility: hidden;
}
...the {NAVIGATOR} buttons and the custom images become invisible.
3) And in the end, even if were able to get this to work, I don't see how we can have a custom "submit" image. The {NAVIGATOR} element remains a mystery.
If anyone has further info on this subject, it would be greatly appreciated. As always, thank you.
Nebraska D
Please Log in or Create an account to join the conversation.
- DenisChenu
-
- Offline
- LimeSurvey Community Team
-
- Posts: 8878
- Karma: 400
- Thank you received: 1469
In javascript, you can:
- Add your own click link
- Hide default navigator.
Denis
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Please Log in or Create an account to join the conversation.
The "hide default navigator" is attempted via css which breaks the javascript click event.
Also, how would one get a custom "submit survey" image at the last page of the survey?
Please Log in or Create an account to join the conversation.
- DenisChenu
-
- Offline
- LimeSurvey Community Team
-
- Posts: 8878
- Karma: 400
- Thank you received: 1469
For an quick example, using navbuttonsJqueryUi function launched by LS core. and in navigator.pstpl use this:
<div id="ls-navigator">{NAVIGATOR}</div>
In template.js:
function navbuttonsJqueryUi(){
$("#ls-navigator").hide();
navigatorhtml="";
if($("#moveprevbtn").length>0 )
{
navigatorhtml=navigatorhtml+'<img class="alt-prevbtn" src="prev.png" />';
}
if($("#movenextbtn").length>0 )
{
navigatorhtml=navigatorhtml+'<img class="alt-nextbtn" src="next.png" />';
}
if($("#movesubmitbtn").length>0 )
{
navigatorhtml=navigatorhtml+'<img class="alt-submitbtn" src="submit.png" />';
}
$("#ls-navigator").after(navigatorhtml);
$(".alt-prevbtn").click(function(){$("#moveprevbtn").click();});
$(".alt-nextbtn").click(function(){$("#movenextbtn").click();});
$(".alt-submitbtn").click(function(){$("#movesubmitbtn").click();});
}
Denis
PS: think it's a really bad idea to have image for button. Use a big font-size and some background image still better (look at citronade/template.css)
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Please Log in or Create an account to join the conversation.
This is great. Thank you so much. Two quick questions.
First, how would you handle a "hover" event in the code you provided below?
second regarding, "PS: think it's a really bad idea to have image for button. Use a big font-size and some background image still better (look at citronade/template.css)"...
I'll look at the citronade/template.css and try to learn from it, but to me the navigation still looks like buttons. I'd certainly like to do accomplish the image/image hover in the best way possible. Any advice you have to accomplish what you think is best, I'd be very interested in learning.
Thank you for your time,
David
Please Log in or Create an account to join the conversation.
- DenisChenu
-
- Offline
- LimeSurvey Community Team
-
- Posts: 8878
- Karma: 400
- Thank you received: 1469
For citronade : a button must be like a button to be more comprehesive.
Bu you can use font-size:100px etc ... for decoration
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Please Log in or Create an account to join the conversation.
I'm sorry to say that the jquery solution above does not seem to work.
I've included <div id="ls-navigator">{NAVIGATOR}</div> in the navigator.pstpl and pasted the code into template.js. I changed the image src to reflect the entire path to the alternative button images. I cleared the browser cache. Tested in Chrome and Firefox to no avail. Still, the standard button images are the only thing present on the survey.
Is it possible there is another setting that must be changed?
Thank you in any case,
David
Please Log in or Create an account to join the conversation.
- DenisChenu
-
- Offline
- LimeSurvey Community Team
-
- Posts: 8878
- Karma: 400
- Thank you received: 1469
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Please Log in or Create an account to join the conversation.

I'm afraid correcting the quotes (thank you) made no change.
The only thing I am changing s the path to the custom images as in:
if($("#movesubmitbtn").length>0 )
{
navigatorhtml=navigatorhtml+'<img class="alt-submitbtn" src=" www.springboltconsulting.com/survey/uplo...v_custom2_normal.png " />';
}
The default navigator buttons are still present and functioning, but my images are no where to be found. Is it possible that my image path is somehow not correct? The images are certainly there on the survey, but perhaps the path has to be presented in a different way?
Please Log in or Create an account to join the conversation.
- DenisChenu
-
- Offline
- LimeSurvey Community Team
-
- Posts: 8878
- Karma: 400
- Thank you received: 1469
Please use javascript console, think there are some js bug.
Seeing your picture, it's really better with some css .....
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Please Log in or Create an account to join the conversation.
I don;t know what javascript console is, but I will look into it.
David
Please Log in or Create an account to join the conversation.
- DenisChenu
-
- Offline
- LimeSurvey Community Team
-
- Posts: 8878
- Karma: 400
- Thank you received: 1469
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Please Log in or Create an account to join the conversation.
That did the trick. I got Firebug!
However, it the error didn't seem to be causing the images not to show up. I fixed the error by comparing to default template to see how the code should be fixed. But, in the end, I had to comment the entire CorectPNG function out in order to get the images to show.
Also, commenting that function out fixed an image preloading issue I was having as well that Tpartner was helping with in another post.
Thank you for the help and continuing advice. And Patience! I will remember it come the next campaign!
David
Please Log in or Create an account to join the conversation.