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.
As mentioned earlier, please see Appendix B for working with files outside of Umbraco and for best practice advice on how to set up your development environment in Visual Studio 2010.
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.
This can have an effect on the TinyMCE Rich Text Editor, specifically when dealing with body background. If you choose to go with a single CSS file for all your styles, you can override individual classes of the TinyMCE editor to avoid having, for example, a black background in the editor frame. You do this by targeting selectors like .mceContentBody and .mceEditorIframe. You can inspect the output HTML of the TinyMCE data type by using FireBug in Mozilla Firefox.
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:
Make sure to exclude the .css extension here because it is automatically created by Umbraco when you save the file.
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.
Use Listings 4-8 and 4-9 when populating your stylesheets.
Runway.css is already installed if you followed the installation steps outlined in Chapter 1. If you did not elect to install Runway and modules, simply create your own stylesheets as needed for your website.
/*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;}
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; }
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:
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.
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.
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.
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.
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.
When working with XSLT files or .NET macros, a developer can leverage the extension method for registering a JavaScript library in the page without cluttering up your code. To do this, use umbraco.library:RegisterJavaScriptFile(‘String key’, ‘String url’), which takes care of outputting the proper HTML syntax for including a JavaScript file in your page.