4.7/5 rating (3 votes)

It is possible to change the appearance of the cursor when the mouse hovers over items in your app.

(Please Note: Cursor changes will have no affect on a mobile device, as cursosrs do not (normally) appear on phones and tablets.)

You can change this for the whole app. You can also change this for certain types of items (classes) and even for individual items.

 This image shows 3 different cursors that appear as you hover over different items.

Cursors

 

To change the cursor you need to add some CSS rules to your app:

CustomCSS

  1. Open the app "Settings"
  2. Go to the "Advanced" tab and scroll down to "Custom CSS"
  3. Add this CSS rule to change the cursor for all items:
    .item {cursor: cell;}
  4. This CSS changes only "Image Link" items (the CSS class for Image Links is "thumb")
    .item.thumb {cursor: crosshair;}
  5. This CSS is for items that have a Custom Class called "special":
    .item.special {cursor: move;}

 You can find all available Cursor styles in W3Schools:
https://www.w3schools.com/cssref/pr_class_cursor.asp

 

Custom Classes

To add a custom class to an item:

  1. Edit the Item
  2. Go to the "Styles" tab and scroll down to "Custom classes"
    CustomClass1

  3. Enter one (or many) class names. Separate multiple classes using [space]. Do not use dots "."

    CustomClass2



 

 

 

 

Share this product

Book a demo or Masterclass

Find out quickly if AppShed is right for your school.

Book a quick demo, or a more in-depth Masterclass,
to see how AppShed fulfills your curriculumn requirements.

   Book a demo or Masterclass   

appshed name white text 250

Copyright © 2022 AppShed Limited

AppShed Support
Customer Support

We are online and available to help teachers/educators using AppShed. How can we help you today?

Chat, call or email support@appshed.com