|
|
|
This tutorial is a step by step guide covering how to create the free ‘Simple Red Leaf’ pure CSS layout containers
You can view the skin live here:
http://skins.dnncreative.comThe containers are created using just CSS (no tables) and make use of CSS for the layout and styling the titles.
The tutorial consists of 4 videos detailing how to create CSS containers for DotNetNuke using Visual Web Developer Express Edition.
The videos cover:
- Video 1 – Introduction, demonstration of containers
- Video 2 – Preparations, first CSS container, the transparent containers
- Video 3 – Boxed containers, ids and classes with containers
- Video 4 – Finishing touches, spacing, testing, fixing with hacks and completion of containers
Total Time Length: 34min 41secs
View video 1 to watch an introduction to the tutorial. (2.7MB)
Contrary to popular knowledge, the SolPartMenu provides full capabilities for options including root menus, child menus, vertical displayed menus and more. Knowing these flexibilities exist leads the designer into better and more adaptable website skins, as well as more robust and friendly navigation systems not ordinarily realized by most DNN users.
This article provides a deeper insight, as well as a few suggestions into the standard, yet not so well known, attributes of the SolPartMenu Skin Object.
Read More..
Continuing our series on
How to build a DotNetNuke website, we expand on the previous tutorial (
Styling and formatting in the Text/HTML module) and add content to the Home and Portfolio pages of the Vortex Music website.
The first three videos of this tutorial focus on the Home page, in particular working with the
Text/HTML module and the
FCKEditor. We demonstrate the best practices when working with the
Text/HTML module as well as working with images, uploading files and formatting the text.
The second half of the tutorial (6 videos) focuses on the portfolio page. We demonstrate how to programme the
skin.css file and the
FCKEditor so that you can quickly and easily create the Portfolio credits list. This page is created using just CSS, no tables are used and no images or formatting are placed in the source code of the page. The Portfolio page is styled completely using the
skin.css file.
To see this in action and for a more detailed explanation, view:
Video 1 – Introductions and Examples (10.8MB)
The videos cover:
- Video 1 – Introduction and Examples
- Video 2 – Keyword Research, Text/HTML module, FileManager and images
- Video 3 – Adding content, working with containers, quick tips, completion of Home page
- Video 4 – Introduction to the Portfolio page
- Video 5 – Setting the first portfolio properties in the skin.css file
- Video 6 – Creating portfolio items for the right side
- Video 7 – Grouping classes, completing all portfolio items, adding styles to FCKEditor
- Video 8 – Wrapping problems and solutions
- Video 9 – Finishing touches to the portfolio page
Total Time Length: 68min 46secs
Version 2 released May 2006
Version 1 created August 2005These free video tutorials are for beginners to DotNetNuke. They give you a quick overview of DNN with just enough information to get you going, without becoming lost in the full details.
These videos provides a foundation for getting started with DotNetNuke and will lead onto the other tutorials which provide more detailed explanations.
The DNN Quick Start Guide videos cover:
- How to secure your DotNetNuke portal
- Changing the passwords of the admin and host accounts
- Explanation of the admin edit area, content panes and modules
- Deleting modules from the Home Page
- Inserting two Text / HTML modules to the page
- Using the Text / HTML module to add text and images
- Using the links module, adding links to the page
- How to preview the DotNetNuke website
- Using the image module
- Changing the look of a DotNetNuke portal
- Using Containers: Removing containers
- How to change a container
- How to change the skins for a DotNetNuke portal
- How to change and upload a new logo
- How to add pages
- How to add sub menu and sub sub menu items
- How to move modules around the page
Total Time Length: 40min 17secs
Read More..
This tutorial outlines what not to do when working with the Text/HTML module. We then outline the methods that you should use when adding content to the Text/HTML module.
This is a list of practices we have come across when beginners first use the Text/HTML module which you should try to avoid.
Read More..
Continuing our series on
How to build a DotNetNuke website, we are now going to explore adding content to the Vortex Music website.
This tutorial focuses on the methods you can use to add content to your website using the
Text/HTML module.
In particular using the FCKEditor in combination with calling classes from the skin.css file to format the text and images within the
Text/HTML module.
The video tutorials demonstrate step by step how you can create CSS classes to format your images and text.
The videos cover:
- Video 1 – Introduction and practices to avoid
- Video 2 – First CSS styling and setting up the FCKEditor
- Video 3 – CSS styles for images and quotes
- Video 4 – CSS styles for images with captions
- Video 5 – FCKEditor and setting up a styles list
- Video 6 – Using the FCKEditor to call styles from the skin CSS file
Total Time Length: 61min
We demonstrate how you can create the following layouts without using any additional containers or tables...
This tutorial is a step by step guide for how to create the free ‘Simple Red Leaf’ pure CSS layout skin.
You can view the skin live here:
http://skins.dnncreative.comThe layout is created using just CSS (no tables) and makes use of CSS for styling the fonts, menu etc.
The tutorial consists of 9 videos detailing how to create a CSS skin for DotNetNuke using Visual Web Developer 2005 Express Edition.
The videos cover:
- Video 1 – Introduction, Preparations, Explanations
- Video 2 – Setting up the layout skeleton of the CSS skin
- Video 3 – Viewing the initial layout and setting the DOC Type
- Video 4 – Setting first properties in the skin.css file
- Video 5 – Setting up the layout of the skin using CSS
- Video 6 – Finishing touches to the CSS skin layout
- Video 7 – Styling the HouseMenu
- Video 8 – Testing in browsers and fixing with hacks
- Video 9 – Viewing, finishing touches, completion of CSS skin
Total Time Length: 78min 44secs
This free video tutorial demonstrates how to install the FCKEditor. This editor can be used to replace the FreeTextBox editor that comes as standard with DotNetNuke.
The FCKEditor is a WYSIWYG text editor that allows you to add text and image content to your modules. The main module that you will use with the FCKEditor is the Text/HTML module.
I personally always replace the FreeTextBox editor with the FCKEditor as I find the FCKEditor to be more stable and reliable than the FreeTextBox editor. - Highly Recommended.
Read More..
This is a continuation of our series on
How to build a DotNetNuke website.
This video tutorial explains the simple steps for removing the default Solpart menu within a container and replacing it with a drop down list.
The main reason we need to remove the Solpart menu is because the Solpart menu is not compatible with a XHTML Transitional Doc Type.
We need to set up DotNetNuke to use a XHTML Doc Type so that we can successfully implement features such as:
- Font-resizing
- Pure CSS layout skins (no tables)
Time Length: 4min 13secs
Download Size: 4.2MB
It’s essential to test your DotNetNuke skin in a variety of configurations to ensure it is error free and compatible with as many browsers as possible.
This tutorial provides some of the key elements and tools that you can use to test your DotNetNuke skins.
Covering:
- Images
- Font Sizes
- Web Developer Tools
- Browser Testing
- Validating Skins
- W3C's Online Tools
- Validating HTML via File Upload
- Validating CSS via File Upload
- Web Developer Tool and Conclusion