I already watched that video where Per is showing how to customize the tinyMCE editor to implement custom styles. The problem is that this are all simple scenarios like a custom custom classes (.red , .yellow, etc...) or html elements (<p>, <h1>, etc...)
The scenario I'm looking for is to implement custom styles for tags that are used in combination, like a definition tag (<dl>) that contains several definition items (<dt>). Like in the html-markup I shown in my previous post.
It shows how to add the <abbr> and <acronym> elements.
I have tried to search google to see if any others have implemented the option for inserting dl's the proper way and it seems like people have tried but I can't figure out quite how. But perhaps you can find help on their forums it should be possible to make it work but it does not seem to be working out of the box from what I can tell when looking at the full imlementation here: http://tinymce.moxiecode.com/tryit/full.php
I think that another option albeit a bit cumbersome could be this...
Create a content repository for you definitions and then create a macro where the definitions can be selected, allow the macro to be inserted into the rich text editor and then generate the output using XSLT/Razor.
Otherwise another more easy option would be to rewrite the dl structure to a unordered or ordered list dependant on what makes more sense.
I realise that by turning to these lists instead is not semantically the same but I think it's a fair compromise to get forward in a quick manner.
Your post does certainly help, I'll think I'll ask my designer to rewrite the structure for an unordered list. Here usage of the <dl>, <dt> and <dd> elements isn't semantically correct anyway I think, as she just uses these elements to present information about an employer.
The problem is that my designer still designs with static webpages in mind and doesn't account for the fact that here layout for content pages should be editable by editors.
I already suggested to her to give an Umbraco demo, so her future layouts for content pages are more practical from a CMS perspective.
Well it should not be neccesary to have the CMS in mind when designing the page IMHO. She should be able to design/create templates in the way it makes sense on the web.
But sometimes it's worth considering what should be managed through the RTE - My opinion is that RTE is for content and not design :-)
Yeah that's true, after all one of the strong features off Umbraco is the complete seperation of content and design. But editors shouldn't have to go to the code view of the tinyMCE editor to edit <dl> en <dt> elements.
Maybe a could create a document type 'employer' with some employer properties that then are rendered as <dt> elements, but for now I leave like that and await my customers feedback. If they need to edit this page a lot, and lot's of new employers need to be added, I'll implement the document type solution.
Where you with your suggestion to create a 'content repository' for the definitions also referring to a document type?
Yes I was also reffering to creating a document type to handle it in a "content repository".
I would then create a placeholder document type called "Employers" and then have the employer allowed under it. If it's a big company and it would sense to place the employers in different categoriers I would consider creating a folder placeholder document type as well so the structure in the content tree could be either one of these below.
how to create a custom style for dl tags
Hi,
My designer has created css style rules for definition lists (dl) and definition items (dt)
the html markup looks like this:
<dl>
<dt>Ko Doedens</dt>
<dd>Sociaal pedagogische achtergrond</dd>
<dd>Directeur welzijnswerk</dd>
<dd>Directeur kinderopvang instelling</dd>
<dd>Lid van de HKZ werkgroep kinderopvang</dd>
<dd>Lead Auditor HKZ/ISO HKZ schema's:<br /> kinderopvang, maatschappelijk werk, jeugdzorg, maatschappelijke dienstverlening en thuiszorg.</dd>
<dd>Partner Shape</dd>
</dl>
Now I would like to create custom styles for this definitions in tinyMC but I don't know how to do this
Hi Anthony,
I think you should take a look at this video about stylesheet.
http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/sitebuilder-introduction/stylesheets
There are how to create custom styles to your tags.
I hope it will help you solve your problem.
/Dennis
Hi Dennis,
I already watched that video where Per is showing how to customize the tinyMCE editor to implement custom styles. The problem is that this are all simple scenarios like a custom custom classes (.red , .yellow, etc...) or html elements (<p>, <h1>, etc...)
The scenario I'm looking for is to implement custom styles for tags that are used in combination, like a definition tag (<dl>) that contains several definition items (<dt>). Like in the html-markup I shown in my previous post.
But maybe this is just not posible.
Thanks anyway for your help,
greetings,
Anthony
Hi Anthony
This seems to require that you modify the tinyMceConfig.config file.
You can read more about adding new commands to the RTE and what to be aware of in this wiki: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-%28tinymce%29/how-to-add-extra-html-functionality-to-tinymce
It shows how to add the <abbr> and <acronym> elements.
I have tried to search google to see if any others have implemented the option for inserting dl's the proper way and it seems like people have tried but I can't figure out quite how. But perhaps you can find help on their forums it should be possible to make it work but it does not seem to be working out of the box from what I can tell when looking at the full imlementation here: http://tinymce.moxiecode.com/tryit/full.php
I think that another option albeit a bit cumbersome could be this...
Create a content repository for you definitions and then create a macro where the definitions can be selected, allow the macro to be inserted into the rich text editor and then generate the output using XSLT/Razor.
Otherwise another more easy option would be to rewrite the dl structure to a unordered or ordered list dependant on what makes more sense.
I realise that by turning to these lists instead is not semantically the same but I think it's a fair compromise to get forward in a quick manner.
if you create a structure like this instead...
<ul>
<li>
<strong>Definition title</strong>
<p>defintion text</p>
</li>
</ul>
I hope this post helps.
/Jan
Hi Jan,
Your post does certainly help, I'll think I'll ask my designer to rewrite the structure for an unordered list. Here usage of the <dl>, <dt> and <dd> elements isn't semantically correct anyway I think, as she just uses these elements to present information about an employer.
The problem is that my designer still designs with static webpages in mind and doesn't account for the fact that here layout for content pages should be editable by editors.
I already suggested to her to give an Umbraco demo, so her future layouts for content pages are more practical from a CMS perspective.
greetings,
Anthony
Hi Anthony
Well it should not be neccesary to have the CMS in mind when designing the page IMHO. She should be able to design/create templates in the way it makes sense on the web.
But sometimes it's worth considering what should be managed through the RTE - My opinion is that RTE is for content and not design :-)
/Jan
Hi Jan,
Yeah that's true, after all one of the strong features off Umbraco is the complete seperation of content and design. But editors shouldn't have to go to the code view of the tinyMCE editor to edit <dl> en <dt> elements.
Maybe a could create a document type 'employer' with some employer properties that then are rendered as <dt> elements, but for now I leave like that and await my customers feedback. If they need to edit this page a lot, and lot's of new employers need to be added, I'll implement the document type solution.
Where you with your suggestion to create a 'content repository' for the definitions also referring to a document type?
greetings,
Anthony
Hi Anthony
Yes I was also reffering to creating a document type to handle it in a "content repository".
I would then create a placeholder document type called "Employers" and then have the employer allowed under it. If it's a big company and it would sense to place the employers in different categoriers I would consider creating a folder placeholder document type as well so the structure in the content tree could be either one of these below.
1)
Frontpage
page
page
page
page
etc.
Empolyer repository
employer
employer
employer
2)
Frontpage
page
page
page
page
etc.
Empolyer repository
folder a
employer
employer
employer
folder b
employer
employer
employer
That is how I think I would do it :-)
/Jan
is working on a reply...