 Joomla frontend editor css stijlen
Wanneer u ingelogd bent via het frontend van de website kunt u een artikel aanpassen. U kunt hier stijlen aanpassen aan uw wensen. Wanneer u uw template hebt gekoppeld aan de editor dan zullen de standaard editor stijlen vervallen. Daarvoor in de plaats krijgt u uw eigen stijlen in de editor terug.
De editor ziet er als volgt uit.
De structuur
div.componentheading
form
fieldset
table.adminform
td div (float:left;) label Titel: input.inputbox id="title" Voorpagina 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")
Stijlen
We zullen in de voorbeeld website een aantal stijlen toepassen. Er zijn echter ook inline stijlen, die we in de template.css niet kunnen overschrijven. Zo is de textarea bij de metadata te breed voor het contentgebied van de voorbeeld website. De inline stijl is echter gezet op 500px breedte. Dit kunnen we zonder de bronbestanden aan te passen niet wijzigen. We geven hier een overzicht van alle stijlen, waarbij een aantal is ingevuld.
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)
In de standard editor van Joomla is de read-more stijl gedefiniëerd in templates/system/css/editor.css. Wijzig deze stijl niet in dit bestand, maar overschrijf deze stijl in uw css template bestand.
hr#system-readmore {
border: red dashed 1px;
color: red;
}
Deze wijziging heeft alleen invloed op de wijze waarop de horizontale ruler wordt gepresenteerd in de editor. Voor het frontend van de website heeft dit geen invloed.
Pagebreak (hr#system-pagebreak)
Het bovenstaande geldt ook voor de pagebreak.
hr.system-pagebreak {
border: gray dashed 1px;
color: gray;
}
Na stijling ziet de editor er als volgt uit.
|