YUI Library Home

YUI Library Examples: Rich Text Editor: Skinning the Editor

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

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

More Rich Text Editor Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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