ordered and unordered lists in tinymce

[dce]

Hello all,

When I attempt to create a list in tinymce, it does not work correctly (no bulleted or numbered lists appears).

Strangely if you inspect the html in tinymce, the proper HTML markup is applied by tinymce, but the output just appears as regular text (without bullets or numbering) in the wysiwyg editor and when the text element is saved.

Lists are displayed correctly when the typolight list element is used.

After inspecting the css, this appears to be by design (correct me if I am wrong). lists controlled by ce_list works as expected, lists controlled by ce_text does not - they have different formatting instructions.

Is there a reason for this and how do I get lists show up and save correctly (or the same way as when the typolight list element is used) with tinymce?

Thanks.

[Medianomaly]

If the markup is there, but the bullets/numbers are gone, it almost has to be CSS issue. Search your CSS files for a "list-style-type: none;" declaration somewhere.

This definitely isn't the default behavior -- did you add your own CSS files, or alter any of the existing ones (like basic.css, for instance)? One common cause would be if you added a "Global CSS Reset" type of thing, which likely would cancel out all the margins/padding and remove the list formatting.

[dce]

If the markup is there, but the bullets/numbers are gone, it almost has to be CSS issue. Search your CSS files for a "list-style-type: none;" declaration somewhere.

This definitely isn't the default behavior -- did you add your own CSS files, or alter any of the existing ones (like basic.css, for instance)? One common cause would be if you added a "Global CSS Reset" type of thing, which likely would cancel out all the margins/padding and remove the list formatting.

Thank-you for your help, it is greatly appreciated.

I have been hunting down this issue for hours to no avail after some reverse engineering.

I purchased two templates (rounded boxes and clean blue) and both exhibit this behaviour without any changes such as you mentioned to the template. This is why I suspected default behaviour or possibly an aberration relating to server environment (a linode VPS running Debian).

From inspecting the source of the outputted pages, the list code produced by tinymce is as follows:

<div class="ce_text block">[*]one[*]two[*]three[/list]
</div>

List does not display as it should in the tinymce editor or when saved.

When a list is created from the built in typolight list element, the code produced is as follows:

<div class="ce_list block">

1. <li class="first">one
2. two
   <li class="last">three

</div>

List displays as expected when saved.

I have been investigating maybe creating a CSS class for list elements when located in a ce_text block but I suspect possible complications/side-effects since ce_list is intertwined with ce_text.

Anyway, since we are dealing with tinymce and typolight, things tends to get more complicated since you have two parts to deal with.

Any help with this issue would be welcome.

[Medianomaly]

I have a few random thoughts -- but if possible, could you post a URL to an example of your issue (any page on your site that is showing a list incorrectly). I'd like to see the actual code and output.

Random thoughts:

