This page is a complete reference for all themes and scripts created by Scribblemakes, it includes links to downloads, usage and installation instructions, and information on scripts. It also does not use any Javascript to display information, unlike the javascript-enabled page.

Everything in this collection is under an Attribution-NonCommercial-ShareAlike 4.0 International License and a Mozilla Public License v2.0, meaning you're free to use them and build your own works based on them for distribution (as long as they're under a similar license). You can use them on your site if you're selling something, feel free to use them on your commission or store pages as long as you do not sell the original files provided by this page. If any theme or script is under a different license it will be listed beside the item's information.

Page Navigation: Tutorials || Themes || Widgets || Plugins
Site navigation: Homepage || Javascript-enabled Page

Tutorials

HTML (Writing your page)

CSS (Styling your page)

Animating elements on your page:

CSS creates animations through @keyframes and the animation-name property. W3Schools has a page about using these animation functions: W3Schools site.

This is an example of how it can be used with multiple properties:
@keyframes animation {
 0% {background-color: red; border-radius: 0;}
 50% {background-color: red; border-radius: 50%;}
 100% {background-color: red; border-radius: 0;}
}
.animate {
 animation-name: animation;
 animation-duration: 5s;
 animation-timing-function: linear; /*ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)*/
 animation-iteration-count: infinite;
}

Below are some common ways to animate an element:

  • - Transform: translate(n, n); /* n is how much to move it by */
  • - Transform: scale(n, n); /* n is how much to scale it by */
  • - Transform: rotate(ndeg); /* n is the degree amount to turn */
  • - Transform: rotate(ndeg) scale(n, n) translate(n, n); /* Combines multiple transform effects */

Javascript (Interacting with your page)

Themes

Information and Usage

Themes are what I call the collections of code I make that affect a whole site's style, function, and layout. Some are layout-only, relying entirely on CSS and HTML, while some rely heavily on Javascript to create affects like opening windows, image maps, and more. When you install a theme it's very similar to installing a premade website, or installing a theme on a personal blog site like Blogger or Tumblr.

Every theme is responsive and tested for mobile screen sizes.

Free Themes

Operating Systems

An image showing a preview of the Glasspane Mana theme. 🪟 Glasspane Mana V1.0 Example: Example HTML page
Download: Complete .ZIP file

Based on an older operating system, Glasspane Mana is a website theme that lets creators make their sites more interactive. With resizable windows and multiple being open at once, it encourages one-page websites without making them too long.

Features
  • Automatic desktop and taskbar creation
  • Content-responsive header and footer bars
  • Easily customisable CSS colours and images
  • Draggable and resizable windows
  • Multiple windows open at once
  • Optional help windows
Theme Details
  • Last Updated: 9th August 2023
  • Item Name: scTheme_GlasspaneMana
  • Status: Complete
  • Type: Theme
  • Javascript: Required, noscript redirect
  • Files Included: HTML file, CSS file, Javascript file, placeholder images
  • Example: Example HTML page
Download
Installation Guide

Usage instructions are included in the example HTML file. To install the theme, download the files individually or download the Complete .ZIP file. Extract all .ZIP files and upload the HTML, CSS, JS, and imgs folder to the same location. If you installed it correctly, the example HTML file will show images and have a taskbar at the bottom.

Paid Themes

Widgets

Information and Usage

Widgets are visible and interactive elements that can go on your webpage, such as a collection of buttons or a script that allows you to build a game. Out of the three categories on this page (themes, widgets, and plugins) they require the most input from you to install correctly, since they are usually very complex. Every widget includes an installation guide however, so code can easily be copied or edited with the guide if you're not confident in your coding abilities.

Free Widgets

Blogs, Writing, and Updates

A GIF showing the Blog Pages Widget being used.📰 Blog Pages Widget V1.0 Example: Example HTML page || CSS Viewer
Download: Complete .ZIP file

This widget helps automate a lot of the blog-making process for personal sites, making it far easier to post updates on your website and set up a RSS feed. It also adds more functionality with chronological sorting, labels for filtering, and post scheduling.

Features
  • An interactive post list that automatically generates based on the URLs you provide
  • Timestamps included on post links and posts, which can be customised
  • A label system that can be used to search through blog posts, by excluding or including posts with those labels
  • The ability to limit how many post links show at once, which adds a 'view more posts' button
  • An added button to return to your homepage and to link to your RSS feed, and the option to hide them
  • The ability to schedule posts, which hides them from the post list and redirects users who try to open the post manually
  • Automatic addition of a post's title, time posted, and labels
  • Automatic addition of buttons to posts that link to the post before, and after, it.
