Submit Button gestalten

Transwatt
Autor
Offline

Mehr

1 Jahr 3 Monate her #9681 von Transwatt

Submit Button gestalten wurde erstellt von Transwatt

Hallo!

Wie kann ich den SubmitButton deutlicher gestalten?
Per CSS Klasse, scheint es nicht zu gehen.
In der Dokumentation, steht nicht editierbar.
Aber so wie im Screen, eindeutig nicht schön...
Einen Rahmen, habe ich per CSS hinzugefügt, wird auch beim Laden gezeigt, aber sobald die Seite komplett geladen ist, ist der nicht mehr zu sehen.

Anhänge:

Administrator AV
Offline

Mehr

1 Jahr 3 Monate her #9684 von Administrator AV

Administrator AV antwortete auf Submit Button gestalten

Hallo Transwatt,Um dir zu helfen brauchen wir zumindest die folgenden Informationen:
- welches UI-Framework dein Template verwendet,
- welches UI-Framework in Visforms eingestellt ist
(Formular-Konfiguration, Reiter ‘Erweitert’, Gruppe ‘Layout’),
- welches Sublayout in Visforms eingestellt ist, falls vorhanden
(Formular-Konfiguration, Reiter ‘Erweitert’, Gruppe ‘Layout’),
- ein Link zum Formular wäre sehr hilfreich.Die Einstellung des UI-Frameworks in Visforms muss zum UI-Framework passen, das dein Template verwendet.
Visforms passt sich an das gewählte UI-Framework an, indem es das passende und minimal notwendige HTML rendert.Es ist Aufgabe des Templates, die Anzeige zu steuern und auch responsiv zu reagieren.
Optimale Ergebnisse werden dann erzielt, wenn das verwendete Template das UI-Framework vollständig und sauber umsetzt.Die obigen Einstellungen werden in der Dokumentation beschrieben.
Layout-Konfiguration:
[url] docs.joomla-4.visforms.vi-solutions.de/d...ayout-configuration/ [/url]
Subscription Layouts:
[url] docs.joomla-4.visforms.vi-solutions.de/d...ubscription/layouts/ [/url]

Herzliche Grüße,
Aicha

I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-)

Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-)

Transwatt
Autor
Offline

Mehr

1 Jahr 3 Monate her #9685 von Transwatt

Transwatt antwortete auf Submit Button gestalten

Hallo!

Erstmal danke für die schnelle Antwort.
www.joomlaplates.com/power-joomla-template.html
Das ist das Thema
UI Framework ist Boostrap 3
Template nutzt Astroid
Sublayout in VIForms ist momentan auf Individuell.
Andere getestet, bleibt gleich.
www.transwatt.de/kontakt.html?view=artic...akt&catid=14:kontakt
betrifft auch das RMA Formular:
www.transwatt.de/kontakt/rma-ruecksendeschein.html

Hoffe das ist alles, was Ihr braucht...
Werde mir aber auch Eure Links ansehen.

cu und Danke schonmal

Administrator AV
Offline

Mehr

1 Jahr 3 Monate her #9686 von Administrator AV

Administrator AV antwortete auf Submit Button gestalten

Hallo Transwatt,
die von dir gesetzten Klassen kommen im Quellcode an.
Einmal 'Rahmen' und ein mal 'boarder'.
Custom CSS, das du hinzugefügt hast, um Elemente, die diese Klassen enthalten zu Stylen, gibt es im CSS wie es von deiner Webseite ausgeliefert wird aber nicht.

Hast du denn für Visforms über das Visforms Dashboard >> CSS bearbeiten eine custom.css angelegt?
Oder wo sonst hast du dein Custom CSS hin geschrieben?
Und wie genau sieht dein Custom CSS aus?

Gruß,
Aicha

Transwatt
Autor
Offline

Mehr

1 Jahr 3 Monate her #9689 von Transwatt

Transwatt antwortete auf Submit Button gestalten

Hallo!

Habe die Dateien per FTP angelegt.
Sind allerdings im Dashboard zu sehen.
Es steht nur der boarder Style drinnen.
Den kann ich aber inzwischen entfernen.
Das Problem, habe ich mit dem Template behoben.

Geht mir nur um den Senden und zurück setzen Button unten.

vielen Dank für Eure Hilfe schonmal!

Anhänge:

Administrator AV
Offline

Mehr

1 Jahr 3 Monate her #9690 von Administrator AV

Administrator AV antwortete auf Submit Button gestalten

Hallo Transwatt,

danke für die Screenshots.

Mit einer Rahmen.css kann Visforms leider nichts anfangen.
Visforms braucht ein Erkennungsmerkmal um zu wissen, welches die Datei mit dem custom CSS ist.
Das wird über einen erwarteten festen Teil im Dateinamen geregelt.

Siehe Dokumentation:
docs.joomla-4.visforms.vi-solutions.de/d...in-datei-hinterlegen
Zitat:

Hinweis: Ihre eigenen CSS-Dateien müssen die Zeichenkette "custom" im Dateinamen haben, damit diese automatisch eingebunden werden.

Die Datei muss also z.B. Rahmen-custom.css heißen.

Dein Template gibt vor, dass Elemente mit der Klasse .btn so aussehen sollen, wie sie bei dir aussehen.

Code:

.btn, div.jd-register-login-wrapper .jd-register-login-box .jd-button-control .jd-form-button {
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Also zuerst wird die Variable --bs-btn-bg auf transparent gesetzt und dann wird der Button-Backgroundüber background-color auf diese 'Farbe' gesetzt.

Wenn du in einer Visforms custom.css z.B. folgendes CSS verwendest, dann sollt der Button eine andere Hintergundfarbe bekommen.
Statt 'gwünschte Farbe' z.B. den entsprechenden Hexwert (beginnt mit einen #) eintragen.

Code:

.btn.Rahmen {
background-color: gewünschte Farbe
}

Herzliche Grüße,
Aicha

Moderatoren: Administrator AV, Administrator IV

Joomla 5 Mitteilung

Forum

Submit Button gestalten

Visforms Subscription

Visforms Erweiterungen