List of CSS classes for Editor

burnchar

Where can I find documentation for the CSS classes used by Editor and what they do?
I see various examples in the forums which use, say, [code]div.DTE_Field_Type_select[/code] but as far as I can tell, those are magic strings from the void.
I tried searching each page in the Editor website (Options, Fields, Examples, etc.) for words like "styling", "css", "DTE_" but couldn't find anything promising. I tried searching the CSS provided with Editor itself, but only a subset of CSS can be found, and most isn't commented; it's all named really well, but still many names are non-obvious in function.

allan

Actually, I'm afraid this is one area where the Editor documentation is not as complete as it should be. This is something I will look at adding to the site.

Until then, each Editor field container gets three classes added to it:

- `DTE_Field` - indicating that it is a field

- `DTE_Field_Type_{type}` - the field type, were `{type}` is the field type specified by the `type` option (i.e. radio, text, select etc).

- `DTE_Field_Name_{name}` - the field name, specified by the `name` configuration option for the field.

Using these three options you are able to style all field types, fields by type or individual field.

The HTML structure used for each file (by default) is:

[code]


{LABEL TEXT}



...INPUT...





[/code]

where `...INPUT...` is controlled by the field type plug-in (it might be as simple as an input element, or it could be as complex as a DataTable allow subselects.

I hope this helps, but certainly something I will look at documenting - thanks for pointing that out.

Regards,
Allan

burnchar

Thank you very much for the help, Allan!
May I ask the CSS for the DTE form itself? My current actual issue is that the form is about 1500px wide, which is far too wide for my users, and that I want to limit its width.

--Charles Burns

allan

It looks something like this:

[code]


...HEADER...






...FIELDS...









...BUTTONS....




[/code]

That's the main form. The actual display is of course dependent upon the display controller.

Using Firebug / Inspector will probably tell you where the width is coming from.

Allan

burnchar

For future readers with the same question:
I'd tried Firebug before without luck, but at Allan's suggestion I tried harder and found the CSS controlling form width. My table is about 2,000px wide. The form doesn't look right when set to 90% width.
The CSS involved was:

[code]
div.DTED_Envelope_Container {
position: absolute;
top: 0;
left: 15%;
width:90%;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
box-shadow: 3px 3px 10px #555;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: white;
}
[/code]
This is in dataTables.editor.css.

I changed width:90%; to width:900px;

Note that I am using the Envelope display controller. The default display controller is Lightbox. If you use Lightbox (you do unless you know you've changed it), the relevant CSS is under: div.DTED_Lightbox_Container in the same file.

allan

Excellent - good to hear you resolved the problem!

Allan

mikemike

Hello,

I too, wanted to change some formatting, in particular I wanted horizontal radio buttons.
Yes, the CSS for the Editor is quite mysterious :)
This post helped me a lot, but also looking at the source (with Editor open) gave me some hints.
Just to share my 2 cents:

[code]
div.DTE_Field>label {
float: left;
width: 38%; /* default: 40% */
padding-top: 3px;
text-align: right; /* I wanted the labels on the right, but you need to make the width smaller*/
margin-right: 3px;
}

div.DTE_Field_Type_radio div div div{ /* this finds all the radio button fields: button + value */
/*border:1px solid red;*/
width: 120px;
display:inline; /* this does the trick of putting the buttons on one horizontal line*/
padding-left: 10px; /* to put some space between each button + value */
}

div.DTE_Field_Type_radio label { /* this finds ONLY the radio-group labels */
/*border:1px solid green;*/
margin-top: -5px; /* up, to align label to buttons */
}

div.DTE_Field_Type_radio label:nth-child(2){ /* this finds all the displayed values for the radio buttons */
/*border:1px solid blue;*/
padding-left:5px; /* to put some space between the button and its value (displayed on the right */
}
[/code]

Some trial and error was needed: drawing boxes around the various css entities helped a lot (in the above code they are commented out). I think the fine tuning might change according to the base css chosen, but the rest should work.

I suppose a much better job could be done with jquery. For example, targetting individual radio groups, if there is more than one in the Editor window.

DataTables and the Editor is truly a beautiful job.

Thanks, Allan!

allan

Hi,

Thanks very much for your post - brilliant feedback :-).

I'm going to put together a few diagrams for the markup and classes that DataTables and Editor add to the HTML, which will hopefully help! For DataTables that will be part of 1.10, and for Editor as part of 1.3 - the final release of which should happen together.

Regards,
Allan