Mike,

Welcome to the DNN Community!

DNN has a default theme (aka skin), this is valid for the whole installation (system). Then you can use a default theme per site (portal), and a theme for a page (tab). If there is no page theme defined, the site theme is used, if there is no site theme defined, the system theme is used.

The same is for containers, which are the layout wrappers for the modules. A module is added to a page inside a pane, at least a default pane must be defined in any page skin.

You can define different skins and containers for normal and admin pages. For instance, a theme can have three page skins, "Home", "Inner" and "Admin". Home could include a slider pane, and be used for the start page. "Inner" could be used for all the other pages, therefore defined in the site settings as the default skin. "Admin" will be used for admin pages, e.g. to edit settings (when there is not the popup used, which depends on the module implementation).

A theme normally consists of a set of skin (page) and container files (which are web form controls, ascx-files), css files, javascripts, webfonts, and everything whats needed. It is installed using the extension installer.

A template is a collection of pages that can be used for creating a new site (e.g. the included "Blank" template consists of one home page with no modules).

For more information see DNN Docs.

If you want to create your own theme find some instructions here.

Happy DNNing!
Michael

Hi Mike

In addition to Michaels comments: by default the homepage has a different page setting than site settings. So, you have to adjust that in the page settings.
Some time ago I recorded an introduction for my customers who are new to DNN. Maybe you it is helpful for you as well: https://youtu.be/NIctr6QICUw

Hi Tycho

That was really useful.

Your video mentions that each page has a number of panes that you can put modules in. How do you change the layout of the panes?

I realise that I could just create a 3 column layout by using CSS in the main content pane, but that seems to be defeating the purpose of having different panes in the first place.

What am I missing? If you can't easily change the layout of the panes, why have them? What are they used for?

Cheers Mike

I don't think you're missing a lot, Mike :-)
In fact, I know quite a few developers that basically use a full width pane and/or a content pane and do all the magic in Bootstrap or another CSS framework. Especially if you use OpenContent or 2SXC, you will do a lot of the styling in there.

Having said all that: another approach is to utilize panes. This will allow editors to put modules in a variety of places. For instance the DNNContra offers loads of them (http://dnncontra.com/Getting-Started/Layouts). The default Xcillion also has multiple panes but more modest.
An example of styled panes can be found in the DNNCommunityTheme: https://github.com/DNNCom...336a2bed83392fc910f6 where you can see that a Pane can have a class. This way you can ensure that any content in a pane will have a light grey background when it has the class bg-light-grey (provided you took care of that in your css). An end user can focus on content knowing the styling will be ok.

Mike,

Welcome to the DNN Community!

You need to learn a bit about "DNN Skinning" or "DNN Theming." These are synonyms as DNN "skins" are now referred to as "themes." Recognizing that may help you avoid some confusion going forward.

As for skins/themes, they are usually installed as extensions. If you acquire or purchase a theme, you will get a zip file that you can install, just as you can install modules. Themes are stored as sub-directories of /portals/_default/skins. Themes also include Containers which essentially are themes for individual modules. You will find them in /portals/_default/containers.

If you look at a theme's directory, you will find some aspx files. These are the layout choices presented in the Themes section of the Persona Bar. Select a layout and apply it to a page (from Page Settings, Advanced, Appearance) to apply that layout (and all that comes with it) to a page. Note that you can also select site defaults for themes, layouts, and containers.

As for "how to I style my website," there are two main possibilities. First is portal.css which you will find in /portals/N. The N is a number that corresponds to your portal. The other alternative is skin.css which is located in the theme's sub-directory. Generally, skin.css is use for styling the theme (theme's can be applied to other portals if you have theme. The portals.css file is used for styles special to your portal, and the styles there can overwrite skin.css files.

There are a few other css files. Some may be part of your theme or container. Others are for other purposes. You will find in the Documentation Site a hierarchy for loading CSS file.

If you want to learn more (including much more) about DNN Themes, I recommend an old fashioned approach: read a book! OK, a book even if it is in Kindle format! There are several published books for DNN starting (I think) with DNN 4. I think that all have chapters devoted to "skinning." They contain lots of details, including architectural details and, because things in DNN tend to be upwardly compatible, they still are correct (but ignore anything you see about token based themes or parsing).

And, as mentioned, you will be able to find some good tutorials. Theming is a complex subject if you want it to be, particularly with respect to modern frameworks, js, etc. So, this is a good place to ask questions.

Finally, in the event that you ever want to build a custom theme for DNN, I heartily recommend nvQuickSite, an open source tool for building DNN themes from David Poindexter and the gang at nVisionative (assuming I spelled that correctly). Don't ignore nvQuickSite to for you DNN installations.

I hope that clarifies, rather than obscures, the information in the other great replies to your questions.

Using html editor will be easier for u, free or not im not sure