howto_user (howto_user) wrote in s2howto,

Cursor Customization

LiveJournal S2 layouts offer an option to enter custom CSS in the Journal Display area. You can find this option in the Custom CSS section of your Custom Options. One of the neatest things you can do with CSS is to change the style of the mouse cursor when it hovers over certain sections of a page. For instance you can change the usual pointing hand, which you're accustomed to when navigating pages, to something like a crosshair or another type of arrow.

To change the cursor for your journal, you use the "cursor" CSS directive. You can then append any of the following attributes to this directive to change your cursor (moving your mouse over the listed attributes will show you what the corresponding cursor looks like):

nw-resize n-resize ne-resize default
w-resize move e-resize auto
sw-resize s-resize se-resize pointer
text wait help crosshair

As an example, to apply a crosshair cursor to your entire journal, you should edit your theme layer so that it looks like the following:

      body {
        cursor: crosshair;

You can also apply different cursors to specific elements of your journal. For example, you can apply a move cursor to the links of your journal, while the rest of your journal has a crosshair cursor:

      body {
        cursor: crosshair;
      a:hover {
        cursor: move;

If you do not want to use any of the above cursors, you are able to use your own .cur or .ani image as your own custom cursor. Note, however, that this will work only for those who view your journal using Internet Explorer. To use a custom cursor, your theme layer should look like the following:

      body {
        cursor: url(;

Note that the cursor image you wish to use will have to be a genuine cursor image. Renaming a regular image to .cur or .ani will not work. You will also need to ensure that the cursor image is uploaded to a host that permits remote loading to LiveJournal. For more information on remote loading, see this FAQ.

Once you have entered the code you wish to use for your journal, click "Save Changes".

Paid users who are using a custom layout may need to adapt this code into a print_custom_head() function instead. If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will need to create one by following the instructions in the Theme Layer tutorial.

function Page::print_custom_head() {
    <style type="text/css">
    CSS information

Replace CSS information with the code provided earlier in the tutorial. Note that if you already have a print_custom_head function, you will need to merge the two functions together.

Originally written for S1 by jproulx, kamara, phoenixdreaming, and jennieknits. Adapted for S2 by wyntarvox. Adjusted for all account types by camomiletea.

Tags: - all styles, all accounts, cursor customization, free accounts
Comments for this post were disabled by the author