Front end Editor

  • Print

Without any additional styles the front end editor page looks like the following.

 

Frontend editor zonder aanvullende stijling

 

Structure with classes and id's


div.componentheading
form
fieldset
table.adminform
td div (float:left;) label Titel:input.inputbox id=titleVoorpagina artikel 1
td div (float:right) button Opslaan button Annuleer
textarea.mce_editable#text height:400px; Content tekst div#editor-xtd-buttons div.button2-left div.image a.modal-button Afbeelding
div.button2-left div.pagebreak a.modal-button Nieuwe pagina
div.button2-left div.readmore a Lees meer
fieldset
table.adminform
td.key label Sectie:
td select.inputbox#sectionid
td.key label Categorie:
td select.inputbox#catid
td.key label Gepubliceerd:
td input#state0 label Nee input#state1 label Ja
td.key label Toon op voorpagina:
input#frontpage0 label Nee input#frontpage1 label Ja
td.key label Auteur alias:
td input.inputbox#created_by_alias
td.key label Start publiceren:
td input.inputbox#publish_up img.calendar#publish_up_img calendar.png
td.key label Stop publiceren:
td input.inputbox#publish_down img.calendar#publish_down_img calendar.png
td.key label Toegangsniveau:
td select.inputbox#access
td.key label Sortering:
td select.inputbox#ordering
fieldset
table.adminform
td.key label Beschrijving:
td textarea.inputbox#metadesc (width:500px; height:120px)
td.key label Trefwoorden:
td textarea.inputbox#metakey (stijl: width:500px; height:50px)

 

CSS

 

fieldset {}

fieldset legend {
   color: #660000;
   padding: 10px 0 10px 0;
   font-weight: bold;
}

table.adminform {
   margin-bottom: 10px;
}

table.adminform td {}
table.adminform td.key { }

input#title {}

textarea.mce_editable= { }
textarea#text {}

div#editor-xtd-buttons { }

div.button2-left {
   float: left;
   margin: 5px 15px 10px 0;
}

div.button2-left div a,
div.button2-left div a:visited {
   font-weight: bold;
}

div.button2-left div a:hover {
   font-weight: bold;
}

div.image { }
a.modal-button { }

select#sectionid { }
select#catid { }

input#state0 { }
input#state1 { }
input#frontpage0 { }
input#frontpage1 { }
input#created_by_alias { } 
input#publish_up { }
img#publish_up_img { }
input#publish_down { }
img#publish_down_img { }
select#access { }
select#ordering { }

table.adminform td textarea#metadesc { }
table.adminform td textarea#metakey { }
}

 

Read More (hr#system-readmore)

 

hr#system-readmore {
   border: red dashed 1px;
   color: red;
}

 

Pagebreak (hr#system-pagebreak)


hr.system-pagebreak {
   border: gray dashed 1px;
   color: gray;
}

 

Print screen after applying CSS

 

Frontend editor na stijling

Comments (0)
Post a commment or ask a question!
Your Contact Details:
Comment:
Security
Please input the anti-spam code that you can read in the image.