Neue Felder für eine Border im Code Editor
Video Description
Hier habe ich beispielhaft die Toolbox (Werkzeuge) eines Mobirise-Blocks erweitert.
Ich habe eine obere Border zu diesem Textblock hinzugefügt und die Einstellungen für Breite, Farbe und Stil der Border in der Toolbox integriert.
Dafür habe ich drei Variablen erstellt.
Für die Breite und die Farbe jeweils Eingabefelder <input> und für den Stil der Border ein Auswahlfeld <select>, welche ich in den Mobirise-Parametern des "Code Editors" platziert habe. Dies muss vor dem Eintragen des CSS-Codes in den Bereich "CSS Editor" erfolgen, da die Variablen zuvor bereits definiert sein müssen, um Fehlermeldungen bei der Verwendung der Variablen zu vermeiden.
<!-- Start EDIT Tommy - input fields added -->
<header>Border</header>
<input type="range" name="myWidth" title="Border Width" min="1" max="50" value="8" step="1">
<input type="color" title="Border Color" name="lineColor" value="#e43f3f">
<select title="Border Style" name="myStyle">
<option value="solid" selected>Solid</option>
<option value="double">Double</option>
<option value="dotted">Dotted</option>
<option value="dashed">Dashed</option>
</select>
<!-- End EDIT Tommy - input fields added -->
Anschließend habe ich diese @Variablen in den "CSS Editor" des "Code Editors" kopiert. Bitte beachtet auch den unten stehenden Screenshot, bei dem ich diese Codes rot markiert habe. Mit der Bedingung & when wird die Variable @myStyle nach ihrem Wert (value) aus dem Auswahlfeld <select> abgefragt.
border-top: (@myWidth * 1px) @lineColor;
& when (@myStyle = 'solid') {
border-style: solid;
}
& when (@myStyle = 'double') {
border-style: double;
}
& when (@myStyle = 'dotted') {
border-style: dotted;
}
& when (@myStyle = 'dashed') {
border-style: dashed;
}
Natürlich könnt ihr auch eine andere Border verwenden, wie z.B. "border-bottom:" (Border unten), "border-left:" (Border links), "border-right:" (Border rechts) oder eben nur "border:" (rund herum) wie beispielhaft bei diesem Block. Hier habe ich auch noch den Stil "ridge" (Grat) hinzugefügt, also so:
<select title="Border Style" name="myStyle">
<option value="solid">Solid</option>
<option value="ridge" selected>Ridge</option>
</select>
Das CSS würde dann eben hierfür so aussehen, also nur "border" mit dieser zusätzlichen & when Bedingung für den Stil "ridge".
border: (@myWidth * 1px) @lineColor;
& when (@myStyle = 'ridge') {
border-style: ridge;
}
Neue Felder für eine Border im Code Editor
Ansicht der erweiterten Toolbox für die Border