Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Can I make the navigator buttons images?

Can I make the navigator buttons images? 2 years 3 months ago #84041

  • mountainx
  • mountainx's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 2 years 3 months ago #84043

  • holch
  • holch's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2853
  • Thank you received: 360
  • Karma: 125
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:
<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.
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.
The following user(s) said Thank You: mountainx

Re: Can I make the navigator buttons images? 1 year 5 months ago #96205

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 205
  • Thank you received: 5
  • Karma: 5
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
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 1 year 5 months ago #96209

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6472
  • Thank you received: 854
  • Karma: 254
Hello,

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

Denis
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 1 year 5 months ago #96211

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 205
  • Thank you received: 5
  • Karma: 5
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?
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 1 year 5 months ago #96218

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6472
  • Thank you received: 854
  • Karma: 254
Hello,

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)
Last Edit: 1 year 5 months ago by DenisChenu.
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 1 year 5 months ago #96239

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 205
  • Thank you received: 5
  • Karma: 5
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
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 1 year 5 months ago #96241

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6472
  • Thank you received: 854
  • Karma: 254
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
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 1 year 5 months ago #96252

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 205
  • Thank you received: 5
  • Karma: 5
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
The administrator has disabled public write access.

Re: Can I make the navigator buttons images? 1 year 5 months ago #96254

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6472
  • Thank you received: 854
  • Karma: 254
Corrected the quote (") in the first post
Last Edit: 1 year 5 months ago by DenisChenu.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.184 seconds
Donation Image