I don't understand why the style list wouldn't be "semantically correct markup". Can you explain that a bit more? What kind of output do you want to get in the html that you don't think the dropdown list of styles might provide?

cheers,
doug.

---

MVP 2007-2009 - Percipient Studios - Percipient Blog

That's my understanding as well, Pete. And umbraco's style list works extremely well for me in that regard. I can use all the Hx, P, and other tags that I like, but give them more meaningful names for the content editors... Heading 1, Heading 2, Title (aka, h1), SubTitle, Paragraph Text, etc. I can also assign classes to elements this way.

Thus my question... is there something that ProNotion can't do with the style dropdown? I'm sure there is, but in actual practice I've found very few occasions where that's the case. 90% or more of the time I find the style list to do just what I want.

cheers,
doug.

---

MVP 2007-2009 - Percipient Studios - Percipient Blog

I'm not an expert on updating TinyMCE so I don't know to what extent it is possible to add features.

I do think I understand both you and Pete accurately. But perhaps I'm not being clear in my response. I'll try one more time.

If you look at this site http://www.coalitionformarriage.org/, which is a basic umbraco site and turn off all CSS you'll find a very well-formed and displayed page. It uses divs, to be sure, but all the content is contained within the standard H1, H2, and P tags, for instance. It is SEO-friendly and degrades nicely for people who don't have css turned on. It is, I believe, an example of semantic markup. You don't find div id="mainHeading" used instead of an H1. The divs used for visual presentation/css are sometimes not semantic but simply required by the css or ease of organization. But semantic xhtml is used for actual content.

The site is maintained by people who don't know HTML and only use the TinyMCE editor. I've pre-populated the style list with names they understand (Heading 1, Heading 2, Paragraph Text), but those are actually inserted in TinyMCE as (H1, H2, P). Putting a friendly name in the style list is simply for the convenience of the users. It does not create non-semantic markup.

All the standard HTML elements can be put in the style list and will provide semantic markup.

I can understanding wanting to use a TinyMCE feature you might be familiar with, but from your short description it seems that you could achieve what you need to achieve with the existing functionality.

What am I misunderstanding about what you're trying to do that is not possible with the style list in the TinyMCE RTE?

cheers,
doug.

---

MVP 2007-2009 - Percipient Studios - Percipient Blog

That's exactly what I'm saying. Here's how...

1. In the Settings section of umbraco, expand the Stylesheets portion of the treeview. You'll see your css file(s) for your site there.

2. Right-click on one of them (I use the main css file for the site, but it could be any of them). Select the Create menu item.

3. Give the Stylesheet Property a name (this is what will appear in the style dropdown... it can be any descriptive text). As an example, let's assume your site editors think of the first/biggest heading on a page as the "Title"... give the property the name "Title" and click the Create button.

4. You'll see the new "Title" property appear in the Treeview below the selected css file. Click on it.

5. Change the Alias field to the HTML element that should be used when this item is selected. In our case, type in "h1" (without the quotes) and click the save icon.

The only thing left to do--if you haven't already done it--is to tell TinyMCE to use your css file. It will automatically put any Stylesheet Properties you've created into the Styles dropdown list. Just go to the Developer section of umbraco, expand the Data Types treeview item and select the Richtext Editor. Here you can select which buttons will appear on the TinyMCE toolbar. You also select the css file(s) to use. Just select the css file that has the stylesheet properties associated with it and click the save icon.

That's it!

cheers,
doug.

---

MVP 2007-2009 - Percipient Studios - Percipient Blog

I suppose I should mention that the styling for the h1 would be picked up from the other css files so you don't have to type anything directly in the property sheet's styling if you don't want to.

Also, just to be complete... if you want to assign a class to an object, that's easily done as well. Here's an example:

Suppose you want to let people put images in their content and have the text flow around it. You also want to get a consistent margin between the image and the text. A simple img {} style isn't going to do it because you need to float the image left or right and adjust the margin accordingly to keep the image flush with the outside edge of the page.

You could let the users specify the float and margin when they insert the image in the RTE. But this has two problems. First, the style information is embedded directly in the html; second, users sometimes forget to set things properly and you have a lack of consistency in your site. The solution is to apply a css class to the image that can be defined and managed in a central location (like all css) so you get consistency and can update the site's design easily.

Here's how to do it. Follow the steps above, but...
Step 4 - call the new property "Image Left"
Step 5 - set the alias to the class name, ".imageleft"

Then, specify the css right in the stylesheet property...
float: left;
margin: 1em 1em 0.5em 0;

Save the stylesheet property.

Repeat for "Image Right"
.imageright
float: right;
margin: 1em 0 0.5em 1em;


The user would then insert the image in the RTE but not set anything in the advanced settings for the image. Just insert the image and click OK. Then, the user would select the inserted image in the RTE and choose "Image Left" or "Image Right" from the styles list. Presto. The html that is produced is:

<img class="imageleft" alt="post tension slab" src="/media/26564/post-tension-slab.jpg"/>


Happy styling!

cheers,
doug.

---

MVP 2007-2009 - Percipient Studios - Percipient Blog

Lack of good documentation that's easy to find is definitely the most glaring weakness of umbraco. It caused me to give up on it once, but I am glad I came back. It takes some effort to learn, but it is time well spent IMHO.

---

Pete Koutoulas • Fayette County Public Schools • Lexington, Kentucky

There is another method you can use to achieve the same results: How To Apply Heading Tags In Umbraco

Tim

---

Managing Director at The Site Doctor Ltd - My personal blog is here - Umbraco Newbie ;)

I tried this, but it doesn't work in firefox. It works in IE6. What's causing this?

Hi guys,
I have tried Doug's solution, but noticed that the code becomes a class. <h1 class="h1"> shows up instead of simply <h1>. Is there a way to simply have <h1> in the code?

Thanks in advance for any help you guys can offer me!

Thank you, Doug. Indeed, I STARTED with .H1, but then removed the dot. Should I re-create them?

I'm on version 3.

Thanks again!