Contao Konferenz & College 2019 in Duisburg - JETZT TICKET SICHERN!
Ergebnis 1 bis 9 von 9

Thema: Datei-Upload Formularfeld Design anpassen

  1. #1
    Contao-Nutzer
    Registriert seit
    31.01.2016.
    Beiträge
    222

    Standard Datei-Upload Formularfeld Design anpassen

    Hallo zusammen,

    ich habe ein Kontaktformular mittels Formulargenerator erstellt und das Design entsprechend angepasst, nur das Datei-Upload Feld macht mir Schwierigkeiten. Ich kann zwar Höhe, Breite und ein paar andere Styles darauf anwenden, aber so richtig funktioniert das nicht. Ich würde gerne dieses Formularfeld an das Design der Webseite anpassen wie die anderen Felder auch.
    Folgendes möchte ich erreichen:
    - Beschriftung von Button "Durchsuchen..." auf "Durchsuchen"
    - Hintergrundfarbe vom liken Bereich wo der ausgewählte Dateiname steht ändern
    - Rahmen mit border und border-radius hinzufügen
    - Button-Text ändern in der Schriftgröße, Schriftfarbe und Schriftbreite
    - Hintergrundfarbe von Button Durchsuchen ändern

    Gibt es eine Möglichkeit dieses Formularfeld dem eigenen Design anzupassen?
    Für Tipps und Hinweise dazu wäre ich sehr dankbar.


    Gruß
    Thomas

  2. #2
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    5.594
    Partner-ID
    107
    User beschenken
    Wunschliste

    Standard

    Hallo Thomas,

    das sind Elemente, die je nach Betriebssystem und Browser unterschiedlich sind. Mir einem JavaScript kann so etwas „überschreiben“.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Für Contao abstimmen: https://bitnami.com/product/contao/widget
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://planepix.gitbooks.io/erfahru...tao-4/content/
    Contao 4 Hoster: https://github.com/contao/contao-manager/wiki

    It's OpenSource. So invest with coding, testing and time.

  3. #3
    Contao-Nutzer Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    243

    Standard

    In manchen Browsern kann man für Formularfelder die Vorgaben des Browsers und Betriebssystems mit dieser CSS-Eigenschaft komplett entfernen:
    Code:
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    Ob das beim Upload-Feld weiter hilft, weiß ich aber nicht.

  4. #4
    Contao-Nutzer
    Registriert seit
    31.01.2016.
    Beiträge
    222

    Standard

    Hallo zusammen,

    ich habe jetzt eine passende Vorlage mit JavaScript für ein Upload-Feld gefunden und testweise in die Homepage eingebunden. Aber dabei ist mir vermutlich ein Fehler unterlaufen den ich leider bislang nicht finden konnte. Denn wenn man nun auf den Button "Durchsuchen" klickt sieht man nur noch eine leere Webseite anstatt, dass sich der Windows-Explorer öffnet für die Dateiauswahl. Welcher Fehler könnte mir da unterlaufen sein? Kann mir hierzu bitte jemand mitteilen woran das Problem liegt.
    Link zur Vorlage vom Upload-Feld: https://itnext.io/how-to-make-a-cust...t-c39e3f981b06
    Link zur Homepage mit der Vorlage: http://sub.musikverein-hirschzell.de...kt-intern.html
    Nachfolgend der von mir verwendete Code.

    HTML
    HTML-Code:
    <div class="input-container">
        <input id="real-input" type="file">
            <button class="browse-btn">Durchsuchen</button>
        <span class="file-info">Datei auswählen</span>
    </div>

    CSS

    Code:
    .input-container {
        height:22px;
        width:352px;
        background-color:#ffffe1;
        border:1px solid #707070;
        border-radius:4px;
    }
    
    input[type='file'] {
        display: none;
    }
    
    .file-info {
        display: block;
        margin-left:5px;
        font-size:0.9em;
        color:#6d6d6d;
    }
    
    .browse-btn {
        text-align:center;
        padding:4px;
        color:#fff8ea;
        font-size:12px;
        font-weight:bold;
        text-decoration:none;
        cursor:pointer;
        border:none;
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
        background-image:linear-gradient(to bottom, #a29c90, #544f43 55%, #544f43);
    }
    
    .browse-btn:hover {
        color:#600;
        background-image:linear-gradient(to bottom, #f0efe5, #a49e92 55%, #a49e92);
        }
    
    button.browse-btn {
        width:116px;
    }

    JavaScript

    Code:
    const uploadButton = document.querySelector('.browse-btn');
    const fileInfo = document.querySelector('.file-info');
    const realInput = document.getElementById('real-input');
    
    uploadButton.addEventListener('click', (e) => {
      realInput.click();
    });
    
    realInput.addEventListener('change', () => {
      const name = realInput.value.split(/\\|\//).pop();
      const truncated = name.length > 20 
        ? name.substr(name.length - 20) 
        : name;
      
      fileInfo.innerHTML = truncated;
    });

    Danke!

    Gruß
    Thomas

  5. #5
    Contao-Nutzer Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    243

    Standard

    Dein Script arbeitet noch nicht richtig. In der Console wird ein JS-Fehler ausgegeben.

  6. #6
    Contao-Nutzer Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    243

    Standard

    Binde das Script upload.js nicht im head ein, sondern nach dem Formular-Element oder einfach am Ende des body.

  7. #7
    Contao-Nutzer
    Registriert seit
    31.01.2016.
    Beiträge
    222

    Standard

    Danke für die schnelle Antwort. Das hatte ich auch schon vermutet, dass hier ein Problem mit JavaScript vorliegt.
    Der JavaScript-Code ist valide und wird mit <script src="files/hirschzell/content/scripts/upload.js"></script> unter Head-Tags im Seitenlayout eingebunden.
    Was könnte die Ursache dafür sein, dass der Code nicht richtig arbeitet?

  8. #8
    Contao-Nutzer Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    243

    Standard

    Zitat Zitat von rusty Beitrag anzeigen
    Binde das Script upload.js nicht im head ein, sondern nach dem Formular-Element oder einfach am Ende des body.
    Hier geht es nicht um Validität sondern um eine sinnvolle Reihenfolge. Das Script wird sofort ausgeführt – also bereits im Head. Da sich der Code auf bestimmte HTML-Elemente bezieht, kann dies so nicht funktionieren, da diese Elemente ja erst weiter unten im HTML erwähnt werden. Also: Erst das HTML-Markup, dann das Script!

  9. #9
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.172

    Standard

    Oder man packt ein document.ready() um die Funktion. Dann geht es auch im Head.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •