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 text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Control + Shift + T to place focus on the toolbar and navigate between option heading names.

Common formatting keyboard shortcuts:

  • Control Shift B sets text to bold
  • Control Shift I sets text to italic
  • Control Shift U underlines text
  • Control Shift [ aligns text left
  • Control Shift | centers text
  • Control Shift ] aligns text right
  • Control Shift L adds an HTML link
  • To exit this text editor use the keyboard shortcut Control + Shift + ESC.
body

You have left the Rich Text Editor.

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 (you can view the full contents of the base class here).

Sam's skin CSS file

Once you have the base class in place, you can proceed to customize the look and feel of your Editor by working with the skinnning file. Starting with the Sam Skin version below is generally the fastest approach, allowing you to customize just those parts of the skin that will make your implementation resonate with the overall design of your application.

1/* Place the border around the editor */ 
2.yui-skin-sam .yui-editor-container { 
3    border: 1px solid #808080; 
4} 
5/* Color the border of the container */ 
6.yui-skin-sam .yui-toolbar-container { 
7    zoom: 1; 
8} 
9/* Load the background image on the Toolbars titlebar */ 
10.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar { 
11    background: url(sprite.png) repeat-x 0 -200px; 
12    position: relative; 
13} 
14 
15/* Give the titlebar some color and padding */ 
16.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar h2 { 
17    color: #000000; 
18    font-weight: bold; 
19    margin: 0; 
20    padding: 0.3em 1em; 
21    font-size: 100%; 
22    text-align: left; 
23} 
24 
25/* Give the toolbars groups titles some color and padding */ 
26.yui-skin-sam .yui-toolbar-container .yui-toolbar-group h3 { 
27    color: #808080; 
28    font-size: 75%; 
29    margin: 1em 0 0; 
30    padding-bottom: 0; 
31    padding-left: 0.25em; 
32    text-align: left; 
33} 
34 
35/* Hide all of the sepatators borders */ 
36.yui-toolbar-container span.yui-toolbar-separator { 
37    border: none; 
38    text-indent: 33px; 
39    overflow: hidden; 
40    margin: .25em; 
41} 
42 
43/* Background color of the toolbar */ 
44.yui-skin-sam .yui-toolbar-container { 
45    background-color: #F2F2F2; 
46} 
47 
48/* Add some padding to the toolbars sub container */ 
49.yui-skin-sam .yui-toolbar-container .yui-toolbar-subcont { 
50    padding: 0 1em 0.35em; 
51    border-bottom:1px solid #808080; 
52} 
53/* When the collapsed class is added, add a border to the bottom of the titlebar (since the toolbar itself is display none) */ 
54.yui-skin-sam .yui-toolbar-container-collapsed .yui-toolbar-titlebar { 
55    border-bottom:1px solid #808080; 
56} 
57 
58/* Remove the shadows from the menus in the toolbar - Menu.css override */ 
59.yui-skin-sam .yui-editor-container .visible .yui-menu-shadow, .yui-skin-sam .yui-editor-panel .visible .yui-menu-shadow { 
60    display: none; 
61} 
62 
63/* Remove padding/margin from lists */ 
64.yui-skin-sam .yui-editor-container ul { 
65    list-style-type: none; 
66    margin: 0; 
67    padding: 0; 
68} 
69/* Remove padding/margin from list items */ 
70.yui-skin-sam .yui-editor-container ul li { 
71    list-style-type: none; 
72    margin: 0; 
73    padding: 0; 
74} 
75/* Float the LI's that wrap the buttons */ 
76.yui-skin-sam .yui-toolbar-group ul li.yui-toolbar-groupitem { 
77    float: left; 
78} 
79 
80/* Set the color and the border of the dompath container at the bottom of the editor */ 
81.yui-skin-sam .yui-editor-container .dompath { 
82    background-color: #F2F2F2; 
83    border-top:1px solid #808080; 
84    color: #999; 
85    text-align: left; 
86    padding: 0.25em; 
87} 
88 
89/* Set the image for the collapse button on the toolbar */ 
90.yui-skin-sam .yui-toolbar-container .collapse { 
91    background: url(sprite.png) no-repeat 0 -400px; 
92} 
93/* Position the image and the container */ 
94.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar span.collapse { 
95    cursor: pointer; 
96    position: absolute; 
97    top: 4px; 
98    right: 2px; 
99    display: block; 
100    overflow: hidden; 
101    height: 15px; 
102    width: 15px; 
103    text-indent: 9999px; 
104} 
105 
106/* Set the default styles for the buttons */ 
107.yui-skin-sam .yui-toolbar-container .yui-push-button, 
108.yui-skin-sam .yui-toolbar-container .yui-color-button, 
109.yui-skin-sam .yui-toolbar-container .yui-menu-button { 
110    background: url(sprite.png) repeat-x 0 0; 
111    position: relative; 
112    display: block; 
113    height: 22px; 
114    width: 30px; 
115    margin: 0; 
116    border-color: #808080; 
117    border-style: solid; 
118    border-width: 1px 0; 
119} 
120/* Set the height of the buttons and pad them on the left for the icon */ 
121.yui-skin-sam .yui-toolbar-container .yui-push-button a, 
122.yui-skin-sam .yui-toolbar-container .yui-color-button a, 
123.yui-skin-sam .yui-toolbar-container .yui-menu-button a { 
124    padding-left: 35px; 
125    height: 20px; 
126    text-decoration: none; 
127    font-size: 93%; 
128    line-height: 2; 
129    display: block; 
130    color: #000000; 
131    overflow: hidden; 
132} 
133/* Set the height of the buttons and pad them on the left for the icon */ 
134.yui-skin-sam .yui-toolbar-container .yui-push-button .first-child, 
135.yui-skin-sam .yui-toolbar-container .yui-color-button .first-child, 
136.yui-skin-sam .yui-toolbar-container .yui-menu-button .first-child { 
137    border-color: #808080; 
138    border-style: solid; 
139    border-width: 0 1px; 
140    margin: 0 -1px; 
141    display: block; 
142} 
143.yui-skin-sam .yui-toolbar-container .yui-push-button-disabled .first-child, 
144.yui-skin-sam .yui-toolbar-container .yui-color-button-disabled .first-child, 
145.yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled .first-child { 
146    border-color: #ccc; 
147} 
148.yui-skin-sam .yui-toolbar-container .yui-push-button-disabled a, 
149.yui-skin-sam .yui-toolbar-container .yui-color-button-disabled a, 
150.yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled a { 
151    color: #A6A6A6; 
152    cursor: default; 
153} 
154.yui-skin-sam .yui-toolbar-container .yui-push-button-disabled, 
155.yui-skin-sam .yui-toolbar-container .yui-color-button-disabled, 
156.yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled { 
157    border-color: #ccc; 
158} 
159/* IE needs a little help positioning the first child */ 
160.yui-skin-sam .yui-toolbar-container .yui-button .first-child { 
161    *left: 0px; 
162} 
163 
164/* Font Family Drop Down */ 
165.yui-skin-sam .yui-toolbar-container .yui-toolbar-fontname { 
166    width: 135px; 
167} 
168 
169/* Header Drop Down */ 
170.yui-skin-sam .yui-toolbar-container .yui-toolbar-heading { 
171    width: 92px; 
172} 
173 
174/* Handle the hover state of the buttons */ 
175.yui-skin-sam .yui-toolbar-container .yui-button-hover { 
176    background:url(sprite.png) repeat-x 0 -1300px; 
177    border-color: #808080; 
178} 
179 
180/* Handle the selected state of the buttons */ 
181.yui-skin-sam .yui-toolbar-container .yui-button-selected { 
182    background: url(sprite.png) repeat-x 0 -1700px; 
183    border-color: #808080; 
184} 
185/* When the nogrouplabels class is applied, set the h3's to display none */ 
186.yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels h3 { 
187    display: none; 
188} 
189/* When not showing the h3 group labels, add some margin to make up for them*/ 
190.yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels .yui-toolbar-group { 
191    margin-top: .75em; 
192} 
193 
194 
195/* Handle the icon placeholder for the buttons
196    This is very important - position of this must be absolute.
197    If it is not positioned absolute, IE will place it over the a in the Toolbar
198    Doing this will cause the editor to loose focus and loose the selection.
199*/ 
200.yui-skin-sam .yui-toolbar-container .yui-push-button span.yui-toolbar-icon, 
201.yui-skin-sam .yui-toolbar-container .yui-color-button span.yui-toolbar-icon, 
202.yui-skin-sam .yui-toolbar-container .yui-menu-button span.yui-toolbar-icon { 
203    display: block; 
204    position: absolute; 
205    top: 2px; 
206    height: 18px; 
207    width: 18px; 
208    overflow: hidden; 
209    background: url(editor-sprite.gif) no-repeat 30px 30px; 
210} 
211 
212/* Swap out the image to an active image */ 
213.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 { 
214    background-image: url(editor-sprite-active.gif); 
215} 
216/* Change the defaults to make them look more like the editor */ 
217.yui-skin-sam .yui-toolbar-container .visible .yuimenuitemlabel { 
218    cursor: pointer; 
219    color: #000; 
220    *position: relative; 
221} 
222 
223/* Set the background color of all menu containers */ 
224.yui-skin-sam .yui-toolbar-container .yui-button-menu { 
225    background-color: #fff; 
226} 
227/* Set the background of all menu items that are selected */ 
228.yui-skin-sam div.yuimenu li.selected { 
229    background-color: #B3D4FF; 
230} 
231/* Set the color of the hrefs in a selected menu item */ 
232.yui-skin-sam div.yuimenu li.selected a.selected { 
233    color: #000; 
234} 
235/* Setting the background position of the sprite */ 
236.yui-skin-sam .yui-toolbar-container .yui-toolbar-bold span.yui-toolbar-icon { 
237    background-position: 0 0; 
238    left: 5px; 
239} 
240/* Setting the background position of the sprite */ 
241.yui-skin-sam .yui-toolbar-container .yui-toolbar-italic span.yui-toolbar-icon { 
242    background-position: 0 -36px; 
243    left: 5px; 
244} 
245/* Setting the background position of the sprite */ 
246.yui-skin-sam .yui-toolbar-container .yui-toolbar-underline span.yui-toolbar-icon { 
247    background-position: 0 -72px; 
248    left: 5px; 
249} 
250/* Setting the background position of the sprite */ 
251.yui-skin-sam .yui-toolbar-container .yui-toolbar-subscript span.yui-toolbar-icon { 
252    background-position: 0 -180px; 
253    left: 5px; 
254} 
255/* Setting the background position of the sprite */ 
256.yui-skin-sam .yui-toolbar-container .yui-toolbar-superscript span.yui-toolbar-icon { 
257    background-position: 0 -144px; 
258    left: 5px; 
259} 
260/* Setting the background position of the sprite */ 
261.yui-skin-sam .yui-toolbar-container .yui-toolbar-forecolor span.yui-toolbar-icon { 
262    background-position: 0 -216px; 
263    left: 5px; 
264} 
265/* Setting the background position of the sprite */ 
266.yui-skin-sam .yui-toolbar-container .yui-toolbar-backcolor span.yui-toolbar-icon { 
267    background-position: 0 -288px; 
268    left: 5px; 
269} 
270/* Setting the background position of the sprite */ 
271.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyleft span.yui-toolbar-icon { 
272    background-position: 0 -324px; 
273    left: 5px; 
274} 
275/* Setting the background position of the sprite */ 
276.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifycenter span.yui-toolbar-icon { 
277    background-position: 0 -360px; 
278    left: 5px; 
279} 
280/* Setting the background position of the sprite */ 
281.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyright span.yui-toolbar-icon { 
282    background-position: 0 -396px; 
283    left: 5px; 
284} 
285/* Setting the background position of the sprite */ 
286.yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyfull span.yui-toolbar-icon { 
287    background-position: 0 -432px; 
288    left: 5px; 
289} 
290/* Setting the background position of the sprite */ 
291.yui-skin-sam .yui-toolbar-container .yui-toolbar-indent span.yui-toolbar-icon { 
292    background-position: 0 -720px; 
293    left: 5px; 
294} 
295/* Setting the background position of the sprite */ 
296.yui-skin-sam .yui-toolbar-container .yui-toolbar-outdent span.yui-toolbar-icon { 
297    background-position: 0 -684px; 
298    left: 5px; 
299} 
300/* Setting the background position of the sprite */ 
301.yui-skin-sam .yui-toolbar-container .yui-toolbar-createlink span.yui-toolbar-icon { 
302    background-position: 0 -792px; 
303    left: 5px; 
304} 
305/* Setting the background position of the sprite */ 
306.yui-skin-sam .yui-toolbar-container .yui-toolbar-insertimage span.yui-toolbar-icon { 
307    background-position: 1px -756px; 
308    left: 5px; 
309} 
310/* Setting the background position of the sprite */ 
311.yui-skin-sam .yui-toolbar-container .yui-toolbar-left span.yui-toolbar-icon { 
312    background-position: 0 -972px; 
313    left: 5px; 
314} 
315/* Setting the background position of the sprite */ 
316.yui-skin-sam .yui-toolbar-container .yui-toolbar-right span.yui-toolbar-icon { 
317    background-position: 0 -936px; 
318    left: 5px; 
319} 
320/* Setting the background position of the sprite */ 
321.yui-skin-sam .yui-toolbar-container .yui-toolbar-inline span.yui-toolbar-icon { 
322    background-position: 0 -900px; 
323    left: 5px; 
324} 
325/* Setting the background position of the sprite */ 
326.yui-skin-sam .yui-toolbar-container .yui-toolbar-block span.yui-toolbar-icon { 
327    background-position: 0 -864px; 
328    left: 5px; 
329} 
330/* Setting the background position of the sprite */ 
331.yui-skin-sam .yui-toolbar-container .yui-toolbar-bordercolor span.yui-toolbar-icon { 
332    background-position: 0 -252px; 
333    left: 5px; 
334} 
335/* Setting the background position of the sprite */ 
336.yui-skin-sam .yui-toolbar-container .yui-toolbar-removeformat span.yui-toolbar-icon { 
337    background-position: 0 -1080px; 
338    left: 5px; 
339} 
340/* Setting the background position of the sprite */ 
341.yui-skin-sam .yui-toolbar-container .yui-toolbar-hiddenelements span.yui-toolbar-icon { 
342    background-position: 0 -1044px; 
343    left: 5px; 
344} 
345/* Setting the background position of the sprite */ 
346.yui-skin-sam .yui-toolbar-container .yui-toolbar-insertunorderedlist span.yui-toolbar-icon { 
347    background-position: 0 -468px; 
348    left: 5px; 
349} 
350/* Setting the background position of the sprite */ 
351.yui-skin-sam .yui-toolbar-container .yui-toolbar-insertorderedlist span.yui-toolbar-icon { 
352    background-position: 0 -504px; 
353    left: 5px; 
354} 
355/* Set the width of the spin buttons */ 
356.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton, 
357.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child { 
358    width: 35px; 
359} 
360/* Pad the first child */ 
361.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child a { 
362    padding-left: 2px; 
363    text-align: left;     
364} 
365 
366/* Spin Buttons - Remove the icon holder, they don't need it */ 
367.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton span.yui-toolbar-icon { 
368    display: none; 
369} 
370 
371/* Spin Buttons - Prep the arrows */ 
372.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.up, 
373.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.down { 
374    right: 2px; 
375    background: url(editor-sprite.gif) no-repeat 0 -1222px; 
376    overflow: hidden; 
377    height: 6px; 
378    width: 7px; 
379    min-height: 0; 
380    padding: 0; 
381} 
382/* Spin Buttons - The up arrow */ 
383.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.up { 
384    top: 2px; 
385    background-position: 0 -1222px; 
386} 
387/* Spin Buttons - The down arrow */ 
388.yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.down { 
389    bottom: 2px; 
390    background-position: 0 -1187px; 
391} 
392/* Handle plain Select Elements */ 
393.yui-skin-sam .yui-toolbar-container select { 
394    height: 22px; 
395    border: 1px solid #808080; 
396} 
397/* Pad and align the Select Menus */ 
398.yui-skin-sam .yui-toolbar-container .yui-toolbar-select .first-child a { 
399    padding-left: 5px; 
400    text-align: left;     
401} 
402/* Set the icon of the select menu for the drop down arrow */ 
403.yui-skin-sam .yui-toolbar-container .yui-toolbar-select span.yui-toolbar-icon { 
404    background: url( editor-sprite.gif ) no-repeat 0 -1144px; 
405    overflow: hidden; 
406    right: -2px; 
407    top: 0px; 
408    height: 20px; 
409} 
410/* Fix the color menu background if it's inside a Property Editor */ 
411.yui-skin-sam .yui-editor-panel .yui-color-button-menu .bd { 
412    background-color: transparent; 
413    border: none; 
414    width: 135px; 
415} 
416 
417/* Place a border around the color menu */ 
418.yui-skin-sam .yui-color-button-menu .yui-toolbar-colors { 
419    border: 1px solid #808080; 
420} 
421 
422 
423/* Property Editor Panel styles */ 
424.yui-skin-sam .yui-editor-panel { 
425    padding: 0; 
426    margin: 0; 
427    border: none; 
428    background-color: transparent; 
429    overflow: visible; 
430} 
431 
432/* Margins on the header of the Property Editor */ 
433.yui-skin-sam .yui-editor-panel .hd { 
434    margin: 10px 0 0; 
435    padding: 0; 
436    border: none; 
437} 
438/* Setup the background image on the title bar
439    We are styling the h3 instead if the div so we can make room
440    for the "knob" that floats on the top of the window.
441*/ 
442.yui-skin-sam .yui-editor-panel .hd h3 { 
443    color: #000; 
444    border: 1px solid #808080; 
445    background: url(sprite.png) repeat-x 0 -200px; 
446    width: 99%; 
447    position: relative; 
448    margin: 0; 
449    padding: 3px 0 0 0; 
450    font-size: 93%; 
451    text-indent: 5px; 
452    height: 20px; 
453} 
454/* Style the body of the Property Editor */ 
455.yui-skin-sam .yui-editor-panel .bd { 
456    background-color: #F2F2F2; 
457    border-left: 1px solid #808080; 
458    border-right: 1px solid #808080; 
459    width: 99%; 
460    margin: 0; 
461    padding: 0; 
462    overflow: visible; 
463} 
464/* Remove the padding/margin on lists in the Property Editor */ 
465.yui-skin-sam .yui-editor-panel ul { 
466    list-style-type: none; 
467    margin: 0; 
468    padding: 0; 
469} 
470 
471/* Remove the padding/margin on list items in the Property Editor */ 
472.yui-skin-sam .yui-editor-panel ul li { 
473    margin: 0; 
474    padding: 0; 
475} 
476/* IE is havig trouble with our menu sizes here */ 
477.yui-skin-sam .yui-editor-panel .yuimenu { 
478    /**width: 90px !important;*/ 
479} 
480/* Remove the border from the toolbar's container and add some margin to it */ 
481.yui-skin-sam .yui-editor-panel .yui-toolbar-container .yui-toolbar-subcont { 
482    padding: 0; 
483    border: none; 
484    margin-top: 0.35em; 
485} 
486/* Set the width of the bordersize and bordertype menu buttons */ 
487.yui-skin-sam .yui-editor-panel .yui-toolbar-bordersize, .yui-skin-sam .yui-editor-panel .yui-toolbar-bordertype { 
488    width: 50px; 
489} 
490 
491/* Form styling */ 
492.yui-skin-sam .yui-editor-panel label { 
493    display: block; 
494    float: none; 
495    padding: 4px 0; 
496    margin-bottom: 7px; 
497} 
498/* Form styling */ 
499.yui-skin-sam .yui-editor-panel label strong { 
500    font-weight: normal; 
501    font-size: 93%; 
502    text-align: right; 
503    padding-top: 2px; 
504} 
505 
506/* Form styling */ 
507.yui-skin-sam .yui-editor-panel label input { 
508    width: 75%; 
509} 
510/* Form styling */ 
511.yui-skin-sam .yui-editor-panel #createlink_target, 
512.yui-skin-sam .yui-editor-panel #insertimage_target { 
513    width: auto; 
514    margin-right: 5px; 
515} 
516 
517/* Form styling */ 
518.yui-skin-sam .yui-editor-panel .removeLink { 
519    width: 98%; 
520} 
521/* Color the input yellow if it has the warning class applied */ 
522.yui-skin-sam .yui-editor-panel label input.warning { 
523    background-color: #FFEE69; 
524} 
525 
526/* Style the titles of the toolbar groups */ 
527.yui-skin-sam .yui-editor-panel .yui-toolbar-group h3 { 
528    color: #000; 
529    float: left; 
530    font-weight: normal; 
531    font-size: 93%; 
532    margin: 5px 0 0 0; 
533    padding: 0 3px 0 0; 
534    text-align: right; 
535} 
536/* Style the header for the Height and Width boxes */ 
537.yui-skin-sam .yui-editor-panel .height-width h3 { 
538    margin: 3px 0 0 10px; 
539} 
540/* Style the height and width container */ 
541.yui-skin-sam .yui-editor-panel .height-width { 
542    margin: 3px 0 0 35px; 
543    *margin-left: 14px; 
544    width: 42%; 
545    *width: 44%; 
546} 
547/* Give the border group a width */ 
548.yui-skin-sam .yui-editor-panel .yui-toolbar-group-border { 
549    width: 190px; 
550} 
551.yui-skin-sam .yui-editor-panel .no-button .yui-toolbar-group-border { 
552    width: 210px; 
553} 
554/* Give the padding group a width */ 
555.yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding { 
556    width: 203px; 
557} 
558.yui-skin-sam .yui-editor-panel .no-button .yui-toolbar-group-padding { 
559    width: 172px; 
560} 
561/* Fix some margins for the H3's */ 
562.yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding h3 { 
563    margin-left: 25px; 
564    *margin-left: 12px; 
565} 
566/* Image Properties - Text flow container size */ 
567.yui-skin-sam .yui-editor-panel .yui-toolbar-group-textflow { 
568    width: 182px; 
569} 
570 
571/* Remove the background image set in Panel.css */ 
572.yui-skin-sam .yui-editor-panel .hd { 
573    background: none; 
574} 
575 
576/* Give the footer som color and a border */ 
577.yui-skin-sam .yui-editor-panel .ft { 
578    background-color: #F2F2F2; 
579    border: 1px solid #808080; 
580    border-top: none; 
581    padding: 0; 
582    margin: 0 0 2px 0; 
583} 
584 
585/* Style the close button in the Property Editor */ 
586.yui-skin-sam .yui-editor-panel .hd span.close { 
587    background:url(sprite.png) no-repeat 0 -300px; 
588    cursor:pointer; 
589    display:block; 
590    height:16px; 
591    overflow:hidden; 
592    position:absolute; 
593    right:5px; 
594    text-indent:500px; 
595    top:2px; 
596    width:26px; 
597} 
598/* Style the tip in the footer */ 
599.yui-skin-sam .yui-editor-panel .ft span.tip { 
600    background-color: #EDF5FF; 
601    border-top: 1px solid #808080; 
602} 
603/* Style the tip in the footer */ 
604.yui-skin-sam .yui-editor-panel .ft span.tip strong { 
605    display: block; 
606    float: left; 
607    margin: 0 2px 8px 0; 
608} 
609 
610 
611/* Setup the icon for a tip */ 
612.yui-skin-sam .yui-editor-panel .ft span.tip span.icon { 
613    background: url( editor-sprite.gif ) no-repeat 0 -1260px; 
614    display: block; 
615    height: 20px; 
616    left: 2px; 
617    position: absolute; 
618    top: 8px; 
619    width: 20px; 
620} 
621/* Setup the background image for an info icon */ 
622.yui-skin-sam .yui-editor-panel .ft span.tip span.icon-info { 
623    background-position: 2px -1260px; 
624} 
625/* Setup the background image for a warning icon */ 
626.yui-skin-sam .yui-editor-panel .ft span.tip span.icon-warn { 
627    background-position: 2px -1296px; 
628} 
629 
630/* Handle the knob that floats on top of the panel */ 
631.yui-skin-sam .yui-editor-panel .hd span.knob { 
632    position: absolute; 
633    height: 10px; 
634    width: 28px; 
635    top: -10px; 
636    left: 25px; 
637    text-indent: 9999px; 
638    overflow: hidden; 
639    background: url( editor-knob.gif ) no-repeat 0 0; 
640} 
641/* Reset some styles from the editor toolbar, when a toolbar is inside the Property Editor */ 
642.yui-skin-sam .yui-editor-panel .yui-toolbar-container { 
643    float: left; 
644    width: 100%; 
645    background-image: none; 
646    border: none; 
647} 
648/* Reset styles for menu buttons inside the Property Editor */ 
649.yui-skin-sam .yui-editor-panel .yui-toolbar-container .bd { 
650    background-color: #ffffff; 
651} 
652 
653/* This image is the one used to place the blankimage placeholder into the editor when you click on Insert an Image */ 
654.yui-editor-blankimage { 
655    background-image: url( blankimage.png ); 
656} 
view plain | print | ?

More Rich Text Editor (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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