Linie(nblock) um Blöcke zu trennen

[SG01662]

Hallo, kurze Frage: Gibt es einen Block (ich finde keinen) den mal als Linie zwischen andere Blöcke schieben kann, um eine Abfolge von Blöcken mit einer andersfarbigen Linie optisch voneinander zu trennen? Danke für Hinweis im voraus.

PS: Vielleicht gibt es ja auch ein anderes "Boardmittel" um diesen Effekt zu generieren.

[Tommy Herrmann]

Moin,

es gibt keinen Block, der nur eine Linie hat.

Eine Linie kann man mit dem Tag <hr> (horizontal rule) an beliebiger Stelle einfügen:

https://www.w3schools.com/tags/tag_hr.asp

… oder - wahrscheinlich ist es das, was bei Dir passt - Du gibst dem Block im "Code Editor" im Bereich "CSS Editor" eine obere Border.

Beispiel einer weißen Border-Kante oben am Block in 2px Breite:

Code: Alles auswählen

border-top: 2px solid #ffffff;

[SG01662]

Besten Dank!

[Volker]

Füge einfach einen HTML Block an die Stelle wo Du eine Linie haben möchtest.
Da fügst Du dann den Code ein:

Code: Alles auswählen

<hr size="10">

size gibt die Strichstärke an, also wie hoch die Linie sein soll.

Oder aber auch so :

Code: Alles auswählen

<hr style="border:dashed #00ff00 1px;
background-color:#aa0000;height:15px;">

Da sind Hintergrund, Linienfarbe und Stärke eben änderbar. Hier z.B. gepunktete Linie

Kannst hier nachlesen was alles geht:

http://www.css4you.de/trickkiste/tr00007.html

[Volker]

Ich habe mal einen Versuch gemacht, so einen Block selber zu erstellen.
Leider bin ich an der Linien Dicke gescheitert. Die kann ich zwar einstellen, aber leider nicht mit der CSS an den HR Tag weitergeben.

Also habe ich einfach einen Block genommen bei dem man die Linienfarbe und Hintergrundfarbe einstellen kann, sowie die Abstände des Blocks nach oben und unten. Die Farbe der Linie kann man zwar ändern, aber immer nur in der sehr dünnen Ausführung.

https://fotoschulungen.com/content6_2.zip

Ist ein M5 Block und wurde von mir umbenannt in teiler. Heisst aber immer noch content6_2 in Mobirise

[Tommy Herrmann]

Moin,

leider erscheint Dein Userblock bei mir nicht in meinem Standard-Thema "Mobirise5".

Hatten wir das nicht schon mal, dass man keine Userblöcke umbenennen darf, wenn man diese weitergeben will.

Das steht in der Javascript-Datei von Dir:

"themeName": "mobirise5",
"parent": "content6",
"blockName": "content6_2",
"mediaPaths": "[]",
"isUserblock": "true",
"customName": "teiler"

Man kann das mit einem <hr> Element machen, wie ich bereits oben geschrieben hatte, dann sitzt aber eben die Linie nicht ganz außen, wie bei einer Border.

Die Border ist zur Trennung von Blöcken schon der richtige Weg. Außerdem geht eine Border dann auch immer über die gesamte Display-Breite (ohne das voreingestellte Padding).

Leider bin ich an der Linien Dicke gescheitert. Die kann ich zwar einstellen, aber leider nicht mit der CSS an den HR Tag weitergeben.

Einem <hr> Tag gibt man dann ein CSS oder auch als CSS-Class, wie auf meiner Beispielseite hier:

https://www.mobirise-tutorials.com/Tutorials-3/#Vorwort

Farbe:
Deckkraft:
Höhe:
Breite:

Code: Alles auswählen

hr {
  background-color: #ff0000;
  opacity: 0.8;
  height: 10px;
  width: 100%;
}

mit der Höhe (height) wird die Dicke von der Linie bestimmt.

