Tabel editor cell properties CSS Class

Jonas Peterson

Vote:

Hi, I have problem getting my CSS classes to get into the drop-down menu in "Cell properties". I get them to turn up in the Table properties CSS class drop-down list. How should I write the editor.css? This is the css code I would like to be able to choose from in Cell properties:


table tbody tr td.row
{
    padding: 3px;
    border-bottom:      dotted 1px #52728B;
    EditMenuName: Row;
}
table tbody tr td.altRow
{
    background-color: #FBFBFB;
    padding: 3px;
    border-bottom:      dotted 1px #52728B;
    EditMenuName: Alt Row;
}

#13379

Mar 05, 2008 11:10

Jackie Chung

Vote:

Just trying to achieve the same thing as described by Jonas, without much luck.

Does anyone know how to the CSS to show up in the Cell Properties?

#25307

Oct 20, 2008 2:17

Mårten Berg

Vote:

I had the same problem before. I solved it by including position: relative; in each css class that should show up in cell and image properties.

Hope it helps,
/Marten

#25309

Edited, Oct 20, 2008 9:56

Henrik Tengelin

Vote:

Hi!

If you try the following I think it will populate the CSS dropdown correctly.

table tbody tr td.row { padding: 3px; border-bottom: dotted 1px #52728B;}
table tbody tr td.altRow { background-color: #FBFBFB; padding: 3px; border-bottom: dotted 1px #52728B; }

td.row { EditMenuName: Row; }
td.altRow { EditMenuName: Alt Row; }

But I don't get why you use "table tbody tr td.row"? Or is it example code? If you use "td.row" only it would have the same effect. Since you will never use a td with class="row" outside a table, (tbody) and tr you don't really have to specify all those parent elements. I put the tbody in parenthesis since you might use a td without it.

Actually you probably could minimize it even more, to something like (not tested)...

td.row, td.altRow { padding: 3px; border-bottom: dotted 1px #52728B; EditMenuName: Row; }
td.altRow { background-color: #FBFBFB; EditMenuName: Alt Row; }

Since you (at least in EPiServer CMS 5) could specify multiple css files to use in the editor I would recommend one "used in editor only css file" which only contains css classes and such with {EditMenuName: Whatever;} and nothing more, and another css file, also used in the site, which contains the actual style properties. This would minimize problems with partially duplicated css styles when adding new or changing existing classes and would prevent validation problems if you would use the css with {EditMenuName: Whatever;} in the site (since EditMenuName is not a valid style property).

Now you got me started... This might end up in an article or blog post on "my thoughts of how to structure the css files in EPiServer sites"...

/Regards
Henrik

#25370

Oct 22, 2008 21:43