DotNetNuke Skinning Tutorial - Neese Darren - E-Book

DotNetNuke Skinning Tutorial E-Book

Neese Darren

0,0
19,16 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

In Detail

DotNetNuke is an open-source web application framework written in VB.NET for the ASP.NET framework. The application's content management system is extensible and customizable through the use of skins and modules, and it can be used to create, deploy, and manage intranet, extranet, and websites.

DotNetNuke has a skinning architecture, which provides a clear separation between design and content, enabling a web designer to develop skins without requiring any specialist knowledge of development in ASP.NET; only knowledge of HTML and an understanding of how to prepare and package the skins themselves are required.

If you want to create great-looking skins for your DotNetNuke websites, this book is for you. If you're new to DotNetNuke skinning, this book is the ideal introduction. It will give you clear, concise and practical guidance to take you from the basics of DotNetNuke skinning right through to developing the skills to make you a DotNetNuke skinner to be reckoned with!

This book gives you step-by-step instructions to the fundamentals of skinning so that you will be in control of the look and feel of your DotNetNuke site, and dreaming of new ideas for creating more interactive user interfaces.

A simple, clear, step-by-tutorial to creating DotNetNuke skins to put you in control of the look and feel of your DotNetNuke website.

Approach

Designed as a tutorial for beginners to DotNetNuke skinning, this book is packed with practical steps for you to try. Written in a clear, easy-to-read style this book will guide you through the most important tasks of working with DotNetNuke skins.

Who this book is for

This book is for web designers or developers who want to customize DNN sites, to bring a specific look and feel to them, and create more attractive user interfaces.

This book is ideal for beginners to DotNetNuke skinning.

You will need to know about the general operation of DotNetNuke and also have some familiarity with creating web pages. Familiarity with CSS and basic ASP.NET would be a bonus.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern

Seitenzahl: 145

Veröffentlichungsjahr: 2008

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

DotNetNuke Skinning Tutorial
Credits
About the Author
About the Reviewers
Preface
What This Book Covers
What You Need for This Book
Who is This Book For
Conventions
Reader Feedback
Customer Support
Downloading the Example Code for the Book
Errata
Questions
1. Overview of DNN Skinning
What is Skinning
What are Skins Made Of
The Default Skins
Where are Skins Located
File Types in Skins
An Overview of the Skinning Process
What You Can Do With Skinning
Summary
2. Creating Your First Skin
Choosing an Editor
Installing Visual Web Developer
Installing the DotNetNuke Starter Kits
Setting Up Your Development Environment
Creating Your First Skin
What Do We Have Here?
Why Parse?
Finishing Touches
Summary
3. Page Layout
Page Design and Layout
How to Position
The Challenge that Lies Ahead
Browser Caching
Moving On with Our Skin
Summary
4. Adding Style
A CSS Refresher
Cascading Rules
Seeing Style in Action
A Portal's CSS in Site Settings
More Style to Cascade
Back to Our Skin
A Spacing Problem
Browser Compatability
Summary
5. Configuring Skin Objects
What are Skin Objects
What is There to Do with Skin Objects
Creating Our XML Skin File
Implementing Style with CssClass
Skin Objects You Don't See Everyday
Adding Pages
The Breadcrumb Skin Object
Skin Objects' Attributes
Summary
6. Configuring the Menu
The New Menu
Initial Menu Configuration
Providers and How They Relate
Basic Menu Attributes
Setting the Style Attributes
The Sub-Menu Items
Root-Level Items
Menu Items Style
Hovering Style
Other Styles
Custom HTML Attributes
Setting Paths in the DNNMenu
Child Image Attributes
Future Changes
Summary
7. Images and Web Design
Choosing a Graphics Editor
Your Choices
Adobe Photoshop
Gimp
Begin with the End in Mind
Doing Homework
Inspiration
Purchasing a Design
Monster Templates
Design Load
Boxed Art
Free Designs
Working with Templates
Design
Colors
Layout
Banner
Background
Bandwidth Considerations
Creating Images
Rounded Corners
Gradient Bars
Shadows and Other Effects
More Photoshop Skills
Putting the Images into Your Skin
Slicing and Dicing
Saving
Inserting the images
Adding the Gradient Bars
Replacing the DNN Default Icons and Graphics
Summary
8. Creating Containers
Creating Our First Container
DNN Tokens for Containers
Adding to the Container
Table Structure
Making Necessary XML Additions
More Menu Options
Container Token Attributes
Implementing More Graphics
Summary
9. Package and Deploy
What is Packaging?
Is Packaging Necessary?
How to Package
How to Deploy
Creating Thumbnails
Handling Bad Installs
Summary
10. Skinning the Control Panel
Your Choice of Control Panels
Control Panel—In Detail
Change the Background Color
Streamline the Control Panel
Lengthen the Module Drop-Downs
Eliminate Common Tasks
Summary
Index

DotNetNuke Skinning Tutorial

