Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Rich Text Editor (beta): Skinning the Editor

# Rich Text Editor (beta): Skinning the Editor

Editor skinning is done via CSS. The Editor comes with a default skin, but you can extend or override this as needed.

This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>

## Editor's core CSS file

The editors base class is a starting point for skinning the Editor. Include this file and use the skin file as a reference for your new skin.

/* Set the cusrsor to busy when we are doing something */ .yui-busy { cursor: wait !important; } /* Setup the container with some padding and zoom it for IE's hasLayout */ .yui-toolbar-container .yui-toolbar-subcont { padding: .25em 0; zoom: 1; } /* When collapsed set the toolbars container to display none */ .yui-toolbar-container-collapsed .yui-toolbar-subcont { display: none; } /* Setup the :after so that compliant browsers don't loose the bounding box */ .yui-toolbar-container .yui-toolbar-subcont:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;} /* Drag handle for the toolbar's draggable property */ .yui-toolbar-container span.yui-toolbar-draghandle { cursor: move; border-left: 1px solid #999; border-right: 1px solid #999; overflow: hidden; text-indent: 77777px; width: 2px; height: 20px; display: block; clear: none; float: left; margin: 0 0 0 .2em; } /* If the titlebar is draggable, the set the cursor */ .yui-toolbar-container .yui-toolbar-titlebar.draggable { cursor: move; } /* Set the titlebar to relative so we can position the collapse button */ .yui-toolbar-container .yui-toolbar-titlebar { position: relative; } /* Toolbar's titlebar styles */ .yui-toolbar-container .yui-toolbar-titlebar h2 { font-weight: bold; letter-spacing: 0; border: none; color: #000; margin: 0; padding: .2em; } /* If the toolbar is grouped the draghandle needs to be bigger */ .yui-toolbar-container.yui-toolbar-grouped span.yui-toolbar-draghandle { height: 40px; } /* Float the groups so they position nicely and zoom them for IE */ .yui-toolbar-container .yui-toolbar-group { float: left; zoom: 1; } /* Setup the :after so that compliant browsers don't loose the bounding box */ .yui-toolbar-container .yui-toolbar-group:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;} /* Grouped title styles */ .yui-toolbar-container .yui-toolbar-group h3 { font-size: 75%; padding: 0 0 0 .25em; margin: 0; } /* Style the separators with a left border */ .yui-toolbar-container span.yui-toolbar-separator { width: 2px; height: 18px; margin: .2em 0 .2em .1em; display: block; clear: none; float: left; } /* Set the height of a grouped separator to a little bit bigger */ .yui-toolbar-container.yui-toolbar-grouped span.yui-toolbar-separator { height: 35px; } /* Reset the height of a separator inside of a group */ .yui-toolbar-container.yui-toolbar-grouped .yui-toolbar-group span.yui-toolbar-separator { height: 18px; } /* Kill the default styles of the list */ .yui-toolbar-container ul li { margin: 0; padding: 0; list-style-type: none; } /* Hide the group labels when the .yui-toolbar-nogrouplabels class is applied */ .yui-toolbar-container .yui-toolbar-nogrouplabels h3 { display: none; } /* Setup the default style of a button in the toolbar */ .yui-toolbar-container .yui-push-button, .yui-toolbar-container .yui-color-button, .yui-toolbar-container .yui-menu-button { /*.yui-toolbar-container .yui-button {*/ position: relative; cursor: pointer; } /* setup the default style of the A inside of the toolbar button */ .yui-toolbar-container .yui-button .first-child, .yui-toolbar-container .yui-button .first-child a { height: 100%; width: 100%; overflow: hidden; } /* Setup the disabled state of a button */ .yui-toolbar-container .yui-button-disabled { cursor: default; } /* Disable the icon too */ .yui-toolbar-container .yui-button-disabled .yui-toolbar-icon { opacity: .5; filter: alpha(opacity=50); } /*Disabled Spin button arrows*/ .yui-toolbar-container .yui-button-disabled .up, .yui-toolbar-container .yui-button-disabled .down { opacity: .5; filter: alpha(opacity=50); } /* remove any padding from the A */ .yui-toolbar-container .yui-button a { overflow: hidden; } /* Override the default Button style for select menu*/ .yui-toolbar-container .yui-toolbar-select .first-child a { cursor: pointer; } /* Font Family Menu Style - This styles the menu items and the selected menu item */ .yui-toolbar-fontname-arial { font-family: Arial; } .yui-toolbar-fontname-arial-black { font-family: Arial Black; } .yui-toolbar-fontname-comic-sans-ms { font-family: Comic Sans MS; } .yui-toolbar-fontname-courier-new { font-family: Courier New; } .yui-toolbar-fontname-times-new-roman { font-family: Times New Roman; } .yui-toolbar-fontname-verdana { font-family: Verdana; } .yui-toolbar-fontname-impact { font-family: Impact; } .yui-toolbar-fontname-lucida-console { font-family: Lucida Console; } .yui-toolbar-fontname-tahoma { font-family: Tahoma; } .yui-toolbar-fontname-trebuchet-ms { font-family: Trebuchet MS; } /* Spin Button */ .yui-toolbar-container .yui-toolbar-spinbutton { position: relative; } /* Setup the default style for the A */ .yui-toolbar-container .yui-toolbar-spinbutton .first-child a { z-index: 0; opacity: 1; } /* Setup the position and style for the up and down arrows */ .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.up, .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.down { position: absolute; display: block right: 0; cursor: pointer; z-index: 1; padding: 0; margin: 0; } /* Position all panels/overlays as absolute by default */ .yui-toolbar-container .yui-overlay { position: absolute; } /* Smash the default style for lists */ .yui-toolbar-container .yui-overlay ul li { margin: 0; list-style-type: none; } /* Reset the z-index of the toolbar container so that menu's appear over the iframe in IE and Safari */ .yui-toolbar-container { z-index: 1; } /* The div around the iFrame */ .yui-editor-container .yui-editor-editable-container { position: relative; z-index: 0; } /* The disbled state of the Editor */ .yui-editor-container .yui-editor-masked { background-color: #CCC; } /* Style the eidtable iframe to hide it */ .yui-editor-container iframe { border: 0px; padding: 0; margin: 0; } /* Reset some padding on the editable iframes container */ .yui-editor-container .yui-editor-editable { padding: 0; margin: 0; } /* Style the dom path box at the bottom of the editor */ .yui-editor-container .dompath { font-size: 85%; } /* Header styles for the Property Editor */ .yui-editor-panel .hd { text-align: left; position: relative; } /* Setup some padding around the h3 */ .yui-editor-panel .hd h3 { font-weight: bold; padding: 0.25em 0pt 0.25em 0.25em; margin: 0; } /* set it to relative so we can position the close button - Zoom it for IE */ .yui-editor-panel .bd { width: 100%; zoom: 1; position: relative; } /* Setup some padding for the body container - Zoom it for IE */ .yui-editor-panel .bd div.yui-editor-body-cont { padding: .25em .1em; zoom: 1; } /* Setup the :after so that compliant browsers don't loose the bounding box */ .yui-editor-panel .bd div.yui-editor-body-cont:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;} /* style the footer of the property editor */ .yui-editor-panel .ft { text-align: right; width: 99%; float: left; clear: both; } /* Style the "tip" icon */ .yui-editor-panel .ft span.tip { display: block; position: relative; padding: .5em .5em .5em 23px; text-align:left; zoom: 1; } /* setup some form fields */ .yui-editor-panel label { clear: both; float: left; padding: 0; width: 100%; text-align: left; zoom: 1; } /* This fixes the caret issue in Firefox */ .yui-editor-panel .gecko label { overflow: auto; } /* more form fields */ .yui-editor-panel label strong { float: left; width: 6em; } /* The remove link in the Link Property Editor */ .yui-editor-panel .removeLink { width: 80%; text-align: right; } /* More form styling */ .yui-editor-panel label input { margin-left: .25em; float: left; } /* Image Padding in the Property Editor */ .yui-editor-panel .yui-toolbar-group-padding { } /* Image Border in the Property Editor */ .yui-editor-panel .yui-toolbar-group-border { } /* Image Text Flow in the Property Editor */ .yui-editor-panel .yui-toolbar-group-textflow { } /* Image Height/Width in the Property Editor */ .yui-editor-panel .height-width { float: left; } /* Image Height/Width title */ .yui-editor-panel .height-width h3 { } /* Image Height/Width container */ .yui-editor-panel .height-width span { font-style: italic; display: block; float: left; overflow:auto; } /* Image Height/Width original info container */ .yui-editor-panel .height-width span.info { font-size: 70%; } /* Border Size/Type button widths */ .yui-editor-panel .yui-toolbar-bordersize, .yui-editor-panel .yui-toolbar-bordertype { font-size: 75%; } /* Kill the separators in the Property Editor */ .yui-editor-panel .yui-toolbar-container span.yui-toolbar-separator { border: none; } /* Border Type solid */ .yui-editor-panel .yui-toolbar-bordersize span a span, .yui-editor-panel .yui-toolbar-bordertype span a span { display: block; height: 8px; left: 4px; position: absolute; top: 3px; *top: -5px; width: 24px; } /* Border Type solid */ .yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-solid { border-bottom: 1px solid black; } /* Border Type dotted */ .yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-dotted { border-bottom: 1px dotted black; } /* Border Type dashed */ .yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-dashed { border-bottom: 1px dashed black; } /* Border Size 1 */ .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-1 { border-bottom: 1px solid black; } /* Border Size 2 */ .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-2 { border-bottom: 2px solid black; } /* Border Size 3 */ .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-3 { top: 2px; *top: -5px; border-bottom: 3px solid black; } /* Border Size 4 */ .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-4 { top: 1px; *top: -5px; border-bottom: 4px solid black; } /* Border Size 5 */ .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-5 { top: 1px; *top: -5px; border-bottom: 5px solid black; } /* Border Size menu size */ .yui-toolbar-container .yui-toolbar-bordersize-menu { width: 95px; } /* Border Size menu styles */ .yui-toolbar-bordersize-menu .yuimenuitemlabel, .yui-toolbar-bordertype-menu .yuimenuitemlabel { height: 12px; margin:0px 3px 7px 17px; } /* Border Size menu styles - Checked */ .yui-toolbar-bordersize-menu .yuimenuitemlabel .checkedindicator, .yui-toolbar-bordertype-menu .yuimenuitemlabel .checkedindicator { position: absolute; left: -12px; } /* Border Size 1 - Menu Item */ .yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-1 a { border-bottom: 1px solid black; } /* Border Size 2 - Menu Item */ .yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-2 a { border-bottom: 2px solid black; } /* Border Size 3 - Menu Item */ .yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-3 a { border-bottom: 3px solid black; } /* Border Size 4 - Menu Item */ .yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-4 a { border-bottom: 4px solid black; } /* Border Size 5 - Menu Item */ .yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-5 a { border-bottom: 5px solid black; } /* Border Type Solid - Menu Item */ .yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-solid a { border-bottom: 1px solid black; } /* Border Type Dashed - Menu Item */ .yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-dashed a { border-bottom: 1px dashed black; } /* Border Type Dotted - Menu Item */ .yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-dotted a { border-bottom: 1px dotted black; } /* Hidden Headers for Accessibility */ h2.yui-editor-skipheader, h3.yui-editor-skipheader { height: 0; margin: 0; padding: 0; border: none; width: 0; overflow: hidden; position: absolute; } /* Setup the default look of a color menu and Zoom it for IE */ .yui-toolbar-colors { width: 133px; zoom: 1; display: none; z-index: 100; overflow: hidden; } /* Setup the :after so that compliant browsers don't loose the bounding box */ .yui-toolbar-colors:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;} /* Style all of the A's so the float properly */ .yui-toolbar-colors a { height: 9px; width: 9px; float: left; display: block; overflow: hidden; text-indent: 999px; margin: 0; cursor: pointer; border: 1px solid #F6F7EE; } /* Put a little border around one that is hovered over */ .yui-toolbar-colors a:hover { border: 1px solid black; } /* Smash the inhertited Menu style */ .yui-color-button-menu { overflow: visible; background-color: transparent; } /* This is the preview box at the bottom of the menu - Zoom it for IE */ .yui-toolbar-colors span { position: relative; display: block; padding: 3px; overflow: hidden; float: left; width: 100%; zoom: 1; } /* Setup the :after so that compliant browsers don't loose the bounding box */ .yui-toolbar-colors span:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;} /* This is the box with the color preview in it */ .yui-toolbar-colors span em { height: 35px; width: 30px; float: left; display: block; overflow: hidden; text-indent: 999px; margin: 0.75px; border: 1px solid black; } /* The container for the name and hex code */ .yui-toolbar-colors span strong { font-weight: normal; padding-left: 3px; display: block; font-size: 85%; float: left; width: 65%; }

## Sam's skin CSS file

/* Place the border around the editor */ .yui-skin-sam .yui-editor-container { border: 1px solid #808080; } /* Color the border of the container */ .yui-skin-sam .yui-toolbar-container { zoom: 1; } /* Load the background image on the Toolbars titlebar */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar { background: url(sprite.png) repeat-x 0 -200px; position: relative; } /* Give the titlebar some color and padding */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar h2 { color: #000000; font-weight: bold; margin: 0; padding: 0.3em 1em; font-size: 100%; text-align: left; } /* Give the toolbars groups titles some color and padding */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-group h3 { color: #808080; font-size: 75%; margin: 1em 0 0; padding-bottom: 0; padding-left: 0.25em; text-align: left; } /* Hide all of the sepatators borders */ .yui-toolbar-container span.yui-toolbar-separator { border: none; text-indent: 33px; overflow: hidden; margin: .25em; } /* Background color of the toolbar */ .yui-skin-sam .yui-toolbar-container { background-color: #F2F2F2; } /* Add some padding to the toolbars sub container */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-subcont { padding: 0 1em 0.35em; border-bottom:1px solid #808080; } /* When the collapsed class is added, add a border to the bottom of the titlebar (since the toolbar itself is display none) */ .yui-skin-sam .yui-toolbar-container-collapsed .yui-toolbar-titlebar { border-bottom:1px solid #808080; } /* Remove the shadows from the menus in the toolbar - Menu.css override */ .yui-skin-sam .yui-editor-container .visible .yui-menu-shadow, .yui-skin-sam .yui-editor-panel .visible .yui-menu-shadow { display: none; } /* Remove padding/margin from lists */ .yui-skin-sam .yui-editor-container ul { list-style-type: none; margin: 0; padding: 0; } /* Remove padding/margin from list items */ .yui-skin-sam .yui-editor-container ul li { list-style-type: none; margin: 0; padding: 0; } /* Float the LI's that wrap the buttons */ .yui-skin-sam .yui-toolbar-group ul li { float: left; } /* Set the color and the border of the dompath container at the bottom of the editor */ .yui-skin-sam .yui-editor-container .dompath { background-color: #F2F2F2; border-top:1px solid #808080; color: #999; text-align: left; padding: 0.25em; } /* Set the image for the collapse button on the toolbar */ .yui-skin-sam .yui-toolbar-container .collapse { background: url(sprite.png) no-repeat 0 -400px; } /* Position the image and the container */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar span.collapse { cursor: pointer; position: absolute; top: 4px; right: 2px; display: block; overflow: hidden; height: 15px; width: 15px; text-indent: 9999px; } /* Set the default styles for the buttons */ .yui-skin-sam .yui-toolbar-container .yui-push-button, .yui-skin-sam .yui-toolbar-container .yui-color-button, .yui-skin-sam .yui-toolbar-container .yui-menu-button { background: url(sprite.png) repeat-x 0 0; position: relative; display: block; height: 22px; width: 30px; margin: 0; border-style: solid; border-width: 1px 0; } /* Set the height of the buttons and pad them on the left for the icon */ .yui-skin-sam .yui-toolbar-container .yui-push-button a, .yui-skin-sam .yui-toolbar-container .yui-color-button a, .yui-skin-sam .yui-toolbar-container .yui-menu-button a { padding-left: 35px; height: 20px; text-decoration: none; font-size: 93%; line-height: 2; display: block; color: #000000; overflow: hidden; } .yui-skin-sam .yui-toolbar-container .yui-push-button-disabled a, .yui-skin-sam .yui-toolbar-container .yui-color-button-disabled a, .yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled a { color: #A6A6A6; cursor: default; } /* IE needs a little help positioning the first child */ .yui-skin-sam .yui-toolbar-container .yui-button .first-child { *left: 0px; } /* Font Family Drop Down */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-fontname { width: 135px; } /* Header Drop Down */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-heading { width: 92px; } /* Handle the hover state of the buttons */ .yui-skin-sam .yui-toolbar-container .yui-button-hover { background:url(sprite.png) repeat-x 0 -1300px; border-color: #808080; } /* Handle the selected state of the buttons */ .yui-skin-sam .yui-toolbar-container .yui-button-selected { background: url(sprite.png) repeat-x 0 -1700px; border-color: #808080; } /* When the nogrouplabels class is applied, set the h3's to display none */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels h3 { display: none; } /* When not showing the h3 group labels, add some margin to make up for them*/ .yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels .yui-toolbar-group { margin-top: .75em; } /* Handle the icon placeholder for the buttons This is very important - position of this must be absolute. If it is not positioned absolute, IE will place it over the a in the Toolbar Doing this will cause the editor to loose focus and loose the selection. */ .yui-skin-sam .yui-toolbar-container .yui-button span.yui-toolbar-icon { display: block; position: absolute; top: 2px; height: 18px; width: 18px; overflow: hidden; background: url(editor-sprite.gif) no-repeat 30px 30px; } /* Swap out the image to an active image */ .yui-skin-sam .yui-toolbar-container .yui-button-selected span.yui-toolbar-icon, .yui-skin-sam .yui-toolbar-container .yui-button-hover span.yui-toolbar-icon { background-image: url(editor-sprite-active.gif); } /* Remove the float from menuitems (they are LI's and we float them above)*/ .yui-skin-sam .yui-toolbar-container .visible .yuimenuitem { float: none; } /* Change the defaults to make them look more like the editor */ .yui-skin-sam .yui-toolbar-container .visible .yuimenuitemlabel { cursor: pointer; color: #000; } /* Set the background color of all menu containers */ .yui-skin-sam .yui-toolbar-container .yui-button-menu { background-color: #fff; } /* Set the background of all menu items that are selected */ .yui-skin-sam div.yuimenu li.selected { background-color: #B3D4FF; } /* Set the color of the hrefs in a selected menu item */ .yui-skin-sam div.yuimenu li.selected a.selected { color: #000; } /* Position the icon absolute*/ .yui-skin-sam .yui-toolbar-container .yui-button span.yui-toolbar-icon { position: absolute; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-bold span.yui-toolbar-icon { background-position: 0 0; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-italic span.yui-toolbar-icon { background-position: 0 -36px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-underline span.yui-toolbar-icon { background-position: 0 -72px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-subscript span.yui-toolbar-icon { background-position: 0 -180px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-superscript span.yui-toolbar-icon { background-position: 0 -144px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-forecolor span.yui-toolbar-icon { background-position: 0 -216px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-backcolor span.yui-toolbar-icon { background-position: 0 -288px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyleft span.yui-toolbar-icon { background-position: 0 -324px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifycenter span.yui-toolbar-icon { background-position: 0 -360px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyright span.yui-toolbar-icon { background-position: 0 -396px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyfull span.yui-toolbar-icon { background-position: 0 -432px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-indent span.yui-toolbar-icon { background-position: 0 -720px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-outdent span.yui-toolbar-icon { background-position: 0 -684px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-createlink span.yui-toolbar-icon { background-position: 0 -792px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertimage span.yui-toolbar-icon { background-position: 1px -756px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-left span.yui-toolbar-icon { background-position: 0 -972px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-right span.yui-toolbar-icon { background-position: 0 -936px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-inline span.yui-toolbar-icon { background-position: 0 -900px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-block span.yui-toolbar-icon { background-position: 0 -864px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-bordercolor span.yui-toolbar-icon { background-position: 0 -252px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-removeformat span.yui-toolbar-icon { background-position: 0 -1080px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-hiddenelements span.yui-toolbar-icon { background-position: 0 -1044px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertunorderedlist span.yui-toolbar-icon { background-position: 0 -468px; left: 5px; } /* Setting the background position of the sprite */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertorderedlist span.yui-toolbar-icon { background-position: 0 -504px; left: 5px; } /* Set the width of the spin buttons */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton, .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child { width: 35px; } /* Pad the first child */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child a { padding-left: 2px; text-align: left; } /* Spin Buttons - Remove the icon holder, they don't need it */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton span.yui-toolbar-icon { display: none; } /* Spin Buttons - Prep the arrows */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.up, .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.down { right: 2px; background: url(editor-sprite.gif) no-repeat 0 -1222px; overflow: hidden; height: 6px; width: 7px; min-height: 0; padding: 0; } /* Spin Buttons - The up arrow */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.up { top: 2px; background-position: 0 -1222px; } /* Spin Buttons - The down arrow */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.down { bottom: 2px; background-position: 0 -1187px; } /* Pad and align the Select Menus */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-select .first-child a { padding-left: 5px; text-align: left; } /* Set the icon of the select menu for the drop down arrow */ .yui-skin-sam .yui-toolbar-container .yui-toolbar-select span.yui-toolbar-icon { background: url( editor-sprite.gif ) no-repeat 0 -1144px; overflow: hidden; right: -2px; top: 0px; height: 20px; } /* Fix the color menu background if it's inside a Property Editor */ .yui-skin-sam .yui-editor-panel .yui-color-button-menu .bd { background-color: transparent; border: none; width: 135px; } /* Place a border around the color menu */ .yui-skin-sam .yui-color-button-menu .yui-toolbar-colors { border: 1px solid #808080; } /* Property Editor Panel styles */ .yui-skin-sam .yui-editor-panel { padding: 0; margin: 0; border: none; background-color: transparent; overflow: visible; } /* Margins on the header of the Property Editor */ .yui-skin-sam .yui-editor-panel .hd { margin: 10px 0 0; padding: 0; border: none; } /* Setup the background image on the title bar We are styling the h3 instead if the div so we can make room for the "knob" that floats on the top of the window. */ .yui-skin-sam .yui-editor-panel .hd h3 { color: #000; border: 1px solid #808080; background: url(sprite.png) repeat-x 0 -200px; width: 99%; position: relative; margin: 0; padding: 3px 0 0 0; font-size: 93%; text-indent: 5px; height: 20px; } /* Style the body of the Property Editor */ .yui-skin-sam .yui-editor-panel .bd { background-color: #F2F2F2; border-left: 1px solid #808080; border-right: 1px solid #808080; width: 99%; margin: 0; padding: 0; overflow: visible; } /* Remove the padding/margin on lists in the Property Editor */ .yui-skin-sam .yui-editor-panel ul { list-style-type: none; margin: 0; padding: 0; } /* Remove the padding/margin on list items in the Property Editor */ .yui-skin-sam .yui-editor-panel ul li { margin: 0; padding: 0; } /* IE is havig trouble with our menu sizes here */ .yui-skin-sam .yui-editor-panel .yuimenu { *width: 90px !important; } /* Remove the floats that we applied earlier */ .yui-skin-sam .yui-editor-panel .yuimenu ul li { float: none; } /* Remove the border from the toolbar's container and add some margin to it */ .yui-skin-sam .yui-editor-panel .yui-toolbar-container .yui-toolbar-subcont { padding: 0; border: none; margin-top: 0.35em; } /* Set the width of the bordersize and bordertype menu buttons */ .yui-skin-sam .yui-editor-panel .yui-toolbar-bordersize, .yui-skin-sam .yui-editor-panel .yui-toolbar-bordertype { width: 50px; } /* Form styling */ .yui-skin-sam .yui-editor-panel label { display: block; float: none; padding: 4px 0; margin-bottom: 7px; } /* Form styling */ .yui-skin-sam .yui-editor-panel label strong { font-weight: normal; font-size: 93%; text-align: right; padding-top: 2px; } /* Form styling */ .yui-skin-sam .yui-editor-panel label input { width: 75%; } /* Form styling */ .yui-skin-sam .yui-editor-panel #createlink_target, .yui-skin-sam .yui-editor-panel #insertimage_target { width: auto; margin-right: 5px; } /* Form styling */ .yui-skin-sam .yui-editor-panel .removeLink { width: 98%; } /* Color the input yellow if it has the warning class applied */ .yui-skin-sam .yui-editor-panel label input.warning { background-color: #FFEE69; } /* Style the titles of the toolbar groups */ .yui-skin-sam .yui-editor-panel .yui-toolbar-group h3 { color: #000; float: left; font-weight: normal; font-size: 93%; margin: 5px 0 0 0; padding: 0 3px 0 0; text-align: right; } /* Style the header for the Height and Width boxes */ .yui-skin-sam .yui-editor-panel .height-width h3 { margin: 3px 0 0 10px; } /* Style the height and width container */ .yui-skin-sam .yui-editor-panel .height-width { margin: 3px 0 0 35px; *margin-left: 14px; width: 42%; *width: 44%; } /* Give the border group a width */ .yui-skin-sam .yui-editor-panel .yui-toolbar-group-border { width: 190px; } /* Give the padding group a width */ .yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding { width: 203px; } /* Fix some margins for the H3's */ .yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding h3 { margin-left: 25px; *margin-left: 12px; } /* Image Properties - Text flow container size */ .yui-skin-sam .yui-editor-panel .yui-toolbar-group-textflow { width: 182px; } /* Remove the background image set in Panel.css */ .yui-skin-sam .yui-editor-panel .hd { background: none; } /* Give the footer som color and a border */ .yui-skin-sam .yui-editor-panel .ft { background-color: #F2F2F2; border: 1px solid #808080; border-top: none; padding: 0; margin: 0 0 2px 0; } /* Style the close button in the Property Editor */ .yui-skin-sam .yui-editor-panel .hd span.close { background:url(sprite.png) no-repeat 0 -300px; cursor:pointer; display:block; height:16px; overflow:hidden; position:absolute; right:5px; text-indent:500px; top:2px; width:26px; } /* Style the tip in the footer */ .yui-skin-sam .yui-editor-panel .ft span.tip { background-color: #EDF5FF; border-top: 1px solid #808080; } /* Style the tip in the footer */ .yui-skin-sam .yui-editor-panel .ft span.tip strong { display: block; float: left; margin: 0 2px 8px 0; } /* Setup the icon for a tip */ .yui-skin-sam .yui-editor-panel .ft span.tip span.icon { background: url( editor-sprite.gif ) no-repeat 0 -1260px; display: block; height: 20px; left: 2px; position: absolute; top: 8px; width: 20px; } /* Setup the background image for an info icon */ .yui-skin-sam .yui-editor-panel .ft span.tip span.icon-info { background-position: 2px -1260px; } /* Setup the background image for a warning icon */ .yui-skin-sam .yui-editor-panel .ft span.tip span.icon-warn { background-position: 2px -1296px; } /* Handle the knob that floats on top of the panel */ .yui-skin-sam .yui-editor-panel .hd span.knob { position: absolute; height: 10px; width: 28px; top: -10px; left: 25px; text-indent: 9999px; overflow: hidden; background: url( editor-knob.gif ) no-repeat 0 0; } /* Reset some styles from the editor toolbar, when a toolbar is inside the Property Editor */ .yui-skin-sam .yui-editor-panel .yui-toolbar-container { float: left; width: 100%; background-image: none; border: none; } /* Reset styles for menu buttons inside the Property Editor */ .yui-skin-sam .yui-editor-panel .yui-toolbar-container .bd { background-color: #ffffff; } /* This image is the one used to place the blankimage placeholder into the editor when you click on Insert an Image */ .yui-editor-blankimage { background-image: url( blankimage.png ); }

### Rich Text Editor (beta) Examples:

- Flickr Image Search
- Calendar Plugin
- Icon Insertion
- Plain Text Switcher
- Editor Data Post with Connection Manager
- Skinning the Editor
- Default toolbar config
- Editor inside a Tabview control
- One editor, multiple edit areas

### More Rich Text Editor (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings