STYLES AND SCRIPTS

Styles and scripts are what bring a website to life. They are a critical part of today's website architecture and Umbraco has made them a large part of the backoffice UI. Like with all the other coding functionality, both CSS and JavaScript files are edited in a syntax highlighter that also includes row numbers. As a developer, you can maintain and code all of your styles and scripts within the Umbraco UI, but best practice dictates that you work on such assets outside of the web UI to maintain processes such as code versioning and multi-developer environments.

Defining Your Styles

The CMS allows you to expose your styles to the Rich Text Editor data type in order for authors to truly get a WYSIWYG (What You See Is What You Get) environment in which to edit content. Best practice suggests that as a developer, you plan your styles in at least two different physical files—one for the layouts of your site and one that dictates aspects such as paragraph styles, floating images, headings, bulleted lists, and so on. The idea is that applying the “content” styles to the editor data type without the baggage of all the layout styles as well is then possible.

Layout and Organization

Now it's time to create some CSS stylesheets and associated styles. As mentioned earlier you will have a total of two stylesheets for this implementation—one that houses the layout styles (and standard resets), and one that you'll apply to the Rich Text Editor data type:

• runway.css
• rte-content.css

Follow these steps:

1. Navigate to the Settings section of the backoffice.
2. Right-click the Stylesheets node, and select the Create menu item.
3. In the Create dialog that appears, shown in Figure 4-16, name your stylesheet rte-content.

   Make sure to exclude the .css extension here because it is automatically created by Umbraco when you save the file.

4. Click the Create button.

   FIGURE 4-16

   

These steps create a file called rte-content.css in the /css/ directory of your installation (for example, c:/Inetpub/wwwroot/umbusersguide.com/css/rte-content.css), as also indicated in the Path property of the stylesheet, shown in Figure 4-17. This figure also shows the result after you create the initial stylesheet.

FIGURE 4-17

Use Listings 4-8 and 4-9 when populating your stylesheets.

LISTING 4-8: runway.css

/*LAYOUT*/

