Mobirise-Tutorials.com

Forum für Mobirise und NOF
https://mobirise-tutorials.com/Forum/

Linie(nblock) um Blöcke zu trennen

https://mobirise-tutorials.com/Forum/viewtopic.php?t=1452

Seite 1 von 2

Linie(nblock) um Blöcke zu trennen

Verfasst: Do 2. Mai 2024, 10:41
von 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.

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Do 2. Mai 2024, 10:53
von 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;

Border als Linie oben.jpg

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Do 2. Mai 2024, 10:55
von SG01662
Besten Dank!

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Sa 4. Mai 2024, 17:12
von 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

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Sa 4. Mai 2024, 23:14
von 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.
teiler.png
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

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 04:06
von 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:

Volkers Userblock hat geschrieben:
"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).


Volker hat geschrieben: Sa 4. Mai 2024, 23:14 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:

horizontal rule-hr.jpg

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 11:20
von Volker

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 11:32
von Tommy Herrmann
ja - warum nicht :tu:

... 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/

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 12:08
von 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 :D

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.

Neues Eingabefeld als Regeler für Border-Breite.jpg


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

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 12:23
von 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;

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 12:51
von 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;
}

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 13:25
von Volker
Hallo Tommy, alter CSS Gott :D

Ich möchte noch die 3 Styles an die Horizontale Linie bringen.
Hab ich mittels Auswahlfelder in die Section geschrieben :
hrstyle.png
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 :angst:

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 14:10
von Tommy Herrmann
ha - supi - :tu:

… 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.

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: So 5. Mai 2024, 15:40
von Volker
Na dann warte ich mal bis Du Zeit hast :D

Ich und CSS :lachtot:

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 :D
hrcss.png
hrcss.png (9.6 KiB) 2917 mal betrachtet

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Mo 6. Mai 2024, 06:02
von Tommy Herrmann
Moin,

also da fehlen mir auch die Kenntnisse :crying:

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 :eek:

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 ...

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Mo 6. Mai 2024, 07:41
von 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 :D

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Mo 6. Mai 2024, 11:03
von 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;

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Mo 6. Mai 2024, 12:28
von Tommy Herrmann
Ich glaube ich habe es geschafft :D

... warte (dauert noch etwas)

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Mo 6. Mai 2024, 12:37
von 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;
}

Re: Linie(nblock) um Blöcke zu trennen

Verfasst: Mo 6. Mai 2024, 13:35
von Tommy Herrmann
… habe mein Tutorial und mein Video neu erstellt:

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

Alle Zeiten sind UTC+02:00
Seite 1 von 2

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de