Widget Details
  • Last Updated: 31st August 2023
  • Item Name: sc_bpw
  • Status: Complete
  • Type: Widget
  • Javascript: Required, noscript warning
  • Files Included: HTML files (8), Javascript file, CSS file, placeholder images
  • Other Scripts Included: No
  • Example: Example HTML page || CSS Viewer
Download
Installation Guide

The widget comes with an installation guide as a blog post, you can view it here.

Images and Galleries

A GIF showing the Interactive Map Widget being used.🖼 Interactive Map Widget V1.0 Example: Example HTML page
Download: Complete .ZIP file

A widget that helps users set up an interactive image map. The map offers hover-on features to change its appearance, being able to link image maps to give the illusion of travelling through a space, and responsive sizing.

Features
  • Responsive image map resizing (included plugin)
  • Preloading images included in the map (included plugin)
  • Image animations when areas are hovered over
  • Area maps changing the background and use map, giving the illusion of changing areas
Widget Details
  • Last Updated: 7th August 2023
  • Item Name: sc_imw
  • Status: Complete
  • Type: Widget
  • Javascript: Required, noscript warning
  • Files Included: HTML file, Javascript file, placeholder images
  • Other Scripts Included: Yes
    • Image Preloader Plugin
    • Responsive Image Map Plugin
  • Example: Example HTML page
Known Errors
  • On mobile platforms the map can occasionally break due to the touch interface. The widget can disable itself on smaller screens in the .js file to avoid this problem, but refreshing the page will also fix it.
