Upload-Button custom
Eingetragen von simon.b (65)am 28.06.2018 - 17:53 Uhr in
Gibt es eine möglichkeit bei Drupal 8 das Hochladen-Button zu personalisieren? das mitgelieferte von Drupal selber ist ja Betriebsystemabhängig.. wie löst ihr sowas?
- Anmelden oder Registrieren um Kommentare zu schreiben
Mit einem Theme und CSS lösen
am 30.06.2018 - 17:55 Uhr
Mit einem Theme und CSS lösen wir sowas.
Tut mir leid, aber das glaube
am 30.06.2018 - 22:17 Uhr
Tut mir leid, aber das glaube ich dir nicht.. mit CSS ist es unmöglich das Durchsuchen-Upload zu stylen.. ich benutze auch ein Bootstrap3-Theme, es ist definitiv nicht möglich, hast du schon Mal ein Upload Button mit CSS gestylt? Hast du sowas tatsächlich gelöst??
Ich dachte erstmal auch, ich bekomme es so gelöst.. Fail! Ich rate dir mal bei Drupal 8 nen Kontaktformular zu erstellen, da das Upload-Feld einzusetzen und dann sag mir ob du es schaffst das Upload Button mit CSS zu stylen ... das einzige was ich mir Vorstellen könnte ist eine Javascriptlösung, da habe ich aber keine Ahnung und konnte such nichts fertiges finden was auch mit Drupal 8 klappen könnte!
Um welchen Button gehts dir
am 30.06.2018 - 22:26 Uhr
Warte ich aktualisiere diesen Kommentar kurz. Du meinst sicher diesen Button
https://codepen.io/joe-watkins/pen/EajrOO
Selbst wenn du hier im Forum
am 30.06.2018 - 22:30 Uhr
Selbst wenn du hier im Forum eine Datei anhängen möchtest, wo "Datei auswählen" steht, dieser Button meine ich, hol die Entwickler-Werkzeug-Konsole deines Browser und versuch es, du wirst leider kein Erfolg haben, und das nervt mich das Drupal keine bessere Lösung bietet!
Mit Markup und CSS kann man
am 30.06.2018 - 22:30 Uhr
Mit Markup und CSS kann man schon viel tricksen. Z. B. https://blog.benestudio.co/custom-file-upload-button-with-pure-css-5aacf...
Es kommt dann eher darauf an in welchem Formular du es anwenden möchtest. Da müsstest du ein hook_form_alter implementieren. Ansonsten gibt es noch verschiedene Javascript Bibliotheken, die ähnliche Funktionalitäten bereitstellen.
Ja, das ist genau der Knopf
am 30.06.2018 - 22:33 Uhr
Ja, das ist genau der Knopf aus dem Codepen-Beispiel. Du musst doch nur den Code in dein Theme schreiben und dem Button entsprechend die richtigen pseudoklassen zuweisen. Hast du denn den Developer Mode in deinem Theme aktiviert? Ohne den ist das in der Tat ein ganz schönes gefreickel. Aber dafür ist er ja da.
Zman schrieb Da müsstest du
am 30.06.2018 - 22:35 Uhr
Da müsstest du ein hook_form_alter implementieren. Ansonsten gibt es noch verschiedene Javascript Bibliotheken, die ähnliche Funktionalitäten bereitstellen.
ich bin langsam in ein punkt gekommen, wo mir custom html in twig dateien und scss/css mir nicht mehr weiterhelfen.. mit solche hooks von drupal kann ich noch nicht richtig umgehen, ich weiß, wenn ich es drauf hätte könnte ich einiges schneller lösen .. um mit drupal 100% alles zu können muss man damit umgehen klar, ich merke meine grenzen und das sind Wohl die einzigen Wege... von JavaScript habe ich leider auch nicht viel Ahnung
Zman schriebDa müsstest du
am 30.06.2018 - 22:36 Uhr
sorry, doppelpost, kann gelöscht werden
dinmikkith schrieb Hast du
am 30.06.2018 - 22:38 Uhr
Hast du denn den Developer Mode in deinem Theme aktiviert? Ohne den ist das in der Tat ein ganz schönes gefreickel. Aber dafür ist er ja da.
meinst du Devel, ja der ist aktiviert.. mein ganzes Theme habe ich in ein Monat fertig gemacht (Bootstrap) sind nur noch solche Kleinigkeiten.. ich werde es auf jeden Fall mit dem code versuchen und berichten
Dann mach aus SCSS einfach
am 30.06.2018 - 22:43 Uhr
Dann mach aus SCSS einfach CSS
input[type=file] {
cursor: pointer !important;
}
input[type=file]::-webkit-file-upload-button {
background: #E62163;
border: 0;
padding: 1em 2em;
cursor: pointer;
color: #fff;
border-radius: 0.2em;
}
input[type=file]::-ms-browse {
background: #E62163;
border: 0;
padding: 1em 2em;
cursor: pointer;
color: #fff;
border-radius: 0.2em;
}
body {
margin: 2em;
background: #292931;
font-family: "Arimo", sans-serif;
color: #fff;
}
hr {
opacity: 0.3;
margin: 2em 0;
}
Und das schreibst du dir in das Style-Sheet deines Themes
Nein ich meine nicht Devel,
am 30.06.2018 - 22:47 Uhr
Nein ich meine nicht Devel, ich meine das hier:
https://www.drupaleasy.com/quicktips/enabling-development-mode-local-dru...
Am besten nimmst du die Drupal Console dafür, dann must du das nicht selbst erledigen und es gibt weniger Fehlerquellen
Das ergebnis sind die sogenannten Theme Suggestions wie folgende
<!-- FILE NAME SUGGESTIONS:* html--front.html.twig
* html--node.html.twig
x html.html.twig
-->
dinmikkith schriebDann mach
am 02.07.2018 - 21:06 Uhr
Dann mach aus SCSS einfach CSS
input[type=file] {
cursor: pointer !important;
}
input[type=file]::-webkit-file-upload-button {
background: #E62163;
border: 0;
padding: 1em 2em;
cursor: pointer;
color: #fff;
border-radius: 0.2em;
}
input[type=file]::-ms-browse {
background: #E62163;
border: 0;
padding: 1em 2em;
cursor: pointer;
color: #fff;
border-radius: 0.2em;
}
body {
margin: 2em;
background: #292931;
font-family: "Arimo", sans-serif;
color: #fff;
}
hr {
opacity: 0.3;
margin: 2em 0;
}
Und das schreibst du dir in das Style-Sheet deines Themes
So, hier jetzt meine Rückmeldung!
Ich hatte eigentlich schon aufgegeben weil ich ständig mit Firefox gearbeitet habe und nicht die Änderung sehen konnte die dein Code bewirkt hat, trotzdem hat es zum Teil geklappt! Vielen Dank, den bei Chrome-basierten Browser klappt es, Chromium, Vivaldi Browser usw. - Gemerkt habe ich es nach ca. 14 Stunden, per Zufall gesehen, dass es dort greift :) Leider greift "-webkit-file-upload-button" nicht bei Firefox, es ist Wichtig, dass es bei allen neuen Browser greift, es ist sehr wichtige, das ich eine funktionierende Lösung auch für Firefox habe, mindestens Firefox noch dazu holen! Ich habe nach eine alternative für das "-webkit-file-upload-button" gesucht die auch für Firefox klappt, konnte leider nichts finden :/ Daher ich mit Ubuntu arbeite und mein Projekt aktuell lokal steht konnte ich es noch nicht bei Windows-Firefox und IE probieren, gehe davon aus, dass es dort aber auch nicht greift... Eine Lösung nur für Chromium reicht leider nicht, für weitere Tipps bin ich immer noch offen
Die von dir aufgeführten
am 02.07.2018 - 22:04 Uhr
Die von dir aufgeführten Browser unterstützen dieses Pseudo.Element leider nicht. Eine Auflstung der unterstützten Browser findest du bei Mozilla
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-file-upload-b...
gut, das heisst, ich kann
am 02.07.2018 - 22:20 Uhr
gut, das heisst, ich kann eine Umsetzung für Firefox und IE vergessen?
Wenn du noch magst, arbeite
am 03.07.2018 - 00:27 Uhr
Wenn du noch magst, arbeite dich durch diese Anleitung mal durch:
https://blog.benestudio.co/custom-file-upload-button-with-pure-css-5aacf...
Soll angeblich mit allen Browsern funktionieren, ich habe es aber nicht getestet.
Letztendlich bleibt immer ein Restproblem bestehen, neue Browser Updates, mobiles Handling, PC, Mac...etc.
In dem Moment wo der Button nicht mehr aus Drupal an sich stammt, sondern vom jeweiligen Browser bereit gestellt wird, ist es immer etwas triggy, da hilft nur viel testen mit verschiedenen Endgeräten und Browsern.
Grüße Jenna