umbraco Forum » Frontend (html,css) » Markup questions and tips » Custom styles in editor isn't applied when I select them

Custom styles in editor isn't applied when I select them Options
Previous Topic · Next Topic
milandt
Posted: Thursday, May 08, 2008 4:07:06 PM

Rank: Newbie

Joined: 4/10/2008
Posts: 11
Location: Denmark, Copenhagen
I have tried to add a few styles to the style dropdown in the editor.

I have added a new Stylesheet editor.css:
Quote:
h1 { font-weight:bold }

.leftImage { float: left; margin: 0 1em 0.5em 0; }


I have added two substyles to that stylesheet:
Name: Title
Alias: h1

Name: Left Image
Alias: .leftImage

I have checked the editor stylesheet in Related stylesheets in the Rich editor data type.

The two styles comes up in the style dropdown when I edit my content.

The problem is, whatever text I select and tries to apply a style nothing happens. The html is not modified. If I use the insert/edit image button to insert an image and set the style through here the style that is added is class=".leftImage" and not class="leftImage" as supposed.

What am I doing wrong? What isn't my styles applied when using the editor, and why does the edit image tool apply the class incorrect?
Back to top
 
pkoutoul
Posted: Thursday, May 08, 2008 4:14:57 PM

Rank: Fanatic

Joined: 8/9/2007
Posts: 284
Location: Kentucky, USA
Check out this thread:
http://forum.umbraco.org/yaf_postst4730_Customised-TinyMCE-Editor-to-Allow-Heading-Tags-to-be-applied.aspx
Scroll down to Doug Robar's step by step explanation of how to do this.

Hope this helps.
Pete Koutoulas • Fayette County Public Schools • Lexington, Kentucky
Back to top
 
milandt
Posted: Thursday, May 15, 2008 11:40:46 AM

Rank: Newbie

Joined: 4/10/2008
Posts: 11
Location: Denmark, Copenhagen
I actually followed his steps.

In my original post, do you see anything that is not as it's supposed to be?

Why does the image editor insert .leftImage and not leftImage as class? Is the alias not supposed to be .leftImage?

Why does drop-down display the styles but the the editor doesn't apply them when I select them.
Back to top
 
bnkrazy
Posted: Friday, May 16, 2008 4:52:24 PM
Rank: Enthusiast

Joined: 5/13/2008
Posts: 45
Location: VA, USA
I created a separate stylesheet for the TinyMCE styles. Here's a few screenshots of my setup. The general idea is to have the CSS in the stylesheet for your site as well as the TinyMCE stylesheet if you separate them out as I did. That way the content editor actually displays the content similar to what is defined on the site, or it's at least close.

DCE_TinyMCE is the CSS file for the editor:


Right-click on the CSS file you created for the TinyMCE and select "Create."
Add one each for the styles you want in the Style selector. You can see I have three defined.

Here are the screens for the three created styles:






You have to have matching styles in your CSS files for your site and it should work fine.

Here's a shot of the editor in action. I had my cursor in the DCE News and Information line, which you can see above is defined as an h4 element. You can see the styling in place in the editor:


Hope that helps.

Chris
Back to top
 
Users browsing this topic
Guest

umbraco Forum » Frontend (html,css) » Markup questions and tips » Custom styles in editor isn't applied when I select them


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.