Nucleus is designed to run on DotNetNuke 5.1.0 or greater and will run on the .Net Framework version 3.5 or greater. In order to use Nucleus, you need a good browser. Just try the latest version of whatever browser you're using. If you're using Internet Explorer, you need at least version 8. If you want best performance, we suggest Firefox or Chrome.

Installation is quite straight forward using the common DotNetNuke 5 extension installation process.

Once Nucleus has been installed, you can add it to any page with a compatible skin or container and start using it. You can even apply it to a page without a compatible skin and use the Apply Skin or Apply Container options under File in the Nucleus menu to apply a compatible skin or container. You are advised to create a private test page first and spend some time with it before you start changing your public pages!

How to Uninstall

The nucleus module can be uninstalled at any time using the normal DotNetNuke 5 uninstall extension process.

You need to have Remember Login activated on your portal. This is important. If Remember Login is not activated then you could loose your styles if you click save and your session has expired. You can read this blog post by Cathal Connolly about activating the Remeber Login.

File > Save

Save does as it states; it saves. What it saves is dictated by the currently selected editor. If you have a skin editor selected, your chosen styles for the current page skin will be saved. If a container editor is selected your chosen styles will be saved to the container named in the container editor dropdown list.

There is a minor limitation when saving skins; it is not possible to update any of the parent skins. This is by design to ensure that you always have a valid skin to fall back on. So when you are editing a parent skin or container, save is not an option and will not be available in the menu.

File > Save As

Save As will open a panel where you can specify a name for your child page skin or child container. The save as panel, gives you the option to also apply the skin to the current page. That's available only if you are saving a skin, not a container. An edit panel must be visible for the save as option to be available in the menu or else we don't know what you want to save.

File > Apply Skin

Apply Skin allows you select any compatible skin on the portal and apply it to the current page or to the entire portal.

File > Apply Container

Apply Container will allow you to select any compatible container and apply it to any module on the current page. There are two drop down lists to allow you select the container and the module.

Edit

Under the edit option you can find all the available edit panels, the applied skin and containers on the current page have to offer. Just click one of them and the corresponding panel will become visible.

Settings

The options under settings are self-explaining... Show Status Panel will bring the status panel with the last status message, if there is one. Reset Panels Position will move panels to their default position.

Help

Under Help you can find a link to the support page online and the about option with information about the Nucleus version you are using.

Inspection is On/Off

This is the button where you can toggle inspection. When Inspection is On, you will notice that your cursor changes to crosshair. This means that you can click on any skin section or container and the edit panel with the corresponding options will become visible. Inspection prevents the links and menu items on the page to work. You need to turn inspection off or turn nucleus off in order for the links and menu items to work normally.

There is nothing tricky about using the edit panels but there are some hidden gems you need to know about.

Working with colors

The easiest and most obvious way to choose a color is by writing the HEX color value in the field (without the sharp symbol) or by using the color picker which becomes available when you click the square on the right of any color field. But these are not the only ways to choose a color. Color fields can also take color names and transform them to HEX color values. For example you can simply write black, white, red, yellow, blue, green and the field will make it a HEX color value. The full list of the color names you can use.

Then there is our adorable color buddy. Color buddy remembers the color you are using and creates a nice palette for you so you can choose a color already in use with ease. All you need to do is to double-click in any color field and color buddy will show up. Or you put an exclamation mark in the field and here it is.

And because the point is to have some fun too, put a question mark in any color field and a random color will be generated!

Smart Fields

All fields in Nucleus editors that take numeric CSS values, such as padding, margin, border width etc., can be updated using the arrows or the plus and minus on your keypad. That also works for multiple numeric values in a single field making shorthand CSS a breeze. There are some tips you can try with smart fields. You can put the cursor in an empty field that take numeric values and press the up arrow. 1px will appear in the field as an initial value. If the field supports multiple values you can press space and then again the up arrow to initialize another value. Besides the fields that take numeric values, custom border style fields are smart too.

Another wild card you can use in all fields, either it's about color or numeric value and even on dropdowns is the asterisk which brings the default value back (only when there is one).