Create your own mouse cursor theme: Difference between revisions

From KDE Wiki Sandbox
(updated path for finished theme, and included hint to find cursor names in header file)
 
(One intermediate revision by one other user not shown)
Line 4: Line 4:
* Determine the pixel where the hotspot should sit. The hotspot of a cursor is the point where “the click occurs”. (If you have multiple resolutions for your new cursor, you have to do this step for each of them). It’s necessary to use graphic editing software capable of determining the exact pixel for the hotspot. KDE’s own [https://krita.org Krita] is well suited for this task but of course other software works just as well.
* Determine the pixel where the hotspot should sit. The hotspot of a cursor is the point where “the click occurs”. (If you have multiple resolutions for your new cursor, you have to do this step for each of them). It’s necessary to use graphic editing software capable of determining the exact pixel for the hotspot. KDE’s own [https://krita.org Krita] is well suited for this task but of course other software works just as well.
* Create a <code>$(filename).cursor</code> file with the following content: <code>$(resolution) $(hotspot-x) $(hotspot-y) $(filename)</code> in one line (e.g. <code>32 10 5 default.png</code>).
* Create a <code>$(filename).cursor</code> file with the following content: <code>$(resolution) $(hotspot-x) $(hotspot-y) $(filename)</code> in one line (e.g. <code>32 10 5 default.png</code>).
* Open a terminal in the working directory and run <code>xcursorgen $(filename).cursor $(filename)</code> (e.g. <code>xcursorgen default.cursor default</code>).<ref>If you want to create animated cursors (like <code>wait</code>) the procedure is a bit different. You need one PNG for each animation frame (<code>$(filename)_#.png</code>). Then add all of these as a list to the <code>$(filename).cursor</code> file with the following content: <code>$(resolution) $(hotspot-x) $(hotspot-y) $(filename) $(animationtime)</code> (e.g. 32 16 16 wait_1.png 50 16 16 wait_2.png 50 each of them in a separate line).</ref>
* Open a terminal in the working directory and run <code>xcursorgen $(filename).cursor $(filename)</code> (e.g. <code>xcursorgen default.cursor default</code>).<ref>If you want to create animated cursors (like <code>wait</code>) the procedure is a bit different. You need one PNG for each animation frame (<code>$(filename)_#.png</code>). Then add all of these as a list to the <code>$(filename).cursor</code> file with the following content: <code>$(resolution) $(hotspot-x) $(hotspot-y) $(filename) $(animationtime)</code> (e.g. <code>32 16 16 wait_1.png 50 16 16 wait_2.png 50</code> each of them in a separate line).</ref>
* Repeat steps 1-4 for all the different cursors you want to create.
* Repeat steps 1-4 for all the different cursors you want to create.
* Copy the newly created set of X11 cursors to a fresh subdirectory <code>cursors/</code> inside a directory that you name after your new cursor theme <code>$(themename)/</code> (e.g. <code>KoolKursors/cursors/</code>).
* Copy the newly created set of X11 cursors to a fresh subdirectory <code>cursors/</code> inside a directory that you name after your new cursor theme <code>$(themename)/</code> (e.g. <code>KoolKursors/cursors/</code>).
* Create [https://en.wikipedia.org/wiki/Symbolic_link#POSIX_and_Unix-like_operating_systems symlinks] for all the aliases of the cursors <code>ln -s $(filename).png $(alias).png</code> (e.g. <code>ln -s default.png left_ptr.png</code>).<ref>This task can/should be scripted, provided that you have a complete list of regular cursor names and their irregular aliases. Note that this step might cause some frustration regarding incomplete lists of cursor name aliases.</ref>
* Create [https://en.wikipedia.org/wiki/Symbolic_link#POSIX_and_Unix-like_operating_systems symlinks] for all the aliases of the cursors <code>ln -s $(filename).png $(alias).png</code> (e.g. <code>ln -s default.png left_ptr.png</code>). <ref>This task can/should be scripted, provided that you have a complete list of regular cursor names and their irregular aliases. Note that this step might cause some frustration regarding incomplete lists of cursor name aliases.</ref> See <code>/usr/include/X11/cursorfont.h</code> for a list of cursors.
* Create a <code>index.theme</code> file in <code>themename/</code> (Note: not in <code>cursors/</code> but in its parent directory) and fill it with the necessary information like theme name, desription and possibly a fallback cursor theme.<ref>If you want to add translations for multiple languages, you can do so by using language tags like <code>[en]</code>, <code>[de]</code>, <code>[fr]</code>, etc. for each language (e.g. <code>Comment[en]=My very own cursor theme</code>). Put each of them in a separate line within the <code>index.theme</code> file.</ref> An exemplary <code>index.theme</code> file might look like this:
* Create a <code>index.theme</code> file in <code>themename/</code> (Note: not in <code>cursors/</code> but in its parent directory) and fill it with the necessary information like theme name, description and possibly a fallback cursor theme.<ref>If you want to add translations for multiple languages, you can do so by using language tags like <code>[en]</code>, <code>[de]</code>, <code>[fr]</code>, etc. for each language (e.g. <code>Comment[en]=My very own cursor theme</code>). Put each of them in a separate line within the <code>index.theme</code> file.</ref> An exemplary <code>index.theme</code> file might look like this:


<pre>[Icon Theme]
<pre>[Icon Theme]
Line 14: Line 14:
Comment=My very own cursor theme
Comment=My very own cursor theme
Inherits=breeze_cursors</pre>
Inherits=breeze_cursors</pre>
* Place the whole <code>themename/</code> folder and its freshly created content in <code>~/.local/share/icons</code>.
* Place the whole <code>themename/</code> folder and its freshly created content in <code>~/.icons</code>.
* Select your new cursor theme in the system settings of your OS.
* Select your new cursor theme in the system settings of your OS.


Latest revision as of 14:12, 29 April 2021

How-To

  • Create a PNG file of the cursor you want. Preferrably at least in size 32x32 but you can also create multiple resolutions and bundle those into one cursor file. Save this as $(filename).png (e.g. default.png for a regular cursor).
  • Determine the pixel where the hotspot should sit. The hotspot of a cursor is the point where “the click occurs”. (If you have multiple resolutions for your new cursor, you have to do this step for each of them). It’s necessary to use graphic editing software capable of determining the exact pixel for the hotspot. KDE’s own Krita is well suited for this task but of course other software works just as well.
  • Create a $(filename).cursor file with the following content: $(resolution) $(hotspot-x) $(hotspot-y) $(filename) in one line (e.g. 32 10 5 default.png).
  • Open a terminal in the working directory and run xcursorgen $(filename).cursor $(filename) (e.g. xcursorgen default.cursor default).[1]
  • Repeat steps 1-4 for all the different cursors you want to create.
  • Copy the newly created set of X11 cursors to a fresh subdirectory cursors/ inside a directory that you name after your new cursor theme $(themename)/ (e.g. KoolKursors/cursors/).
  • Create symlinks for all the aliases of the cursors ln -s $(filename).png $(alias).png (e.g. ln -s default.png left_ptr.png). [2] See /usr/include/X11/cursorfont.h for a list of cursors.
  • Create a index.theme file in themename/ (Note: not in cursors/ but in its parent directory) and fill it with the necessary information like theme name, description and possibly a fallback cursor theme.[3] An exemplary index.theme file might look like this:
[Icon Theme]
Name=KoolKursors
Comment=My very own cursor theme
Inherits=breeze_cursors
  • Place the whole themename/ folder and its freshly created content in ~/.icons.
  • Select your new cursor theme in the system settings of your OS.

Done. Enjoy your new KoolKursors theme.

  1. ↑ If you want to create animated cursors (like wait) the procedure is a bit different. You need one PNG for each animation frame ($(filename)_#.png). Then add all of these as a list to the $(filename).cursor file with the following content: $(resolution) $(hotspot-x) $(hotspot-y) $(filename) $(animationtime) (e.g. 32 16 16 wait_1.png 50 16 16 wait_2.png 50 each of them in a separate line).
  2. ↑ This task can/should be scripted, provided that you have a complete list of regular cursor names and their irregular aliases. Note that this step might cause some frustration regarding incomplete lists of cursor name aliases.
  3. ↑ If you want to add translations for multiple languages, you can do so by using language tags like [en], [de], [fr], etc. for each language (e.g. Comment[en]=My very own cursor theme). Put each of them in a separate line within the index.theme file.
Retrieved from "https://wikisandbox.kde.org/index.php?title=Create_your_own_mouse_cursor_theme&oldid=464692"