Templates for editor popup-Layer

stefan_o

are there any Templates available for the editor popup-Layer ?
(two columns, width, styling, etc? )

allan

You can use CSS to effect the layout to get two column layout (just float the inputs and make them 50% width (single column example - could be easily modified to be two column), but layouts more complex than that currently aren't possible.

Allan

stefan_o

My Goal is to display two columns next to one another inside the popup-Layer. Allan advised to set the inputfields to float:left; & width:49%; .

I tried several ways to set : float:left; width:49%; regarding the input fields inside the popup. but they all failed. I guess my most apropriate attempt might have been to set those values here into :" div.DTE_Field".

I did that like :

div.DTE_Field input,

div.DTE_Field textarea {

/* other values here */

float:left; /* added value */

width:49%; /* added value */

}

None of my attempts did accieve two columns displayed next to one another . Does anybody have any advice as to why the above attempt had failed?

PS:
I was able to set the width of the entire PopUp to a desktop modus though:

div.DTED_Lightbox_Wrapper {
position: fixed;
top: 0;
left: 10%;
margin-left: -90px;
width: 01780px;
height: 100%;
z-index: 11;
}

allan

I would suggest setting the div.DTE_Field field to width:49% and float:left. Setting the input elements isn't going to be much use there I think.

Allan

stefan_o

well Allan,
your sugestion seems to be exactly the path I took!! Didn't I ?

Please analyse my source-code-snippet... (as posted above)

allan

Doesn't look like it. You used div.DTE_Field input, ... {}. I suggested simply using div.DTE_Field {}.

Allan

stefan_o

Ah, yes, thanks Allan!

stefan_o

Hi Allan, I tried several times, but somehow cannot make it.

style="width:48%; float:left"

does not do the trick. No matter where and how I apply them.

Is there a line break inside the default-css preventing the float:left to apply?

Could I ask you for a demo on how to style the popup-editor to accieve two columns?

.

allan

You would need to remove the default CSS of padding: 5px 20% and clear: both; on the DTE_Field class.

This is what I've just tried and it works okay:

div.DTE_Body div.DTE_Body_Content div.DTE_Field {
  position: relative;
  padding: 5px 0;
  border: 1px solid transparent;
  width: 49%;
  float: left;
}

Allan

stefan_o

Thank you Allan, that was very helpful indeed.

best Stefan