Can I make the navigator buttons images?

My design team would really like some bigger "in your face" buttons for the next/prev/save/etc in the main survey navigation.

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

You can either use images for the buttons or style the buttons via CSS. That is no problem.

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:
So you would have to look for the classes navigator and tools.

So, we would like to customize the buttons as well. Here is where we are...and stuck.

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

Hello,

In javascript, you can:
- Add your own click link
- Hide default navigator.

Denis

I apologize, as I am not really a coder and so barely understand half of this stuff, but isn't that what has been implemented above?
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?

Hello,

For an quick example, using navbuttonsJqueryUi function launched by LS core. and in navigator.pstpl use this:
In template.js:
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)

Denis,
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

For hover : use css :hover class.

For citronade : a button must be like a button to be more comprehesive.

Bu you can use font-size:100px etc ... for decoration

Hi Denis,
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

Corrected the quote (") in the first post

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?

Can you show a link to test it.

Please use javascript console, think there are some js bug.

Seeing your picture, it's really better with some css .....

Here is a link to the survey: www.springboltconsulting.com/survey/index.php/785237/lang-en
I don;t know what javascript console is, but I will look into it.
David

You have an erroir in the correctPNG function.

Remove it , and getfirebug.com/

Denis,
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