TYPO3 adding style class to UL backend in TEXT content view

Question

In TYPO3 i have added a bullet point list on my page as "TEXT content/element".

Working fine, but the layout is not working with the rest of the site. now if i have a CSS class "cmsms_timeline" that can make give the bullet point list a better layout, how can i add that class to the UL in TYPO3, so i dont need to go to "HTML" content and add the class.

I have the CSS added, i just need to know how to add it, do i need to go "HTML" view and then add the Class og can i get the Content element to use MY class from my CSS file ? Can see it using csc-default.

<!--  CONTENT ELEMENT, uid:29/text [begin] -->
<div id="c29" class="csc-default">
<!--  Text: [begin] -->
    <ul type="disc">...</ul>
<!--  Text: [end] -->
    </div>

UDPATE

Im running TYPO3 v. 6.1 (Fluid/Extbase).

Hi i have tried to add this for the MASTER page TSConfig.

RTE.default.contentCSS = fileadmin/templates/add/css/style.css
RTE.default.showTagFreeClasses = 1
RTE.default.proc.allowedClasses := addToList(cmsms_timeline)

When i ref to my stylesheet and add the cmsms_timeline, i then highlight the bullet points and i can select an item in block style, but its not showing cmsms_timeline.

Under WEB -> Info -> Page TSconfig -> RTE. under default i can see i have

[contentCSS] = fileadmin/templates/add/css/style.css 
[showTagFreeClasses] = 1

, so it get the info from the TSConfig.

My Style.css file have this code in it.

.cmsms_timeline {
  position:relative;
  margin:-11px 0 0 0;
  padding:0 0 37px 29px;
  list-style:none;

}

.cmsms_timeline li {
  position:relative;
  padding-top:24px;
}

.cmsms_timeline li:before,
.cmsms_timeline:before {
  position:absolute;
  top:-2px;
  left:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:1px;
  height:28px;
  background:rgba(0, 0, 0, .08);
  content:'';
}

.cmsms_timeline:before {
  top:auto;
  bottom:11px;
  left:29px;
}

.cmsms_timeline li a {
  position:relative;
  padding-left:13px;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -ms-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
}

.cmsms_timeline li a:hover {padding-left:19px;}

.cmsms_timeline li a:before {
  position:absolute;
  top:5px;
  left:-2px;
  width:5px;
  height:5px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  background:rgba(0, 0, 0, .2);
  content:'';
  -webkit-transition:background .3s ease-in-out;
  -moz-transition:background .3s ease-in-out;
  -ms-transition:background .3s ease-in-out;
  -o-transition:background .3s ease-in-out;
  transition:background .3s ease-in-out;
}

What do I miss.

Answer 1

The standard RTE editor (rtehtmlarea) can populate the class list by parsing a CSS file that you set for it so all you need to do is to define ul.cmsms_timeline in that CSS file. What the manual says:

The CSS file that contains the style definitions that should be applied to the edited contents. The selectors defined in this file will also be used in the block style and text style selection lists.

Example of the configuration:

RTE.default.contentCSS = fileadmin/template/rte.css

The setting is to be inserted to the TSconfig field in the (preferably root) page properties. You can open the WEB -> Info -> Page TSconfig -> RTE. to review all the RTE settings. Note that each database table might have its own configuration (e.g. RTE.tt_content.) so make sure that your default setting is not overridden for a particular table.

Also note that after every change of the file you MIGHT need to open this file in your browser or clear the browser's cache. This is to make sure that your browser caches the current version of the file and thus that the RTE would use it.

Once that is set, you can simply assign the class in the RTE by selecting it from the "Block style" select box after you...

a) ...highlight all the list items.

b) ...click on ul in Path: body » ul » li which is displayed at the bottom of the RTE once you click on any list item.

Answer 2

The RTE has two predefined classes for lists: action-items and component-items (action-items-ordered and component-items-ordered for OL list) and it will be easiest for just you to adopt them in your stylesheet (by just copying declaration of your cmsms_timeline into one ot them).

To set the class to whole list just select with mouse all its items and then RTE will enable the Block style select.

PS. adding custom/additional classes requires lot of effort, can be found easily in google as:
'typo3 rte custom block style', but for fast styling I don't think it's worth of the effort.