Exercise 41 Add a Custom Style Sheet for TinyMCE

Here are the steps for adding a custom style sheet containing the styles that should be available to your site's users:

1. Create a file named tinymce_styles.csswith the following class rules.TinyMCE recognizes class rules and will ignore other selectors like element rules and ID rules.

.color-red {color: red;} .color-blue {color: blue;} .color-green {color: green;}

.font-sans { font-family: Arial, sans-serif; } .font-serif { font-family: Roman, serif; } .font-mono { font-family: Courier, monospace;} .font-cursive { font-family: cursive; } .font-fantasy { font-family: Palette, fantasy; } .font-blackletter { font-family: serif; }

2. Place the tinymce_styles.css file in your theme directory; for example, drupal/themes/bluemarine/.

3. Navigate to administer> settings> TinyMCE(admin/settings/tinymce) page, and choose an existing profile or click Create new profile (admin/settings/tinymce/add). Set Editor CSS to Define CSS and CSS Path to %h%ttinymce_styles.css. Note that the variables %h and %t include trailing slashes already. This will evaluate to something like the following:

http://www.yourdomain.com/drupal/themes/bluemarine/tinymce_styles.css

4. Add the following bolded lines to the <head> section of your theme's page.tpl.php file, or the appropriate counterpart if you are not using PHPTemplate as a theme engine:

<style type="text/css" media="all">

@import "<?php print $directory ?>/tinymce_style.css ";</style>

<script type="text/javascript"> </script>

Now when you use the TinyMCE editor, you should have a styles selector that includes the class definitions you added, as shown in Figure 4-5.

Figure 4-5. TinyMCE with user-defined CSS classes

If you apply a custom style to some text, click disable rich-text, and inspect the HTML, you will see that TinyMCE has surrounded portions of your text in <span> elements, like this:

<span class="font-serif">You can apply styles to your text.</span>

If you want to give the classes in your style sheet different names—perhaps to make them more descriptive than box, block, or node—or if you want to exclude some of the classes in the style sheet you are using, the CSS Classes field is the tool to use. It allows you to enter a list of name=value; pairs, which determine the name of the style shown to your users (name) and the class name that it corresponds to (value). For example, suppose that you want to offer the box and block styles with the names introduction and summary, and you don't want the node style to be available at all. You could achieve this by entering the following as the value for the CSS Classes field:

introduction=box;summary=block;

The names introduction and summary would appear in the list of available styles, and node would be inaccessible to the user.

0 0

Post a comment