Ergebnis 1 bis 17 von 17

Thema: Verschiedene Download-Buttons [gelöst]

  1. #1
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard Verschiedene Download-Buttons [gelöst]

    Hallo an alle,
    ich hab auf meiner Seite ein paar Dokumente zum Download. Preislisten, Broschüren etc. Gibt es irgendwie die möglichkeit verschiedene Downloadicons einzuführen? Hat da jemand eine Lösung?

    Lg
    Geändert von BrainStormer (07.03.2017 um 13:04 Uhr)

  2. #2
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo

    möglicher Ansatz/workaround:

    gib dem CE Download im Backend eine class mit 'meinIconA', 'meinIconB', ...

    ändere via CSS

    PHP-Code:
    .ce_download.meinIconA img {
         
    displaynone;
    }
    .
    ce_download.meinIconA a::before {
         
    displayinline;
         
    content'url(../assets/contao/images/meinIconA.gif)';
    }
    ... 
    Grüsse
    Bernhard


  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Oder ohne extra Klasse:
    PHP-Code:
    /* CSS */
    .mime_icon {
      
    displaynone;
    }
    .
    mime_icon {
      
    background-repeatno-repeat;
      
    padding-left24px;
    }
    .
    mime_icon[src$="iconJPG.gif"] + {
      
    background-imageurl("assets/contao/images/iconJPG.gif");
    }
    .
    mime_icon[src$="iconPDF.gif"] + {
      
    background-imageurl("assets/contao/images/iconPDF.gif");

    Das ist für Contao 3. Bei Contao 4 scheint das einfacher zu gehen, siehe hier https://demo.contao.org/en/file-elements.html.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  4. #4
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Andreas, da hab ich ne Frage zu

    PHP-Code:
    .mime_icon[src$="iconJPG.gif"] + {
      
    background-imageurl("assets/contao/images/iconJPG.gif");

    so wie ich das interpretiere bekommen jene <a> aus class .mime_icon mit dem "iconJPG.gif" ein background-image iconJPG.gif gesetzt. Also eigentlich sich selbst ...
    Doch die Frage lag ja darin, dass ich pro Download ein eigenes Icon setze.
    Bei deiner Lösung wird automatisiert eine wenn/dann Abfrage umgesetzt - doch ohne das deklarierte 'wenn' gibt's doch kein 'dann' ... oder verstehe ich da was nicht.

    Kannst du mir dein CSS mal kurz "ausdeutschen", damit ich's korrekt verstehe? Denn grundsätzlich gefällt mir dieser Ansatz
    Grüsse
    Bernhard


  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das ist CSS, da gibt es kein Wenn/Dann.
    PHP-Code:
    /* CSS */
    .mime_icon {
      
    displaynone/* die img.mime_icon unsichtbar schalten */
    }
    .
    mime_icon /* Das "a", welches nach einem Geschwister kommt, welches die Klasse mime_icon hat. Also alle As, welche nach den img.mime_icon kommen. */
      
    background-repeatno-repeat;
      
    padding-left24px;
    }
    .
    mime_icon[src$="iconJPG.gif"] + /* Das "a", welches nach einem Geschwister kommt, welches die Klasse mime_icon hat und dessen SRC auf iconJPG.gif endet ($) */
      
    background-imageurl("files/css/img/icon-jpg.gif");
    }
    .
    mime_icon[src$="iconPDF.gif"] + /* Das "a", welches nach einem Geschwister kommt, welches die Klasse mime_icon hat und dessen SRC auf iconPDF.gif endet ($) */
      
    background-imageurl("files/css/img/icon-pdf.gif");

    Um sowas selber umsetzen zu können musst du dich mit den CSS-Selektoren vertraut machen. Beispiel: gute Übersicht https://www.w3schools.com/cssref/css_selectors.asp
    Geändert von Andreas (19.02.2017 um 16:07 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  6. #6
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Danke schon mal!

    Ja, dass es kein Wenn/Dann gibt ist mir klar - war ja auch in Anführungsstrichen gesetzt
    Damit hab ich's eh richtig interpretiert - doch dann zielt deine Lösung nicht auf die eigentliche Frage ab.
    Denn wenn ich das richtig verstanden habe, möchte @BrainStormer für verschieden Downloads auch jeweils eigene Icons setzen und zu diesem Zeitpunkt exsistieren ja nur die Core-Icons der Downloads. Um jetzt ein eigenes Icon zu setzen muss dem ce_download erst mitgeteilt werden, dass es ein anderes Icon braucht.
    In deiner Ausführung geht CSS ja davon aus, dass .mime_icon auf iconPDF.gif (oder iconJPG.gif) endet und setzt es dann das neue Hintergrundbild.
    Da es ja nur zwei Ausführung gibt (JPG und PDF), wird @BrainStormer nie mehr als zwei Icons zusammen bringen

    Ich interpretiere die Anforderung so:
    Download A ... soll Icon Neu A bekommen
    Download B ... soll Icon Neu B bekommen
    Download C ... soll Icon Neu C bekommen
    Download D ... soll Icon Neu D bekommen

    ... und das geht dann mit deiner ausführung nicht mehr, oder?
    ... mit Setzen von class würd's schon gehen
    Grüsse
    Bernhard


  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja, stimmt. Wenn er für PDFs unterschiedliche Icons haben möchte, könnte er das mit einer extra CSS-Klasse für das Download-Element umsetzen. Für ein Element Downloads würde das nicht gehen.

    Für Downloads könntest du der Tabelle tl_files ein extra Feld "downloadType" hinzufügen. Am besten vom Typ 'select'. Das musst du dann in dein angepasstes Ausgabe-Template bringen. Wenn du dieses Template sowieso anpasst, kannst du dort auch direkt das IMG rausschmeißen und ne anständige Klasse direkt auf das A-Tag aufsetzen. Die Downloadtypen verwaltest du dann in der Dateiverwaltung. Im Template machst du das so, dass als Klasse das Mime-Icon, die Dateierweiterung und der Downloadtyp aufgesetzt wird, dann bist du am flexibelsten mit deinem CSS.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  8. #8
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    Hey,
    Danke für die Antworten, es ist jetzt erstmal ziemlich verständlich. Leider fehlt mir diese Woche komplett die Zeit, da grad ein bisschen Land unter ist. Ich werde es nächste Woche mal probieren, danke schonmal

  9. #9
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    Hallo an alle,
    danke nochmal für die Antworten, es hat mir auch echt viel geholfen und ich hab es auch hinbekommen. Das ist jetzt mein Code:
    HTML-Code:
    .ce_download.meinIconA a {
        width:94px;
        height:100px;
        display:block;
        background-image:url("files/Hernik/Tiere/102_100pxgif.gif");
        background-repeat:no-repeat;
        font-size:0px;
    }
    Im Anhangseht ihr das Ergebnis (Ich hab jetzt einfach zum ausprobieren irgendeins genommen)
    Da gleich noch eine Frage hinterher: Wenn ihr das Bild aufmacht seht ihr oben rechts sodrei Strichen, die bekomme ich einfach nicht weg, kann da jemand helfen?
    Lg
    Angehängte Grafiken Angehängte Grafiken

  10. #10
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    Hi Brainstormer,


    kann man sich das mal live anschauen? Hast Du eventuell einen Link für uns?
    Joachim
    *** Kein Backup, kein Mitleid ***

  11. #11
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    Hallo,
    anbei der Link: einach nach unten unter "Downloads"

    http://untergestell.com/index.php/ipai-reha.html

    Lg Andi

  12. #12
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    Das ist ein fav-navicon von FontAwesome, das dort eingeblendet ist. Folgender CSS-Teil ist dafür zuständig:

    Code:
    .fa-navicon::before, .fa-reorder::before, .fa-bars::before {
        content: "\f0c9";
    }
    Und das steht im HTML:

    Code:
    <div class="ce_download meinIconA block">
      
          <em class="fa fa-navicon">&nbsp;</em>
      <a href="index.php/ipai-reha.html?file=files/Hernik/Das%20Team/jwo20101105224135.jpg" title="Die Datei jwo20101105224135.jpg herunterladen">jwo20101105224135.jpg <span class="size">(162,8 KiB)</span></a>
    
    </div>
    Wenn Du diese Zeile

    Code:
          
    
    <em class="fa fa-navicon">&nbsp;</em>
    rausnimmst, ist auch das Fav-navicon von FontAwesome weg.
    Geändert von jscholtysik (08.03.2017 um 17:26 Uhr)
    Joachim
    *** Kein Backup, kein Mitleid ***

  13. #13
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    Perfekt! Danke.
    Das stand in der ce.download.htmal5, hab es jetzt mal rausgeschmissen. s.u.


    HTML-Code:
    <?php $this->extend('block_searchable'); ?>
    
    <?php $this->block('content'); ?>
    	<!---<em class="fa fa-navicon">&nbsp;</em>//--->
      <a href="<?= $this->href ?>" title="<?= $this->title ?>"><?= $this->link ?> <span class="size">(<?= $this->filesize ?>)</span></a>
    
    <?php $this->endblock(); ?>
    Lg Andi

  14. #14
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    Also in der Original ce_download.html5 schaut der Code so aus:

    Code:
    <?php $this->extend('block_searchable'); ?>
    
    <?php $this->block('content'); ?>
    
      <?= Image::getHtml($this->icon, '', 'class="mime_icon"') ?> <a href="<?= $this->href ?>" title="<?= $this->title ?>"><?= $this->link ?> <span class="size">(<?= $this->filesize ?>)</span></a>
    
    <?php $this->endblock(); ?>

    Muss also manuell hingefügt worden sein...
    Joachim
    *** Kein Backup, kein Mitleid ***

  15. #15
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von jscholtysik Beitrag anzeigen
    Das ist ein fav-icon ...
    ... ist auch das Favicon weg.
    Kein Favicon, sondern ein Icon von FontAwesome, die beginnen alle mit "fa-". Favicons kommen nur im HEAD vor und haben üblicherweise die Erweiterung "ico".
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  16. #16
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    Hi Andreas,


    schon klar, ist auch in meinem oberen Beitrag schon korrigiert...
    Joachim
    *** Kein Backup, kein Mitleid ***

  17. #17
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Und ich dachte schon ...
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

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

Berechtigungen

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