Download
Installation Guide
  1. Download the Javascript, HTML example, and placeholder images files from the 'download' tab above. Add them to your neocities site and do not separate them into different folders.
    • The following guide will work from the sc_imw_example.html file. If you wish to add it to your own pre-existing page, copy the following code and paste it between your <body> tags:
      Reveal Code <!-- Interactive Image Map Container -->
      <div id="sc_imw_container">
      <!-- Images for the Map -->
      <img id="sc_imw_mappedImage" src="sc_imw_imgs/sc_imw_testingRoom1.png" usemap="#sc_imw_testingRoom1.png" alt="Scribblemakes Code Interactive Image Map Widget">
      <noscript>Javascript is disabled. Enable your Javascript to use the interactive map.</noscript>


      <!-- First Map (Room 1) -->
      <map name="sc_imw_testingRoom1.png">
      <area shape="rect" coords="261,202,547,803"
      onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
      href=""
      class="sc_imw_MapClass">
      <area shape="rect" coords="1370,202,1658,803"
      onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
      onclick="sc_imw_changeArea('sc_imw_testingRoom2.png')"
      class="sc_imw_MapClass">
      </map>


      <!-- Second Map (Room 2) -->
      <map name="sc_imw_testingRoom2.png">
      <area shape="rect" coords="261,202,547,803"
      onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
      onclick="sc_imw_changeArea('sc_imw_testingRoom1.png')"
      class="sc_imw_MapClass">
      <area shape="rect" coords="820,226,1098,807"
      onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
      href="https://scribblemakes.com/code/development#sc_imw"
      class="sc_imw_MapClass">
      <area shape="rect" coords="1370,202,1658,803"
      onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
      href=""
      class="sc_imw_MapClass">
      </map>
      </div>

      <!-- Link and Button (optional)
      <a id="sc_imw_preloadLink">This link text is replaced with sc_imw_impp_starterText if text is missing</a>
      <button id="sc_imw_preloadButton">This button text is replaced with sc_imw_impp_starterText if text is missing</button>
      -->

      <!-- Script to set up images -->
      <script src="scWidget_InteractiveImageMap.js" type="text/javascript"></script>
      <script>sc_imw_Preload(["sc_imw_imgs/sc_imw_testingRoom1.png", "sc_imw_imgs/sc_imw_testingRoom2.png"]);</script>
    • If you're using your own page, make sure it's in the same folder as the .js file and images folder.
  2. When you view the HTML page you should now see the placeholder map and be able to interact with it. The rest of this guide will go over replacing the placeholder images with your own.
  3. Replace the starting image with your own
    1. Upload your new starting image into your images folder, where you can see the placeholder .png files, and then open the HTML file.
      • All images will need to be kept in the same folder for your map. If you're using an image from another server: download it and upload it to your image map folder (by default this is "sc_imw_imgs", you can change it in the .js file).
    2. Find the main image tag (by default it has the "sc_imw_mappedImage" id) and change its src property to the image URL you want the map to start on. For example:<img id="sc_imw_mappedImage" src="sc_imw_imgs/myFirstRoom.png" usemap="#sc_imw_testingRoom1.png" alt="Scribblemakes Code Interactive Image Map Widget">
    3. Change the main image's usemap property to the name of your image with a # in front of it.<img id="sc_imw_mappedImage" src="sc_imw_imgs/myFirstRoom.png" usemap="#myFirstRoom.png" alt="Scribblemakes Code Interactive Image Map Widget"> Scroll down to your first map and also change its name to your new image.<!-- First Map (Room 1) -->
      <map name="myFirstRoom.png">
    4. Find the script at the bottom of the page and change the code to now load your new background image. To do this, replace the first string (inside the " ") in the array to your image URL:<!-- Script to set up images -->
      <script src="scWidget_InteractiveImageMap.js" type="text/javascript"></script>
      <script>sc_imw_Preload(["sc_imw_imgs/myFirstRoom.png", "sc_imw_imgs/sc_imw_testingRoom2.png"]);</script>
    5. If your new image is not 1920px by 1080px in size, you'll need to change some variables in the javascript file. Open 'scWidget_InteractiveImageMap.js' and scroll down to '// Responsive Image Maps Plugin Setup'. Change sc_imw_rimp_originalWidth and sc_imw_rimp_originalHeight to your image's width and height in pixels, respectively. For example, if your new image was 2000px tall and 1000px wide: // Responsive Image Maps Plugin Setup
      var sc_imw_rimp = true; // Set to false to deactivate the built-in Image Map Resizer
      const sc_imw_rimp_originalWidth = 1000; // Width of the image without CSS styling (file dimensions, the size it was mapped at)
      const sc_imw_rimp_originalHeight = 2000; // Height of the image without CSS styling (file dimensions, the size it was mapped at)
    6. Your map will now start on your new image, and it will be loaded with the rest of the images.
  4. Add new clickable areas
    1. Creating clickable areas with the Interactive Map Widget is the same as creating standard HTML image maps. You can read more about making standard HTML image maps here. To start, you'll need a program or site that allows you to see the x and y coordinates of your cursor on top of your image, such as the Paint program offered by Microsoft.
    2. Upload your image into the program or site and get the coordinates of where you want a space to be clickable. For this guide, the clickable space will be where the doors are. Since that's a rectangular shape, it will only need the top left and bottom right coordinates (which are 261x 202y and 547x 803y). MSPaint with red boxes over where the x & y coordinates of the mouse are shown Write down the coordinates you find for each clickable area, you'll be inputting them into your code later.
    3. Return to your HTML document and delete both maps (not the image or outside the div), your map code should look like this:<!-- First Map (Room 1) -->

      <!-- Second Map (Room 2) -->
    4. Add a map to both the first and second room sections. Your maps' names will need to be the file name of the room, for example: the first map name will be myFirstRoom.png based on the last section of this guide.<!-- First Map (Room 1) -->
      <map name="myFirstRoom.png">
      </map>

      <!-- Second Map (Room 2) -->
      <map name="sc_imw_testingRoom2.png">
      </map>
      • If you have a second image ready that you want to use, upload it to your image folder and rename the second map. Make sure the second image is the same size as your first image or the script will not work.
    5. Add your area shapes to your maps, including their shape, coords (which you wrote down earlier), and the class 'sc_imw_MapClass'. This guide will use the doors of the placeholder image as the clickable areas, which means room 1 will have two shapes and room 2 will have three. <!-- First Map (Room 1) -->
      <map name="myFirstRoom.png">
       <area shape="rect" coords="261,202,547,803"
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         class="sc_imw_MapClass">
       </map>

      <!-- Second Map (Room 2) -->
      <map name="sc_imw_testingRoom2.png">
       <area shape="rect" coords="261,202,547,803"
         class="sc_imw_MapClass">
       <area shape="rect" coords="820,226,1098,807"
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         class="sc_imw_MapClass">
       </map>
    6. Now you'll add the animations for when the clickable areas are hovered over. This is done by adding a new line to your areas that gives them a 'hover over' event, which then calls a function and the animation image you want to use. <!-- First Map (Room 1) -->
      <map name="myFirstRoom.png">
        <area shape="rect" coords="261,202,547,803"
         onmouseenter="sc_imw_AreaHover('myFirstRoomAnim1.png')"
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         onmouseenter="sc_imw_AreaHover('myFirstRoomAnim2.png')"
         class="sc_imw_MapClass">
      </map>

      <!-- Second Map (Room 2) -->
      <map name="myFirstRoom.png">
       <area shape="rect" coords="261,202,547,803"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
         class="sc_imw_MapClass">
       <area shape="rect" coords="820,226,1098,807"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
        class="sc_imw_MapClass">
      </map>
      • The function 'sc_imw_AreaHover' is given the image file you want to go on top of your background, such as 'myFirstRoomAnim1.png'. It's recommended to make these images transparent so they only cover the area you want animated, making it easier to add things to your background without needing to change every animation.
      • These animations, and the background image, can be any file type (such as gifs and jpgs). However they ALL must be the same dimensions (for example: 1920px by 1080px).
    7. When you view your page it should now animate when you hover over your clickable areas. The last thing to do with them is to give them a function for when they're clicked on, such as changing to your second room or going to a new URL. This guide will start with adding the URL, which is done with href: <!-- First Map (Room 1) -->
      <map name="myFirstRoom.png">
       <area shape="rect" coords="261,202,547,803"
         onmouseenter="sc_imw_AreaHover('myFirstRoomAnim1.png')"
         href=""
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         onmouseenter="sc_imw_AreaHover('myFirstRoomAnim2.png')"
         class="sc_imw_MapClass">
      </map>

      <!-- Second Map (Room 2) -->
      <map name="sc_imw_testingRoom2.png">
       <area shape="rect" coords="261,202,547,803"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
         class="sc_imw_MapClass">
       <area shape="rect" coords="820,226,1098,807"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
         href="https://scribblemakes.com/code/development#sc_imw"
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
         href=""
         class="sc_imw_MapClass">
      </map>
    8. If your clickable area should take you to another image, it will need an 'onclick' property that calls the 'sc_imw_changeArea' function. You'll need to give this function the name of the image / map you want it to go to: <!-- First Map (Room 1) -->
      <map name="myFirstRoom.png">
       <area shape="rect" coords="261,202,547,803"
         onmouseenter="sc_imw_AreaHover('myFirstRoomAnim1.png')"
         href=""
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         onmouseenter="sc_imw_AreaHover('myFirstRoomAnim2.png')"
         onclick="sc_imw_changeArea('sc_imw_testingRoom2.png')"
         class="sc_imw_MapClass">
      </map>

      <!-- Second Map (Room 2) -->
      <map name="sc_imw_testingRoom2.png">
       <area shape="rect" coords="261,202,547,803"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
         onclick="sc_imw_changeArea('myFirstRoom.png')"
         class="sc_imw_MapClass">
       <area shape="rect" coords="820,226,1098,807"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
         href="https://scribblemakes.com/code/development#sc_imw"
         class="sc_imw_MapClass">
       <area shape="rect" coords="1370,202,1658,803"
         onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
         href=""
         class="sc_imw_MapClass">
      </map>
    9. Your clickable areas are now done. You can follow the same process to add new maps or areas for any images you add.
  5. Add new background images / rooms
    1. Upload your new background image to your images file, making sure it's the same size as your starting image.
    2. Open your HTML file and scroll to the bottom where you'll find '<!-- Script to set up images -->' and find the 'sc_imw_Preload' function. You'll need to add your new image into the array:<!-- Script to set up images -->
      <script src="scWidget_InteractiveImageMap.js" type="text/javascript"></script>
      <script>sc_imw_Preload(["sc_imw_imgs/sc_imw_testingRoom1.png", "sc_imw_imgs/sc_imw_testingRoom2.png", "sc_imw_imgs/myNewRoom.png"]);</script>
      • If you're replacing the second placeholder image, remember to remove '"sc_imw_imgs/sc_imw_testingRoom2.png",' from the array and rename your second map.
    3. Repeat the instructions listed in step 4, this time using it to set up your new image's clickable areas.
  6. Your image map is now functional and using your own images. You can keep developing it to make a site map, a game, or anything else you can think of. If you'd like to customise it further in the .js file: scroll down inside the .js file until you see '// FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT'. You can customise your script from here if you plan to change your image folder or rename your image id. You can also customise the two included plugins to change their appearance, behaviour, and turn them off if needed.
