The LimeSurvey Fund-Raiser 2012 is complete. Thank you for donating a total of 25,000 USD!     List of donors »
Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username?
  • Page:
  • 1

TOPIC: Replacing the next and previous buttons

Replacing the next and previous buttons 2 years 4 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 2 years 4 months ago #55455

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2867
  • Thank you received: 426
  • Karma: 246
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

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 2 years 4 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 2 years 4 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 2 years 4 months ago #55491

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2867
  • Thank you received: 426
  • Karma: 246
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

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

Re: Replacing the next and previous buttons 2 years 4 months ago #55495

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5116
  • Thank you received: 261
  • Karma: 240
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 2 years 4 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 2 years 4 months ago #55509

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2867
  • Thank you received: 426
  • Karma: 246
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

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