Adding Styles in DotNetNuke

From ThemesWiki

DotNetNuke (DNN)

Source Book

ISBN	978-1-847192-78-3
Publisher	Packt Publishing
Author(s)	Darren Neese

1 Adding Style
2 A CSS Refresher
- 2.1 Cascading Rules
3 Seeing Style in Action
4 A Portal's CSS in Site Settings
- 4.1 More Style to Cascade
5 Back to Our Skin
6 A Spacing Problem
7 Browser Compatability
8 Summary
9 Additional References
10 Source

[edit] Adding Style

Our skin desperately needs some style. Style is a grouping of settings that define how something should look. The way we implement style is through cascading style sheets. It could be to make a pane, skin object, or to make a general font of our skin be a certain color, size, have a picture behind it, or have a certain margin. This is what our skin lacks now as a whole.

[edit] A CSS Refresher

There are things you should know about CSS before jumping in and inserting style into your skin. We should touch on some of these CSS basics before we jump in too fast.

Cascading style sheets is a technology to supplement HTML to define how the content in HTML should look. It does not replace HTML. CSS needs a way to hook into your content and it needs the HTML tags to do this. And HTML is just plain, limited as to what it can define for looks and positioning.

There are three locations where you can store the style:

Inline, which is inside an attribute called style within an HTML tag. Example:
```
  <td style="color:red;">here is some red text</td>
```
You can add the style attribute to virtually any HTML tag and define style. In this example, the text inside this table cell would be red in color.
In style tags, which have the scope of the whole HTML document. Example:
```
  <style>
  td {color:red;}
  </style>
```
Although the style tags are typically in the head section of the HTML, you could in fact put them anywhere in the HTML document. This is important in our case when DotNetNuke has already created the head section of the HTML stream to be sent to the browser. By the time our skin gets injected into the DNN page, we are well inside the body section of the HTML document. In this last example, the default font color for the table details of this skin will be red.
A separate CSS file, which typically affects the whole site, or in this case our skin. For example, in an HTML document, you would place something like the following:
```
  <link rel="stylesheet" type="text/css" href="something.css">
```
It then links to the style in a separate CSS file:
```
  <style>
  td {color:red;}
  </style>
```

[edit] Cascading Rules

The style-defined in style tags will override the style defined in a separate file. And the style-defined inline will override or cascade those in style tags and those in a separate CSS file. You don't have to wonder where the name cascade comes from in cascading style sheets!

If certain styles only apply to a particular HTML element, then you would use inline style. If style applies to more than one element or you want to be prepared for using that style for another element on a particular page, you would use the style tags. If used site-wide, or in our case, skin-wide (as skins are applied typically to a whole DNN site), you should use the CSS files.

[edit] Seeing Style in Action

For those of you who haven't worked much with CSS, it may help to see the real world examples of how all this works. If you have, you may still want to see a good example of how it all fits into DotNetNuke. Let's take a look:

Go to the Admin menu and then go to Skins.
Change the skin to DNN-Blue.
Click Apply on the first of the four skins displayed.
Click on Home.
You should see the familiar DotNetNuke skin in action here. Right-click on a blank spot on the page. This should bring up a shortcut menu. Select View Source. (see the following screenshot)

You should now be looking at a fairly large HTML document inside Notepad or some other text editor. This is what was sent to and rendered in the browser. Find some of the style definitions in the head section of the document. You may need to use your horizontal scrollbar or turn wordwrap on. Feel free to add carriage returns in this document. It will not affect your skin or DotNetNuke. You should see something like this amidst the HTML document:

  <style id="StylePlaceholder" type="text/css"></style>
 
  <link id="_DotNetNukeSkinning_Portals__default_" rel="stylesheet" type="text/css" href="/DotNetNukeSkinning
 /Portals/_default/ default.css" />
 
  <link id="_DotNetNukeSkinning_Portals__default_Skins_dnn_blue_" rel="stylesheet" type="text/css" 
 href="/DotNetNukeSkinning/ Portals/_default/Skins/dnn-blue/skin.css" />
 
  <link id="_DotNetNukeSkinning_Portals__default_Containers_DNN_ Blue_" rel="stylesheet" type="text/css"
  href="/DotNetNukeSkinning/ Portals/_default/Containers/DNN-Blue/container.css" />
 
  <link id="_DotNetNukeSkinning_Portals_0_" rel="stylesheet" type="text/css" href="/DotNetNukeSkinning/Portals 
 /0/portal.css" />