1. Do you know if you had this issue before you installed either of your purchased templates? Maybe it could be an issue with the template in some way (I've never purchased one, so I have little experience with them).

2. If the list code you pasted from TinyMCE is 100% accurate, then it is broken (there is a missing opening [list=1] tag). I just want to clarify if that is the case, or you just accidentally omitted it.

Hard to know without seeing it, though.

Brian

[dce]

I have a few random thoughts -- but if possible, could you post a URL to an example of your issue (any page on your site that is showing a list incorrectly). I'd like to see the actual code and output.

Random thoughts:

1. Do you know if you had this issue before you installed either of your purchased templates? Maybe it could be an issue with the template in some way (I've never purchased one, so I have little experience with them).

2. If the list code you pasted from TinyMCE is 100% accurate, then it is broken (there is a missing opening [list=1] tag). I just want to clarify if that is the case, or you just accidentally omitted it.

In most cases you can just just the typolist editor

Hard to know without seeing it, though.

Brian

Sorry my mistake, it was not pasted accurately, the top tag was omitted mistakenly. I never tested it with the example template included. I went straight to the purchased templates and both have the same behaviour and the only changes to the templates were graphic related and a change in the font used.

Here is an example, double checked for accuracy, with a list created with tinymce and right below it, a list created by the typolight list element. I have included the article class that encompasses it. This behaviour happens wherever tinymce is used - news, FAQ (news and FAQ are especially critical since it is all done in tinymce), article etc.. The ce_list block outputted by the typolight list element displays as expected.

<div class="mod_article block" id="tax-preparation">
<div class="ce_text block">

1. one
2. two
3. three

</div>

<div class="ce_list block">

1. <li class="first">one
2. two
   <li class="last">three

</div>
</div>

Because this problem is displaying right from the beginning in the tinymce wysiwyg editor (the html markup is proper in the editor but the list not displayed as a list, even in the editor itself) I have been investigating where tinymce is getting its markup instructions from and how typolight processes the output when the text element is saved. Since the formatting problem is the same in the editor and the final output, tinymce must be using formatting instructions supplied by typolight right from the start somehow.

Regarding the usual behaviour of tinymce in typolight, does tinymce display a list in its editor (before it is saved) exactly as it would look if formatted by the typolist list element? When a list is created in tinymce, does typolight usually wrap it in a ce_list div?

Regards,
Dale

[Medianomaly]

As far as the HTML markup is concerned -- the tags that are being outputted as well how things are being classed, everything seems to be working as expected. To answer your question, the difference in class between lists created in TinyMCE and using the list content element that you are seeing are normal.

Regarding the fact that you see the issue in both the backend and the frontend -- TinyMCE does format its content using the "basic.css" file that should be in the root of your TL site. So it's possible that there is a style in here that is causing this issue (although it wouldn't be added by default).

My hunch is still that there is a CSS declaration somewhere that is causing this. That's why I requested a URL to see the issue in action -- I was going to try and investigate with Firebug.

[dce]

My hunch is still that there is a CSS declaration somewhere that is causing this. That's why I requested a URL to see the issue in action -- I was going to try and investigate with Firebug.

sorry I forgot. Here it is, with both examples.


http://www.taxdoctorscanada.ca/tax-preparation.html

[Medianomaly]

http://www.taxdoctorscanada.ca/basic.css
Line 2: Remove "ol, ul, li," from the style declaration.
Line 7: Remove Completely.

Wow -- if that's really what's in there by default, I stand corrected. I guess I always emptied that file out and never really looked at what was in it.

So do those two things, and that should fix your specific issue, however if you run into any additional issues, I would look there first. It is sort of doing a "Global Reset" like I suggested earlier.

I think the idea behind including basic.css on the backend and frontend was so you could put your basic content styles in it, and to the client what they see in TinyMCE would look roughly the same as it will in the frontend. I personally don't agree with this, so I always just emptied this file out, and added a couple of things in as needed (for instance, if you put classes in this file, they will be available from the TinyMCE drop down).

I like the site, by the way.

[dce]

Thank-you for your help, it is greatly assisting me.

Took a look at the original template package and that is indeed what basic.css has.

Regarding your second instruction. Just to clarify, are you referring to the style instruction below?

li {
list-style-type:none;
}

When you did what you suggested, was the top horizontal menu in the header affected? It is affected when I do such actions.

Can you recheck? Maybe I am missing something.

I was thinking along the same lines from the beginning but suspected resultant negative side affects because (non ce_list related) order lists are also used to help style the horizontal header menu at the top. In my case, removing the margin and styling specifications from order lists in basic.css causes bullets to appear next to the menu items and the bottom half of the top level menu text to be removed.

That is why I was looking at how to stop tinymce from using these instructions in it's editor and finding a way to get typolight/tinymce to wrap ordered lists in ce_text bocks with the ce_lists class declarations (I was also puzzled as to why it was set this way hence the questions in my previous posts). Somehow find a way in the css to separate the default list styles from the list styles used in ce_text blocks.

You mentioned classes declared in basic.css will populate the tinymce drop down. Maybe there is a way to add a subclass/class in basic.css (now that you helpfully explained that basic.css is used to style text in the tinymce editor) along the lines of the ce_list class and get tinymce to style lists in the editor with the said class/subclass?

What ever the fix, maybe it should be added to the pre-made templates affected? I am surprised no one has seen this before (if it is indeed a problem and not something I am doing wrong)

Again, thank you very much.

Dale

[Medianomaly]

Sorry, dude -- let's back up a bit.

The simplest, most direct way to fix your specific problem is to just add this to the bottom of your basic.css file (or maybe your content.css file would be a better place -- your call).

.ce_text ul, .ce_text ol {
margin: 0 0 12px 3em;
line-height: 1.5;
}

.ce_text ul li {
list-style-type: disc;
}

.ce_text ol li {
list-style-type: decimal;
}

That should make your TinyMCE lists look identical (or almost identical) to the list content element.

But I still think what's going on is a bit confusing to a newer user, so that's why I tried to take a different route. Let me know if you have any more questions on this.

[dce]

Thanks Bud. That works.

The solution you gave was the route I first though about when I noticed the problem after I checked the source (I was trying to figure out how get tinymce onboard). Here is your code altered a little to give exactly the same formating as the list ce_list element in the template we are talking about.

.ce_text ol {
margin-left:3em;
line-height: 1.5;
}
.ce_text ul {
margin-left:1.5em;
line-height: 1.5;
}
.ce_text ul li {
padding-left:18px;background-image:url("tl_files/rounded_boxes/images/arrow.jpg");background-position:left center;background-repeat:no-repeat;
}
.ce_text ol li {
list-style-type: decimal;
}

Now two quick follow up questions if you do not mind. You mentioned that the tinymce editor in the backend pulls it's wysiwyg formating from basic.css. I put the code in basic.css and tinymce still does not show any formatting for lists in the editor (correct markup is there in the editor and the output is formatted as expected when the text element is saved). This was part two of my problem. How to get tinymce to use the list definitions in the ce_text block (which is defined in basic.css). It is obviously still using the parent's definition in basic.css.

Lastly, what is the proper typolight way add changes to style sheets so that they can survive a typolight update?

[Medianomaly]

I think something HAD to have been changed in your installation -- either manually, or perhaps by one of the templates you installed. I have a DEV install of TL 2.76 that I'm looking at -- didn't make any changes from the default, and those problem styles are not there, and list formatting works as expected in both the Frontend and in TinyMCE.

You can take a look for yourself, here is the basic.css that comes with TL core:
http://dev.typolight.org/repositories/e ... /basic.css

Notice how different it is from yours.

If that's the case, I don't think I can help, because I have no idea what is overriding those list styles in TinyMCE (could be anywhere). And not to bash the creator of the offending template, but if I'm right then man, that is bad practice to reset all styles like that and not build them back up for the content elements.

You may want to try taking a look in here:
/system/themes/tinymce.css"

Or look in /system/config/ for any TinyMCE configuration files (there are 3 in the core, but I don't know if those templates added any). Inside those files, there is a line like this:

content_css : "<?php echo TL_PATH; ?>/basic.css,<?php echo TL_PATH; ?>/system/themes/tinymce.css",

Those config files aren't update safe, but here are a couple of resources on how to customize them:
http://www.typolight.org/customizing-tinymce.html
viewtopic.php?f=6&t=1019&start=0&hilit=custom+tiny mce

Onto your second question -- really the only file of concern is "basic.css" that would be in danger over being overridden. For an automatic update, I don't know what happens to that file, but my hunch would be it is update safe. You can also back that file up and test it out next time you update. For a manual update, just be careful not to upload that file (there are a handful of files that will survive automatic update, but if you manually upload a new complete TL version would obviously be overridden).

And of course since your other CSS files should be separate and created by you, they would be safe. It sounds like there may be an issue with CSS files you create and put in the root, per this discussion: viewtopic.php?f=7&t=1035&hilit=css+root.

[dce]

Spent a few hours trying to figure out a way to get tinymce to show the custom list style.
Tracing things out from the typolight tinymce config I did see /system/themes/tinymce.css and checked that out and it did not have anything that would be relevant.

It is the basic.css as I got it (I double checked) and both of the pre made templates I have follow the same design. This we can take as a given. It is the design.

Now that I have really looked at things in detail (hours in firebug and your helpful pointers), there is no hidden stuff overriding the lists.

What is complicating things is that the the base list style (basically no style - list-style-type:none - with some position directives) is used for the horizontal header menu (in fact customized specifically for use with the menu) and any subsequent use of a list other than relating to that menu has to be overridden to get the desired style. That is what ce_list does.

Now, Tinymce in this scenario just applies regular markup for lists (ol, ul , li etc.). Well if you use just straight ol and ul, you get the formatting for the menu I described above, so that is what tinymce shows - plain lists. To get something else with this setup you have to create a class and direct the list to use that class which is what the typolight list element does.

The easiest way I can think of and the angle I have been exploring is to create a tinymce format (that shows in the format drop down box) and have that format wrap the list in a div with a list class created for the purpose in tinymce.css or basic.css. I manually did and it does display correctly in tinymce. Now I am stuck trying to find a way to create a custom format in tinymce with typolight. I would appreciate some help here.

I think a better design would have been to create the custom list class for the horizontal menu instead and style the base list elements the way you want them to appear in regular content. That would have worked with tinymce without any problems, both on the front end and the back end.

[Medianomaly]

Ahh -- I misunderstood -- you are seeing bullets and indentation now, just not your custom list styles... I don't know why those aren't working, to be honest.

I personally don't know of a way to get it to automatically add your class, but maybe you can try creating a "Tiny Template". In your TL_FILES folder you should have a folder called "tinyTemplates" or something like that. You can put HTML files with snippets of code, and when you press the "Tiny Templates" button in the editor, it will insert that code in TinyMCE.

Maybe you can create a template with something like:

<div class="myCustomClass">
<ul>[*][/list]
</div>

And when you insert it in TinyMCE, you can start typing into that one[*], and when you press return, it will keep creating new[*]'s. This is just a theory -- don't know if it will work that way in practice.

You shouldn't have to jump through these hoops though -- I still feel like there is something we both are missing.

Regarding those styles that came with your designs, what he/she did in theory isn't bad -- they just did a "Global CSS Reset" where the default browser styles (margins, padding, borders, bullets, etc.) are all cancelled out at the beginning and everything starts at 0. That's normal -- I do that as well when I make my site templates.

My problem with what he/she did is:

1. Why put that is basic.css?
2. Why just leave it like that? When I do mine, in the places that I know regular content will appear, I'll "build up" those styles again. So for instance, I'll do my reset, then if I know all of the site content is going to be in an element with an ID of "main", I'll do this:

#main p {  /* stuff */ }
#main ul {  /* stuff */ }
#main li {  /* stuff */ }
#main h1 {  /* stuff */ }
etc. etc.

(It seems like a strange way to do it, but I do end up writing a lot less code than if I didn't do it this way.)

For the designer to just leave everything zeroed out like that is a bit baffling to me.

[dce]

and the menu relying on style removal for lists in basic.css to display properly.

Anyway I have a workable solution, thanks to you.

Please accept my gratitude. You have been an immense help.

Cheers...

[dce]

Just an update.

directives in tinymce.css (with this template) overrides directives in basic.css with respect to the tinymce editor (and has no effect outside of the editor).

So the the list code added within the ce_text class formats lists created in tinymce (text element) when saved (ol and ul in ce_text class blocks) and I add code to tinymce.css to allow the tinymce editor to reflect what the saved output will look like.

I moved the ce_text (ol and ul) changes to content.css and basic.css is now unaltered.