Darren Neese

DotNetNuke Skinning Tutorial

Copyright © 2008 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: May 2008

Production Reference: 1140508

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton Birmingham, B27 6PA, UK.

ISBN 978-1-847192-78-3

www.packtpub.com

Cover Image by Vinayak Chittar (<[email protected]>)

Credits

Author

Darren Neese

Reviewers

Cuong Quoc Dang

Jerry Spohn

Senior Acquisition Editor

Douglas Paterson

Development Editor

Ved Prakash Jha

Technical Editor

Mithun Sehgal

Editorial Team Leader

Mithil Kulkarni

Project Manager

Abhijeet Deobhakta

Project Coordinator

Lata Basantani

Indexer

Hemangini Bari

Proofreader

Camille Guy

Production Coordinator

Shantanu Zagade

Cover Work

Shantanu Zagade

About the Author

Darren Neese is a Microsoft specialist who currently works as a senior web developer and project manager. With over ten years of experience in the IT industry, he has worked as a Windows developer, a web developer, a database administrator, a corporate trainer, an academic teacher, as well as being a server and network administrator. He holds several related Microsoft certifications and implements DotNetNuke and other Microsoft-based solutions for clients.

I would like to thank all my friends and family who have been a great source of encouragement. I'd also like to thank Douglas Paterson who gave me lots of advice and direction during the formative stages of this book.

About the Reviewers

Cuong Quoc Dang is the Marketing Creative Director at Engage Software. His responsibilities at Engage include marketing, branding, design, and of course DotNetNuke skinning.

His priority at Engage is to provide not just a high quality DotNetNuke skin, but a full package that includes strict attention to detail in user interface design and user experience. Cuong has worked with web standards for over four years.

As an essential part of the team at Engage, Cuong has been exposed to every part of the very developer-oriented DotNetNuke community. As the lead instructor for the DotNetNuke Skinning training at Engage, Cuong is working to fulfill his mission to open up the DotNetNuke community to not only for developers, but also for designers.

In addition to helping build solid, scalable websites and applications for both Engage Software and its clients, he manages the company’s two public websites, www.engagesoftware.com and www.engagemodules.com. His role also oversees the online marketing and branding initiatives.

Prior to joining Engage, Cuong worked for a logistic company in Vietnam, MinhPhuong Co., Ltd., as an Executive Marketing & Business Development. Cuong earned his Bachelor of Science in Marketing and Management from Maryville University.

Cuong Dang is currently working and living in St. Louis, MO with his wife, Vanda.

Jerry Spohn has been working with computers since the age of 11, at which he first began learning programming on a Commodore VIC 20. Times have changed, and he moved through the interesting world of IBM mainframes into PCs. After taking numerous courses on database design, programming, and object-oriented methodologies, he moved into Visual Basic and other Microsoft languages.

Jerry currently works as a Development Manager for a medium-sized software company in Pennsylvania. He also manages over 25 different websites using DotNetNuke, and is the owner of Spohn Software LLC, which does custom development across the entire Microsoft development toolset.

Preface

DotNetNuke is an open-source web application framework written in VB.NET for the ASP.NET framework. The application's content management system is extensible and customizable through the use of skins and modules, and it can be used to create, deploy, and manage intranet, extranet, and websites.

DotNetNuke has a skinning architecture which provides a clear separation between design and content, enabling a web designer to develop skins without requiring any specialist knowledge of development in ASP.NET—only knowledge of HTML and an understanding of how to prepare and package the skins themselves is required.

If you want to create great looking skins for your DotNetNuke websites, this book is for you. If you're new to DotNetNuke skinning, this book is the ideal introduction. This book will give you clear, concise, and practical guidance to take you from the basics of DotNetNuke skinning right through to developing the skills to make you a DotNetNuke skinner to be reckoned with!

This book gives you step-by-step instructions to the fundamentals of skinning so that you will be in control of the look and feel of your DotNetNuke site, and dreaming of new ideas for creating more interactive user interfaces.

What This Book Covers

Chapter 1 introduces readers to the basics of DNN skinning.

Chapter 2 takes you through setting up the skin development environment and creating your first skin.

Chapter 3 deals with giving the skin we created in Chapter 2 some structure and layout.

Chapter 4 adds style to our skin and provides information on how CSS works and cascades in DotNetNuke.

Chapter 5 explains about the skin objects and how to customize them in the proper way.

Chapter 6 details how to configure the menu in our skin. Readers will understand what attributes can be configured with the menu and its related provider.

Chapter 7 enhances your skin design by preparing and adding images to our skin.

Chapter 8 walks you through the creation of containers.

Chapter 9 shows you how to package and deploy the skins.

Chapter 10 deals with the skinning of a core component of DotNetNuke—the control panel.

What You Need for This Book

The following is what you require to work through this book:

Version 2.0 of the .NET framework installed.A working DNN site with DNN starter kits installedVisual Web Developer and SQL Server installed