By looking at the href attributes in the preceding code, you can find the CSS files in our DNN project in Visual Web Developer. Open one or two of them up and look at the defined style.

You can see that DotNetNuke relies heavily on CSS files to make up its design. Look up in the code we got by going to View Source and you will find some inline style defined. So, perform a search by pressing Ctrl plus F for the text style=. Also notice the attributes called class sprinkled throughout the document. These class names will reference the style defined in the linked CSS files.

[edit] A Portal's CSS in Site Settings

For someone who is running a DotNetNuke site, you can always go into and override what the programmer or skinner defined in these CSS files. For each DotNetNuke portal, you may have noticed that in the Site Settings item on the Admin menu, at the bottom there is a place to define style. See the following figure:

If you look in the ~\Portals\_default directory, you will find two CSS files. The file portal.css is used as a CSS template to populate this textbox. It gives the blank defined CSS classes for you to modify. If you click on the Restore Default Style Sheet link, it will read in this CSS file again and use its contents to reset this. If you were to make changes, it saves the contents to a file called portal.css into the root of your portal. This is one of the CSS files we saw referenced when we opened View Source.

[edit] More Style to Cascade

DotNetNuke helps you define style at different levels. To accomplish this, it will inject declarations for more CSS files in this order as you saw in the View Source document:

~/Portals/_default/default.css This file contains some default styles for the control panel, skin objects, and other items. When no style is defined anywhere else, this file provides a base style definition.
Your skin.css file If you have a CSS file in your skin directory called skin.css, it will be used. This is where the most, if not all, of the style for your skin will be defined.
The default container.css file This is where the style for the containers is.
A portal.css file that is in the root of your portal directory mentioned above.

Keep in mind that even if the style is defined at one level, it can and is being overridden by another CSS file lower on the list (in the order above). For example, the person who installed DotNetNuke (a host-level or a super user) could go in and change the default.css file which would affect all the portals under that DNN install. Then we (as skinners) could create a skin and container, which would be the skin.css and container.css. These styles would override the default styles the host puts in. If the admin of a DotNetNuke site were to go into the site settings and insert some more styles, then our skin's style is overridden.

[edit] Back to Our Skin

Now, we will create our CSS file, then we'll define our style there and link it in our HTM file with the class attributes.

