Welcome, Guest
Username: Password: Remember me

TOPIC: Replacing the next and previous buttons

Replacing the next and previous buttons 3 years 6 months ago #55452

  • solte98
  • solte98's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi,

Can someone point me to the right direction to replace the previous and next buttons with custom images. Also, I would llike to split the buttons so I can put them anywhere on the screen.

Thank you for your assistance
The administrator has disabled public write access.

Re: Replacing the next and previous buttons 3 years 6 months ago #55455

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4068
  • Thank you received: 746
  • Karma: 341
These buttons have unique IDs so you can manipulate them with CSS - moveprevbtn and movenextbtn.

You can't really split them up because they are presented in the {NAVIGATOR} placeholder but you could position them relative to thier parent element. Something like:
#moveprevbtn {
	background: transparent url(myPreviousImage.png) 0 0 no-repeat;
	position: relative;
	top: -30px;
}
 
#movenextbtn {
	background: transparent url(myNextImage.png) 0 0 no-repeat;
	position: relative;
	top: 0;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

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: Replacing the next and previous buttons 3 years 6 months ago #55480

  • solte98
  • solte98's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi there,

thank you for that. I have copied and paste the code you provided in template.css, however, this does not seem to work.

I have replaced the image to an image that is uploded in the uploaded file list. But there are no changes apparant. Do in need to put it in the input class in the template.css

Does the url() need the exact path e.g. url(uploads/images/image.png)

i have limesurvey 1.90 build 9487
The administrator has disabled public write access.

Re: Replacing the next and previous buttons 3 years 6 months ago #55481

  • solte98
  • solte98's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi

Apologies, but that did work.

Thank you

However, I would like to have the button to be replaced by an image (not have a button effect), and use hover effect too.

thanks
The administrator has disabled public write access.

Re: Replacing the next and previous buttons 3 years 6 months ago #55491

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4068
  • Thank you received: 746
  • Karma: 341
Just get rid of the borders and text and give it an appropriate width and height.

Hover effects can be achieved with the :hover pseudo-class.
#moveprevbtn {
	background: transparent url(myPreviousImage.png) 0 0 no-repeat;
	border: 0 none;
	width: 100px;
	height: 25px;
	font-size: 0em;
}
 
#moveprevbtn:hover {
	background-image: url(myPreviousImageHover.png);
	border: 1px solid red;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 3 years 6 months ago by tpartner.
The administrator has disabled public write access.

Re: Replacing the next and previous buttons 3 years 6 months ago #55495

  • Mazi
  • Mazi's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
Tony, can you add this at docs.limesurvey.org/Themes%3A+Templates+...rvey#Tips_amp_Tricks

I'm not sure if we should collect such tips at the link placed above or at the workarounds section. What do you think?

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.

Re: Replacing the next and previous buttons 3 years 6 months ago #55507

  • solte98
  • solte98's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
thank you very much for your assistance on a very nice product.

Please can you give me the ID's for the following buttons please so I can also manipulate via the template.css class's:

load unfinished survey
resume later
Exit and clear survey
submit

thank you
The administrator has disabled public write access.

Re: Replacing the next and previous buttons 3 years 6 months ago #55509

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4068
  • Thank you received: 746
  • Karma: 341
Not all have IDs so sometimes you need to use a class:
Load unfinished surveyinput.saveall
Resume laterinput.saveall
Exit and clear surveyinput.clearall
Submitinput#movesubmitbtn


You can use Firebug for Firefox to explore the elements of your pages.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.127 seconds
Donation Image