CSS Guide
  • #sc_imw_container = Element holding the widget
  • #sc_imw_preloadLink = Link used for preloading images if style is 'link'
  • #sc_imw_preloadButton = Button used for preloading images if style is 'button'
  • .sc_imw_impp_blackout = Element holding the preloading text for the 'blackout' style

Paid Widgets

Plugins

Information and Usage

Plugins are scripts that affect the pre-existing code on your HTML page, such as adding additional event listeners to elements or dynamically resizing size-restricted functions. Plugins are the easiest to install, usually only requiring one line of code near the bottom of your HTML page to function, and often are only one Javascript file.

Free Plugins

Images and Galleries

A GIF showing a preview of the Image Click to Enlarge Plugin. 🖼 Image Click to Enlarge Plugin V1.0 Example: Example HTML page
Download: .JS file

A plugin that makes images clickable, opening them up at a larger size for easier viewing.

Features
  • Choice of collecting all images on a page or only a selected class
  • Choice of giving images a class that forces them to be ignored by the plugin
  • Easy customisation of the image viewer's appearance
  • Creates a caption from the image's alt, which can be turned off
  • Creates a gallery of images users can click through, which can be turned off
  • Keyboard-only accessibility included
Theme Details
  • Last Updated: 8th August 2023
  • Item Name: sc_icep
  • Status: Complete
  • Type: Plugin
  • Javascript: Required
  • Files Included: HTML file, Javascript file
  • Example: Example HTML page
