If you are a premium SpicyNodes member, you can customize your SpicyNodes’ visual style in many ways. Following is an overview of the customization options, and how you can tweak these features to make your nodes look unique. For example, you can add background images, change fonts, and integrate the overall look-and-feel with any site.
The "Edit style" tab lets you modify the visual output or theme of your nodemap. If you are a premium member, you will have a green "Customize" button to get started tweaking your style. This is what the "Edit style" mode looks like:
The pane on the left contains a list of predefined styles you can utilize to get started as quickly as possible. As discussed later, you can also tweak each setting and value as needed.
The pane on the right gives you a real time preview of the changes when you make them. You can also zoom in and out to get a better idea about how your selected style works in different perspectives.
If you’d like to customize each portion of your nodemap instead of using a predefined style, click on the "Customize" button. You then see a tabbed layout, in which each tab lets you customize a specific feature of the nodemap. We’ll look at each of them in order.
The overview tab serves a few important functions. First, it lets you select from a number of styles you can apply to the nodemap as a whole.
Second, once you’ve changed all of the various other attributes of the nodemap, this tab allows you to save all the changes you’ve made into a style of its own so that you can reuse it later if needed.
The text tab lets you tweak the typography in your nodemap. The quick preview pane at the top shows you the current language selected, as well as the text that’s being used for all the various textual elements of the nodemap.
The tabbed interface below lets you change these settings as needed.
The browse tab lets you quickly choose a master font for your entire nodemap. You can choose from a range of serif and sans serif fonts.
If need be, you can customize the specific font used in each and every part of the nodemap. Need different fonts for your main text and the labels? Not a problem. Each has its own tab so you can modify each separately.
Finally, you can modify the language used by the SpicyNodes interface. This language will be used on all navigational elements.
The layout tab lets you modify settings that directly affect the visual structure of your nodemap.
The orbit radius setting defines how tightly or loosely the child nodes are placed around the parent node. The orbit shape setting defines which axis the child nodes are aligned with. Generally, the more horizontal it is, the better.
The background tab lets you specify an image to be used as the background for the nodemap. You can upload an image directly from your computer or point to an existing image on the Internet.
Once uploaded, you have a variety of choices as to how to position the background relative to the nodemap. You can opt to display it at its actual size, stretch it as needed, align to a specific direction, and more.
The "Shapes" tab provides tools that let you change the visual presentation of your nodemap. You can choose from a mini-theme that defines the shape of the nodes, connectors, and labels, or just choose them individually through the "More" tab.
Within the "More" tab, you have myriad options to tweak the different aspects of the center, the nodes themselves, the connectors, and the labels. For example, with the center you can choose how thick the lines are, how complex it, the amount of roundness, its length, and even how its bunched together. The attributes are self-explanatory. Play around until you get the look you like.
The "Colors" tab is the central location from where you can change the color scheme of your nodemap. As always, the top part shows you the current color palette. You can choose an existing palette to use from the "Browse" sub-tab or save your current palette to reuse later.
The "Magic" tab lets you generate new colors to use in your nodemap. Choose a main color and how the palette’s colors are to be distributed and — voila — a freshly generated palette just for you.
You’re not limited to generating colors from a fixed starting point. You can also upload your own image. SpicyNodes analyzes your image and selects a color palette based on the colors present in the image.
And here’s a cool quick tip: When you mouseover a color in the main palette above, the element that uses that color pulsates in the preview pane.
The interaction tab contains a few nifty features. You can enable the use of sounds in your nodemap. Once enabled, you can choose which sound is played and the volume at which it is played.
Through the "More" sub-tab, you can also choose the speed at which the nodes transition from one to another and whether the various navigational and utility icons are displayed, as well as a wide variety of other options.
The navigation tab lets you fine-tune the navigational buttons’ appearance and position.
Through the "Navigation & Help" sub-tab, you can first choose the general look of the navigation panel, and then where on the nodemap it will displayed. You can also choose to autohide the panel, if needed. Finally, you can select whether or not a help panel will be displayed, and if so, its style.
In the "Next" tab, you can select the controls that are displayed on your nodemap. Options include zoom, focus, search, and bookmarks. Each of these can be individually enabled or disabled.
Finally, the "Buttons" tab lets you select, on a per-function basis, which functional buttons are displayed.
Through the "Accessibility" tab, SpicyNodes provides handy tools to ensure that visually challenged viewers are able to use your nodemap.
You can test how your nodemap will be seen by colorblind people with various types of deficiencies, as well as by people with cataracts. Each deficiency is further narrowed to more specific defects so you can ensure that your nodemap is thoroughly inclusive.