Im Screenshot das Ergebnis der CSS von diesem <hr> Element:

[Volker]

[Tommy Herrmann]

ja - warum nicht

... kannst Dir natürlich dafür auch einen Block erstellen.

Das ist aber genau das Gleiche, dann kannst Du doch die Border auch gleich an denjenigen Block setzen, den es betrifft.

Übrigens die Farbcodes kann man sich doch einfach am Color-Picker von Mobirise kopieren oder auch einen der unzähligen Generatoren dafür verwenden:

https://www.hexcolortool.com/

[Tommy Herrmann]

Volker,

habe das gerade mal mit einem neuen "input" Feld für die Breite der Border ausprobiert.

Dafür habe ich einen neue Variable so benannt:

@myWidth

Keine Ahnung, ob das so richtig ist - aber was geht ist ja immer richtig

Das in den "HTML Editor", oben bei den Mobirise-Parametern:

Code: Alles auswählen

<input type="range" name="myWidth" title="Border-Breite" min="1" max="50" value="5" step="1">

… und das in den "CSS Editor":

Code: Alles auswählen

border-top: (@myWidth * 1px) solid #ff0000;

Dann hast Du einen "Schieber" mit dem Namen "Border-Breite" und kannst die Breite darüber regeln.

Deine Variable für die ausgewählte Farbe kannst Du ja anstelle des Hex-Farbcodes dann auch noch da eintragen.

[Volker]

Super !!!

Das geht ja klasse.



Hier der Code für den Block:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content">
    <mbr-parameters>
     
   
        
        <input type="color" name="lineColor" title="Border Farbe" value="#2299aa">
        
     <input type="range" name="myWidth" title="Border-Breite" min="1" max="50" value="9" step="1">
        
    </mbr-parameters>
  
</section>

Und der CSS:

Code: Alles auswählen

border-top: (@myWidth * 1px) solid @lineColor;

[Volker]

Anstelle eines Border kann man nun auch eine HR nehmen. Vorteil hier ist das man die Hintergrundfarbe anpassen kann und auch andere Designs wählen ( Werde ich noch ein Video zu machen )

Aber hier mal der Code für den HR Eigenbau:

Code Editor HTML Teil :

Code: Alles auswählen

<section data-bs-version="5.1" class="content6" group="Content">
    <mbr-parameters>
        <header>HR Eigenbau</header>
       
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="4">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="3">
       
        
        
        <input type="range" name="myWidth" title="Linien-Breite" min="1" max="50" value="17" step="1">
        
        <input type="color" name="lineColor" title="Color" value="#f50000">
        <header>Background</header>
        <input type="color" title="Color" name="bgColor" value="#ffffff">
    </mbr-parameters>
    
              
                <hr class="line">
  
</section>

CSS Teil:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
.line {
  background-color: @lineColor;
  align: center;
  height: 2px;
  margin: 0 auto;
  border-top: (@myWidth * 1px) solid @lineColor;
}

[Volker]

Hallo Tommy, alter CSS Gott

Ich möchte noch die 3 Styles an die Horizontale Linie bringen.
Hab ich mittels Auswahlfelder in die Section geschrieben :

Nun brauche ich die entsprechende CSS dafür und brauche Deine Hilfe

Hier der Code wie ich ihn in Mobirise habe:

Code: Alles auswählen

 <select title="HRDesign" name="hrstyle">
        <option value="dashed">dashed</option>
        <option value="dotted">dotted</option>
        <option value="double" selected>double</option>

Es muss also noch das Attribut für gestrichelt , gepunktet und doppelt in die CSS. Mir fehlt wie immer der Plan

[Tommy Herrmann]

ha - supi -

… habe heute keine Zeit mehr das zu testen, die Attribute findest Du aber hier:

https://www.w3schools.com/css/css_border.asp

Du müsstest also für den Style der Border noch eine Variable gründen (anstelle von "solid")