In the Solution Explorer window within VWD, right-click on FirstSkin and select Add' New' Item .
You'll be provided with a list of file types to choose from. Select the Style' Sheet' item and name the file as Skin.
Keep both the HTM and the CSS file open in VWD, but go to the HTM file.
Now that our CSS file is created, let's start setting up our classes in the HTM and CSS files.
The first line of HTML code defines a table which serves as a container for everything else in the skin. We'll refer to this as PageContainer. Add the class attribute and set its value to PageContainer. (see the following screenshot)
Now, as we know, the designer help us and insert some style for us, style="width: 100%; height: 100%". This is there to make sure that this table takes up all the available space as an all-encompassing container, which is what we want. However, it would be best to move this style over to our CSS file we just created. We just added the class attribute in the HTM file, now let's create it over in our CSS file.
While we're here, let's add a background color to this style so that the sides become a darker color than that of the main content in the center. This is done in web design to focus the web visitor's attention on the content. Add the following after the height: Background-color: #888888;
Now go back to the HTM document and take out the whole style attribute.
If we were to parse this skin right now, virtually all of our skin would have this dark color as a background, which is not what we want. We just want it on the sides. It's time to give our five-row content table in the middle a background of white. Go to your HTM file and find the table element that has a style attribute which sets the width to 800px. Let's give it a class name of ContentContainer.
Now take out the whole style attribute there.
Create the class in the CSS file and add the values that were set in the style attribute we just removed and add in a background color of white (you can either spell out white or use its hexadecimal value of #ffffff):
```
  ContentContainer
  {
  width: 800px;
  height: 100%;
  background-color: #ffffff;
  }
```
Parse and view the changes in your skin to see the result.
As you can see, it does look better but it has far too much white in the middle and all the skin objects just seem to float in the random locations. If we add in a little contrast, it will help this significantly. Find the table that contains the menu, the search, and the language skin objects. Create a class attribute and call it MenuContainer.
Create a style definition in the CSS file and set the background color: </pre> MenuContainer { background-color: #dddddd; } </pre>
Notice that the table in the HTM file has a style attribute that sets the width. Let's take this out and move it to the CSS file.
```
  MenuContainer
  {
  background-color: #dddddd;
  width: 100%;
  }
```
Let's now do the same thing we've done for the menu table to the table which contains the Copyright, Terms, and Privacy links. We'll call its class as FooterContainer.
```
  FooterContainer
  {
  background-color: #dddddd;
  width: 100%;
  }
```
Go to the Skin Administrative page, then parse and apply our skin. Go back Home to take a look at what we have got so far.

[edit] A Spacing Problem

Using Microsoft's Internet Explorer, you may have noticed that some of our HTML table cells are taking up more space than what we'd like. For example, if you log out and have very little content in the content panes, as we do now, you'll notice that the banner floats around a bit. See the following figure:

An HTML table will automatically change the width and height of its cells depending on what content they hold in relation to the other cells. In this case, there isn't much taking up space in the content panes, leaving more for the cell that holds the banner. However, the space here is not wanted. We can fix this by setting the cell's height to a small value. But which cell do we modify? All these nested tables can make it hard to find where the extra padding is coming from. A trick you can use is adding an attribute to some of the tables border="1" (but be sure to change it back shortly after). This will allow us to see the boundaries of the tables and the cells. If you do a bit of investigation, you may have zeroed in on the following <td> that's highlighted:

We can either guess the exact height this cell should be based on the size of the banner (which can change based on what banner is used in the skin) and everything else, or we can set the height to the smallest value and let the browser enlarge it based on what's inside. Another decision to be made is to put the CSS style inline or in our CSS file. In this case as we won't be defining much other style for it or other cells like it, so let's just put it inline like this on that first <td> tag:

<td style="height:1px;">

We'll also need to apply this positioning to some of the other table cells? If you play around with sizing your browser you'll notice that the footer cells need it as well.

 <tr>

<td style="height:1px;">
  <table class="FooterContainer">
  <tr>
  <td align="center">
  [COPYRIGHT] [TERMS] [PRIVACY]</td>
  </tr>
  </table>
  </td>
 </tr>
 <tr>

<td align="center" style="height:1px;">
  [DOTNETNUKE]</td>
 </tr>

Now, set the control panel's <code><td></code> to the same:
 <td id="ControlPanel" runat="server" style="height:1px;"></td>

All these vertical gaps should be closed up now. Re-parse your skin to verify.

[edit] Browser Compatability

Once things start to shape up visually in your default browser, you should really fire up one or two other popular browsers to make sure things look consistent. Up to this point,we've been using the Internet Explorer.

If you haven't already done so, download Firefox by navigating to http://www.mozilla.com/en-US/firefox/. Save the file and run the installation to install it.

Let's view our skin in Firefox. You can simply go to your DNN site in the Internet Explorer and copy the web address, then paste it in Firefox, and then hit your enter key.

There are two things that come to light immediately:

Our main content table is not centered. It is justified to the left side of the screen.
The same content table is not stretching the whole height of the browser like the PageContainer is.

To tackle these two problems, let's go back to our HTM file and take a look at our first table's code:

 <table class="PageContainer">
  <tr>

<td align="center">

<div style="text-align: center">
  <table class="ContentContainer" border="0">

There are two things we need to change to fix this. The first involves adding an align attribute with the value of center. Notice that the preceding code already has this in it. The next thing to do is to remove the <div> tag. Make sure you get the matching closing tag near the bottom of your HTM file. If you don't see the <div> tags, then don't worry about it. Save and re-parse. This takes care of the rendering problems inside Firefox.

[edit] Summary

Here, we added a CSS file and added some style our skin needed. We also went over some vital information in understanding how CSS works and cascades in DotNetNuke.

[edit] Additional References

For instructions on installing DotNetNuke, click here
For instructions on creating skin in DotNetNuke, click here

[edit] Source

The source of this content is Chapter 4: Adding Style of DotNetNuke Skinning Tutorial by Darren Neese (Packt Publishing, 2008).logo design by Kevin Josh 2010

Executive Editor Sean Lopez own : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes and criar sites

Retrieved from "http://www.themeswiki.com/Adding_Styles_in_DotNetNuke"

Categories: Open Source | Content Management | Microsoft and .NET