Download
Installation Guide
  1. Install the Javascript file from the 'download' tab above and place it in the same folder as your HTML file. Open your HTML file and place the following code just above the </body> tag:<script src="scPlugin_ImageClicktoEnlarge.js" type="text/javascript"></script>
    • You can place it in another folder, but change the src to match its new location. For example: if you place in a folder named 'scripts', which is in the same place as your HTML file, you'd put:<script src="scripts/scPlugin_ImageClicktoEnlarge.js" type="text/javascript"></script>
  2. If you have images you want the script to ignore, making it so users can't click on them, you can give them the class 'sc_icep_noEnlarge'.
  3. The plugin is now successfully installed on your HTML page and will run (as long as Javascript is enabled). You will need to copy that line of code to any HTML page you want it to run on. If you want to customise it more, you can open the .js file and scroll down until you see '// FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT'. You can customise your script from here if you plan to change the image viewer's appearance, what its ignored class is, and so on.
CSS Guide
  • Note: Some CSS settings need to be set through the .js files, read the installation and use guide for more information
  • #sc_icep_imgsViewer = Image viewer's container, entire element
  • #sc_icep_imgsViewerBox = Table box containing the gallery buttons and main image
  • #sc_icep_imgsHolder = Main image (note: background-image properties are not editable, they're used to show the image)
  • #sc_icep_imgsText = Text box holding the alt caption
  • .sc_icep_galleryButton = The gallery buttons
An icon representing the Responsive Image Map Plugin 🖼 Responsive Image Maps Plugin V1.0 Example: Used in Interactive Map Widget example
Download: .JS file

A plugin that makes image maps responsive, allowing them to be any scale without needing to write multiple coordinates for the same area.

Features
  • Automatically resizes areas for image maps, regardless of size
  • Works for skewed and distorted images
Theme Details
Download
Installation Guide
  1. Install the Javascript file from the 'download' tab above and place it in the same folder as your HTML file. Your HTML file will need an image map in it, otherwise the script will cause an error.
  2. Open the HTML file with the image map and place the following code just above the </body> tag:<script src="scPlugin_ResponsiveImageMaps.js" type="text/javascript"></script>
    • You can place it in another folder, but change the src to match its new location. For example: if you place in a folder named 'scripts', which is in the same place as your HTML file, you'd put:<script src="scripts/scPlugin_ResponsiveImageMaps.js" type="text/javascript"></script>
  3. Find your image map in your HTML code. If it doesn't have an ID then give it the id 'sc_rimp_image', and give your areas shapes the class 'sc_rimp_area'.
  4. Open the .js file and locate the '// FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT' line. Replace the sc_rimp_originalWidth and sc_rimp_originalHeight values with the original size of your image map. For example, if it was 1920px by 1080px:const sc_rimp_originalWidth = 1920;
    const sc_rimp_originalHeight = 1080;
    • If your image's id and areas' class are already set, you can change the sc_rimp_mappedImageId and sc_rimp_mapAreasClass values to match.
  5. The plugin is now successfully installed on your HTML page and will run (as long as Javascript is enabled). You will need to copy the first line of code to any HTML page you want it to run on.

Paid Themes