Custom Cursor

css content classes cursor

Add a custom cursor

Emil Hvitfeldt true
05-22-2021

A custom cursor can be used if you want a little better highlighting on a specific slide or plot.

We use a content class and a .png file to create a custom cursor.

Result

Rmd

---
output:
  xaringan::moon_reader:
    css: ["default", "style.css"]
    lib_dir: libs
    seal: FALSE
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

class: custom-cursor

# Sample Header

Duis vel viverra elit, eget hendrerit odio.
Curabitur cursus elit nec diam vulputate, nec 
sollicitudin nunc ornare. Ut mi lectus, aliquet 
non ligula sed, lobortis vehicula erat. Morbi 
porttitor orci ut semper dapibus. Donec sodales 
tellus varius tortor varius, ornare commodo augue 
maximus. Vestibulum quisbibendum mi, sit amet 
lobortis leo. Morbi vulputate orci arcu, ac lobortis
sapien gravida eget. Nulla noninterdum orci, nec 
congue ligula.

style.css

.custom-cursor {
  cursor: url('cursor.png'), auto;
}

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".

Citation

For attribution, please cite this work as

Hvitfeldt (2021, May 22). Xaringan Gallery: Custom Cursor. Retrieved from https://xaringan.gallery/examples/custom-cursor/

BibTeX citation

@misc{hvitfeldt2021custom,
  author = {Hvitfeldt, Emil},
  title = {Xaringan Gallery: Custom Cursor},
  url = {https://xaringan.gallery/examples/custom-cursor/},
  year = {2021}
}