Ich habe nun noch ein Tutorial zur Erweiterung der Toolbox von Mobirise geschrieben. Im Prinzip kann man das beliebig ausbauen und so alle möglichen Parameter hinzufügen.

https://www.mobirise-tutorials.com/Tuto ... odify.html

Das wollte ich schon lange mal machen, denn ich habe schon vor Jahren den einen oder anderen Parameter für mich persönlich angepasst.

[Volker]

Na dann warte ich mal bis Du Zeit hast

Ich und CSS

Theoretisch weiß ich das, aber ich bin zu doof das umzusetzen.

Ich brauche also Werte für die Farbe, Dicke der Linie und eben ob Solid oder dottert oder gestrichelt usw.

Das klappt so leider nicht. Da musst Du ran

hrcss.png (9.6 KiB) 164 mal betrachtet

[Tommy Herrmann]

Moin,

also da fehlen mir auch die Kenntnisse

Ich kann zwar eine Auswahl-Option schaffen, die dann auch in der Tool-Box dargestellt wird, wie z.B.:

Code: Alles auswählen

        <select title="Size" name="borderType">
            <option value="1" selected>Solid</option>
            <option value="2">Double</option>
            <option value="3">Dotted</option>
            <option value="4">Dashed</option>
        </select>

… habe aber gerade keine Ahnung, wie ich das dann anwenden kann.

Jetzt steht dort ja:

Code: Alles auswählen

border-top: (@myWidth * 1px) solid @lineColor;

Sobald ich das Attribut "solid" mit @borderType als Variable ersetze, wird nichts mehr angezeigt. Man müsste da vielleicht über "IF" (Wenn) gehen, aber auch hier bekomme ich den korrekten Syntax nicht hin.

Im Prinzip ist das aber auch alles Quatsch, wozu soll das in der Toolbox überhaupt gut sein, wenn ich die Anweisung für meine gewünschte Border einfach in den CSS-Editor schreiben kann

Du könntest doch für eine "dashed" (gestrichelte) Border dann eben schreiben:

Code: Alles auswählen

border-top: (@myWidth * 1px) dashed @lineColor;

Wahrscheinlich müsste man da wieder mit JavaScript ran ...

[Volker]

Hast hier mal geschaut ?

https://mobirise.com/docs/

Wäre halt cool wenn wir sowas hin bekommen würden

Natürlich kann man alles von Hand in den Code schreiben, als Block wär es eben eleganter

[Tommy Herrmann]

Sorry,

bekomme es nicht hin.

Habe gerade mal im Hersteller-Forum gefragt:

https://forums.mobirise.com/discussion/ ... toolbox/p1


Ich habe es jetzt mal mit "Radio" Buttons versucht. Das gleiche Problem.

Code: Alles auswählen

        <input type="radio" title="Solid" name="myType" value="solid">
        <input type="radio" title="Dotted" name="myType" value="dotted" checked>

Dabei sollte eigentlich der name="myType" dann die Werte als Variable liefern, also so:

Code: Alles auswählen

border-top: (@myWidth * 1px) solid @lineColor;
border-style: @myType;

so geht es:

Code: Alles auswählen

border-top: (@myWidth * 1px) solid @lineColor;
border-style: dotted;

[Tommy Herrmann]

Ich glaube ich habe es geschafft

... warte (dauert noch etwas)

[Tommy Herrmann]

Ich werde das noch zu meinem Tutorial hinzufügen.



HTML:

Code: Alles auswählen

        <!-- 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">Solid</option>
            <option value="double">Double</option>
            <option value="dotted">Dotted</option>
            <option value="dashed" selected>Dashed</option>
         </select>

         <!-- End EDIT Tommy - input fields added -->

CSS:

Code: Alles auswählen

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;
}

[Tommy Herrmann]

… habe mein Tutorial und mein Video neu erstellt:

https://www.mobirise-tutorials.com/Tuto ... odify.html