Who is This Book For

This book is for web developers who are interested in customizing the look and feel of a DotNetNuke website.

This book is ideal for beginners to DotNetNuke skinning.

You will need to know about the general operation of DotNetNuke, but also have some familiarity with creating web pages. Familiarity with CSS and basic ASP.NET would be a bonus.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

There are three styles for code. Code words in text are shown as follows: "After you add the id and runat attributes, take out the [CONTROLPANEL] text."

A block of code will be set as follows:

<tr> <td align="center" valign="top" id="TopPane" runat="server"></td> </tr>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be made bold:

<tr> <td></td> <td align="center" valign="top" id="TopPane" runat="server"></td> <td></td> </tr>

New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: "Click on Downloads and download the latest version of the starter kit."

Note

Important notes appear in a box like this.

Reader Feedback

Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply drop an email to <[email protected]>, making sure to mention the book title in the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email to <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer Support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the Example Code for the Book

Visit http://www.packtpub.com/files/code/2783_Code.zip to directly download the example code.

The downloadable files contain instructions on how to use them.

Errata

Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to the list of existing errata. The existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Questions

You can contact us at <[email protected]> if you are having a problem with some aspect of the book, and we will do our best to address it.

Chapter 1. Overview of DNN Skinning

If you've developed a website for your employer, a client, or even your friends, you will soon notice how critical the layout, graphics, fonts, and colors are to everyone involved. Your site is quickly sized up by the first impression—'wow' factor—despite what content or functionality is or is not there. Face it, everyone gets awfully skin-deep superficial when it comes to websites. When it comes to DotNetNuke, a skin is the look and feel of your portal. A skin can be the determining factor on whether your DotNetNuke portal is accepted or not.

This chapter is an overview of skinning. We'll start off by describing what skinning is, what skins are made of, and what we have to work with, right after you install DotNetNuke. After reading this chapter, you will know the steps involved in skinning and also what can be done with skinning.

What is Skinning

First of all, a skin is a set of graphics, fonts, colors, and page layout defined all-in-one package to be applied to a DotNetNuke site or even just to a single page. Skinning does not have anything to do with adding content or function to a DotNetNuke site.

Skinning is the act of creating such a package. It involves creating or altering web files that are eventually zipped into a file and uploaded to a DotNetNuke site, which can then be put into action. By the end of this book, you will be well-versed in all the aspects of this rewarding process.

What are Skins Made Of

Skins are made of HTML (hyper-text markup language), CSS (cascading style sheets), skin objects and panes. Notice the following screenshot. It is a look at the typical home page once you log in to the site with the administrative privileges.

The HTML and the CSS in a skin play the same role that they would in any other non-DotNetNuke site. In this default blue skin, there are nested HTML tables structuring the page into interwoven columns and rows. The CSS defines the colors, images, and fonts used.

The skin objects are bits of functionality that almost any site needs. Notice the skin objects from top to bottom:

logomenusearch boxcurrent datebreadcrumb (where it says About, indicating what page you are on and where are you in the menu structure)username linklogin/logout linkcopyright noticeTerms Of Use linkPrivacy Statement linkDotNetNuke copyright

Panes are the sections of a skin which serve as containers for modules you add to a page. There is one module on this particular page, titled Enter Title. It is in a pane appropriately named ContentPane. There are four other panes not being used, as you can see: TopPane, LeftPane, RightPane, and BottomPane.

As we move through the chapters together, we'll become intimately aware about how these components of the skin work together and how to customize them exactly as we want them to appear.

The Default Skins

When you install DotNetNuke, you will essentially be looking at one skin. There may technically be more than one skin, but it's just the same skin in various colors and/or forms.

As a skinner in training, you are attentive to these default skins because they are decent skin examples, and more importantly, a great place to start from to create your next skin. Eventually, you will create your own template or set of files (starting point), but we will spend some time looking at these basic skins and learn from them.

Where are Skins Located

Generally, all skins are located in the following path in your DotNetNuke install: ~\Portals\_default\Skins\. The tilde is commonly used to refer ‘where it is that you installed,' or in this case, the root of your DNN install. If you go there now and look at the DNN-Blue skin, you will see the following in the Windows Explorer:

File Types in Skins

You see these typical file types in any skin:

HTM—This is the one file type that we'll be working with, adding to, and modifying the most. While uploading a skin, this file is parsed to make the ASCX file.ASCX—This is the main skin file that DotNetNuke uses to apply to a site or page. There are exceptions, but this is a file you will not create yourself. DotNetNuke takes your HTM file and parses it into the ASCX. This file is replaced if the HTM file is re-parsed. Unless you know why you're doing it, do not create or modify this file.CSS—Cascading Style Sheet file. Your styles (look and feel for the common web user-interface elements) should be defined here, just like in any web application.XML—This holds all the attribute/value pairs to insert into the asp.net server elements/controls as DotNetNuke parses your HTM file to make the ASCX file.