body{text-align: center; padding: 0px; margin: 0px; background: #F6F7F9;}

#main{margin: auto; margin-top: 20px; text-align: center; width: 870px;}

#top{border-bottom: 1px solid #CED7DE;}

#top ul{list-style: none; padding: 0px 0px 15px 0px; margin: 0px;}
#top ul li{display: inline; margin: 0px; padding: 0xp;}
#top ul li a{padding: 10px;}

#body{margin: auto; padding: 2em 0em 2em 0em;}
#footer{padding-top: 5px; clear: both;}

/* Subpages layout */
#content{text-align: left;}

#subNavigation{width: 20em; float: right;}
#subNavigation ul{list-style: none; border: 1px solid #FFE8CD; background: #FFF9D8;}

/* FONTS standards */
body {font-size: 14px; background:#fff; font-family: “Lucida Grande”, Arial,
 sans-serif;}

h1, h2, h3, h4, h5, h6 {color: #426FC8; font-weight: 500;}
h1 {font-size:60px; line-height: 1; margin-bottom:0.5em; font-weight: bold;
text-align: center; letter-spacing: -1px; width: auto; color: #666;}
h2 {font-size:25px; margin-bottom:0.75em;}

h3 {font-size: 18px;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

p {margin:0 0 1.5em; color: #666; font-size: 16px;}
p img {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}

/* LINKS standards */
a:focus, a:hover {color:#000;}
a {color: #14223E;text-decoration:underline;}
h1 a{color: #666; text-decoration: none;}

/* ELEMENTS standards */
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}

sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre, code {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em “andale mono“, “lucida console“,
monospace;line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;background:#C3D9FF;}
th, td {padding:4px 10px 4px 5px;}
tr.even td {background:#E5ECF9;}
tfoot {font-style:italic;}
caption {background:#eee;}

/* FORM ELEMENTS */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus
{border:1px solid #666;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:300px;height:250px;padding:5px;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

.error ul{margin-bottom: 0; padding-bottom: 0;}

LISTING 4-9: rte-content.css

p {
    font-size: 13px;
    line-height: 18px;
    margin: 10px 0;
}
img {
    background: #dff0f9;
    padding: 8px;

    border: 1px solid #7f7f7f;
    margin: 0 10px 10px 10px;
}
.left {
    float: left;
    margin-left: 0;
}
.right {
    float: right;
    margin-right: 0;
}
ul {
    margin: 15px 25px;
}
ul li {
    background: url(images/ico_arrow_more.gif) no-repeat 0 3px;
    padding-left: 10px;
    margin-bottom: 10px;
}

h2, h3 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 25px;
}

h3 {
    font-size: 13px;
}

<!-- Styles to override TinyMCE defaults -->
.mceItemTable
{
    margin: 10px;
    border-collapse: collapse;
    border: 1px solid #000;
    width: 95%;
}

.mceItemTable td
{
    padding: 5px;
    border: 1px solid #000;
}

.mceItemTable td.heading
{
    background: #ececec;
    color: #333;
    font-weight: 600;
}

Handling Images

A point of contention exists in the community about how to handle images for a website within Umbraco (and in general). Everyone has a twist on the “standards” and for Umbraco there seems to be two main schools of thought. One is to utilize Umbraco's media storage capabilities to maintain any and all website image assets. The argument is that now the images are easily editable by content editors and writers. The other is to create a non-editable folder inside your website root and reference the images from there. Both are valid, but one is preferable. Best practice suggests that you maintain and manage your website assets outside of Umbraco's media library. Here's why:

• Website assets that make up the layout and design of a website should not be editable and easily changed by non-technical users. Even in a template-based system, such assets should be regionalized and strictly controlled so that the integrity and layout of the website is not hampered.
• Although Umbraco 4.5 (and later versions) cache media items, loading media assets by requesting them directly from the CMS for each reload of a given page still causes a performance hit.
• Maintaining the files within the Umbraco media library can be cumbersome and unpredictable because the default storage of such items is in randomly generated folder names. This means that for each file that is saved, you, as a developer, have to go and find the ID of the generated folder and reference the file by something like /media/2345/filename.tif. This is not ideal and can make for messy image references in your stylesheet.
• If you choose to store the files under <install root>/css/images, the paths in your CSS file are also simplified because all you need to do is use the relative path images/*.tif|.gif|.png to reference an asset.

So, it's really a question of what you and your team are used to and how much access you are willing to give to the editors and writers of the content. Use the preceding criteria as a guideline to make your decision.

Styles and the Rich Text Editor

The Rich Text Editor (RTE) data type provides a way to associate CSS classes and other selectors to the content that is entered and rendered by the RTE. This feature is very useful, because if it didn't exist, then users would not be able to get a feel for how the various elements will look after they are rendered as part of the overall template. I guess you could say that without this feature, the result would be WYSIWYDG (What You See Is What You Don't Get).

Fortunately for you as a developer, associating CSS classes to the content editor is made super simple and flexible by the styles backoffice UI, which allows you to hand-pick the selectors you want to expose to the authors of the content. The following exercise walks you through this process step by step.

1. Navigate to SettingsStylesheets.
2. Expand the node and right-click on the rte-content.css file that you created earlier.
3. Click Create as shown in Figure 4-18.

   FIGURE 4-18

   

4. In the Create dialog, name your style, as shown in Figure 4-19.

   FIGURE 4-19

   

5. After creating the style you must assign an Alias to the style that will be used to actually apply the selector in your HTML. As shown in Figure 4-20, set your Alias to the p tag.

   Aliases must be simple class names or full selectors. For example, .headline, h1, h2, hr, td, .text, are all valid class and selector aliases, although this example, div.text, would not be valid. Adding this selector results in the RTE not applying a class to the selected element.

   FIGURE 4-20

   

6. Repeat steps 1–5 for all the styles that you want to expose for the author to use.
7. You must do one more thing before exposing the styles to the end user: Assign the rte-content.css stylesheet as an available stylesheet to the RTE and make sure the Style dropdown is turned on for the data type. You do so by choosing Developer Data Types Rich Text Editor in the backoffice, as shown in Figure 4-21.

   FIGURE 4-21

   

After all the styles have been defined, they will show up in the RTE toolbar within the Styles drop-down menu and be ready for the author to apply to the content. The end result should be similar to what you see in Figure 4-22.

FIGURE 4-22

Using Scripts

You can manage and edit scripts, like JavaScript libraries, via the Umbraco backoffice as well. The functionality of script management is more limited than stylesheets, but you do the coding in the same interface. Being able to make changes quickly to a script file is useful for developers, but like with the stylesheets, making changes to source code in your source controlled environment and deploying script files like you would any other code asset is recommended. Again, please see Appendix B for further instructions on how to set up your external Visual Studio development environment.