- Joomla Version
- J5
- PHP Version
- PHP 8.2.x
- Hoster
- fc-hosting
- Link (URL) zur Seite mit dem Problem
- hiip://j5.vet-osteo-mertens.eu
Infobutton soll Fenster mit Rahmen öffnen
- Applemus
- Erledigt
-
-
So, jetzt wieder Link berichtigt http://j5.vet-osteo-mertens.eu/
im Pagebuilder steht am dazu folgende Button - Auswahlmöglichkeiten. Was muß ich hier wählen, um eine Textbox, möglichst mit Rahmen zu bekommen?
Wie in den anderen Threads schon angemerkt: Kenne Pagebuilder nicht. Aber:
Zitatum eine Textbox, möglichst mit Rahmen zu bekommen?
Bei dem button Info gibt es einen Rahmen!
Nur den sieht man nicht:
weil der border die gleiche Farbe hat wie der Hintergrund.
Möglichkeit mit CSS (custom.css) wäre (nur als Beispiel):
was immer Du da ändern möchtest.
Liebe Grüße
Christine
-
Nein, nein, ich will nicht den Button ändern, sondern nach dem Klick sollte eine Box mit erläuterndem Text sich öffnen.
-
Sowas macht man mit Bootstrap.
Füge diesen Code zum Test in einen Beitrag ein:
Code
Alles anzeigen<!-- Beispiel zum Einfügen eines POP-UP-Fenster mit Text und Button zum schliessen --> <h2>Beispiel für ein POP-Up-Fenster</h2> <p>Zusätzlicher Text noch vor dem Button.</p> <p><a href="#modal-example" class="btn btn-sm btn-primary" uk-toggle>Modal Box</a></p> <!-- Beginn Inhalt POP-UP-Fenster --> <div id="modal-example" uk-modal> <div class="uk-modal-dialog uk-modal-body"><br /> <h2 class="uk-modal-title">Titeltext</h2> <p>Beispiel für den Inhalt einer Modalbox, die im Beitrag oder auch einem Modul platziert werden kann!</p> <p class="uk-text-right"> <button type="button" class="uk-button uk-button-default uk-modal-close">schließen</button> </p> </div> </div> <!-- Code Ende -->
Rest erklärt sich dann eigentlich von selbst.
Hier Link zu Bootstrap:
ButtonsUse Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.getbootstrap.com -
Vielen Dank, Dirk!
Es geht. ich habe nur noch einige Probleme. Wenn Du den Infolink betätigst, öffnet sich ein Fenster. Dort ist der Text.
Wie kann ich die Hintergrundfarbe des Fensters verändern?
Wie kann ich die Schriftfarbe verändern?
Wie kann ich die Inhalte unter der Überschrift bis zu Textblock löschen?
Ps.
Ich habe einen Blick auf die Bootstrap - Buttons geworfen - spanische Dörfer, spanische Dörfer
-
'Hat wer eine Idee?
-
Vielen Dank, Dirk!
Es geht. ich habe nur noch einige Probleme. Wenn Du den Infolink betätigst, öffnet sich ein Fenster. Dort ist der Text.
Wie kann ich die Hintergrundfarbe des Fensters verändern?
Wie kann ich die Schriftfarbe verändern?
Wie kann ich die Inhalte unter der Überschrift bis zu Textblock löschen?
Ps.
Ich habe einen Blick auf die Bootstrap - Buttons geworfen - spanische Dörfer, spanische Dörfer
Das machst du mit CSS in deiner custom.css.
Beispiel:
CSS
Alles anzeigen.uk-modal-dialog { position: relative; box-sizing: border-box; margin: 0 auto; width: 600px; max-width: 100% !important; background: #84c68b; opacity: 0; transform: translateY(-100px); transition: 0.3s linear; transition-property: all; transition-property: opacity, transform; }
Die Werte nach eigenen Wunsch anpassen (backround mal ausprobieren, ist jetzt z.B. hellgrün).
Du musst das einfach ausprobieren und wie schön öfter geschrieben "befasse dich mit css".
-
Hallo Dirk,
leider funktioniert es nicht. Ich habe bei der Webseite eine custom.css eingerichtet und den Code dort hinein kopiert, Es tut sich nichts.
zu sehen unter: j5.vet-osteo-mertens.eu unter Was ist Osteopathie und dort Info
-
Ich habe mit dem gleichen Code eine zweite Modalbox angelegt. Kann das für den Ausfall verantwortlich sein?
-
Also ich sehe keine Modalbox die sich bei Info anklicken öffnet.
Der Code aus #4 ist doch gar nicht vorhanden? Ich glaube du hast es nicht richtig verstanden.
Code aus #4 ist als Code in einem Beitrag oder eigenen Modul zu verwenden.
Die CSS Angaben greifen sonst nicht.
Mach doch erst mal den Code in ein Modul oder einen Beitrag.
Dann gib uns einen Link um zu schauen, wie der CSS Code angepasst werden muss.
-
Hallo Ihr 2,
glaube es geht um diesen Link:
Dieser ist zurzeit ziemlich dunkel.
Probiere in die custom.css (hab da rosa background genommen):
Liebe Grüße
Christine
-
Ok, danke Christine.
K.A. was da nicht funktioniert soll.
Hab den Code aus #4 auch zum Test mit Cassiopeia im Beitrag eingefügt und das Modalfenster wird problemlos angezeigt.
-
Code aus #4 ist als Code in einem Beitrag oder eigenen Modul zu verwenden.
Er wurde in die custom.css geschrieben:
-
Ich versteh das nicht.
In #4 habe ich den Code für den Beitrag genannt.
Die custom code greift doch erst wenn im Beitrag ein Modal-Code eingefügt wurde.
-
Hier eigentlich sehr verständlich erklärt:
Modalboxen ohne Javascript - computer.daten.netze :: feenders.de - berlin
-
Hallo!
Ich habe nun mit Dirks #4 Code und Christines Customer -Code ein vorzeigbares Ergebnis bekommen. Wünschenswert wären noch einige Änderungen., so
a) die Zeile Autor, Kategorie, Datum etc. soll weg
b) Rating soll weg
c) Related Articles soll weg
Weiß wer einen Weg?
-
Weiß wer einen Weg?
Dieser ist recht informativ:
Helix Framework - Documentationwww.joomshaper.comDennoch:
a) die Zeile Autor, Kategorie, Datum etc. soll weg
- Stellst du in den Beitrags-Optionen ein, bzw. übergeordnet im Menüpunkt:
b) Rating soll weg
- Das in die custom.css
c) Related Articles soll weg
- Lösche dazu das Feld in den Template-Optionen bei Blog, oder deaktiviere es: