Button anpassen wie alle anderen

vnv-urbex · 13. Dezember 2019

Hallo Leute,

ich überarbeite gerade meine Downloads und würde gern den Button für den jeweiligen Download an die anderen anpassen. Dazu habe ich in der custom.css schon ein wenig rumprobiert, aber die Buttons sind ziemlich komplex. Ich habe die Werte des bestehenden Buttons genommen und eine neue Klasse in meiner CSS eingefügt. Das funktioniert aber alles nicht so einfach wie gedacht.

Code

.btn_download > a, a.modosdownloadsDownloadButton
{
    background-color: rgba(0,0,0,0.06);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: inline-block;
    font-size: 95%;
    line-height: 26px;
    margin-bottom: 0;
    padding: 2px 12px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: normal;
}

Alles anzeigen

Der "Download starten" Button soll so aussehen und sich verhalten wie der "Login" Button auf der rechten Seite.

Normal kann ich das doch schon über die custom.css bewerkstelligen, oder?

LG René

JoomlaWunder · 13. Dezember 2019

Setze mal im <a ... class="btn btn-primary login-button" ..... > und entferne das, was du bisher in class drin stehen hast.

Also analog des Login-Buttons einstellen!

Ferner entferne in <a> unter style den background-Wert, also style komplett entfernen.

EDIT: Musst auch noch im umgebenden DIV die class entfernen!

Dann schaut der Button schon mal genauso aus. Nun kannst du, wenn du möchtest, eigene Klassen dafür erstellen. Würde ich aber nicht machen. Warum auch, wenn eh alle gleich ausschauen sollen.

JoomlaWunder · 13. Dezember 2019

Liest sich etwas verwirrend, Ergebnis ist aber folgendes:

vnv-urbex · 15. Dezember 2019

Also sorry aber ich bekomme es irgendwie nicht hin. Kann es zwar Temporär nachvollziehen aber weiß nicht wie ich es Praktisch umsetzen soll.

Ich habe die Klasse geändert und den und auch das Häkchen bei Hintergrund entfernt, im Browsertool sieht es jetzt mal passend aus, aber wie bzw. wo muss ich die Klasse in der Datei ändern? Habe es jetzt schon in der download.php und default.php probiert, doch beides brachte nicht so richtig den Erfolg.

vnv-urbex · 15. Dezember 2019

Ok jetzt habe ich es hinbekommen, hatte das Override vergessen und somit, dass ich die Änderungen dort vornehmen muss. Habe es dort wie folgt angepasst...

PHP

   <div>
        <div class="btn btn-primary login-button">
            <?php echo JLayoutHelper::render('buttons.download', $this); ?>
        </div>
    </div>

Jetzt muss ich den Rest scheinbar nur noch in der CSS anpassen, den so richtig passt es noch nicht.

JoomlaWunder · 15. Dezember 2019

Im <div> selber keine Klasse angeben.!

Dann müsstest du die Klasse innerhalb von <a> einfügen und stattdessen

class="osdownloads-download-button osdownloads-readmore readmore " entfernen bzw. ersetzen. Also so wie oben angegeben.

Müsstest also mal suchen, wo sich

<?php echo JLayoutHelper::render('buttons.download', $this); ?>

zusammensetzt, also in welcher Datei man das <a> ändern kann.

Einträge in den css-Dateien und neue Klassen sind überflüssig, da du das Aussehen ja gar nicht ändern möchtest.

Müsstest halt nur sicherstellen, dass das Ganze updatesicher wird. Prinzipiell gibt es natürlich auch andere Möglichkeiten.

vnv-urbex · 15. Dezember 2019

Hallo, ja das wäre die default.php in commponents\com_osdownloads\views\item\tmpl\default.php (bzw im HTLM Ordner von meinem Template Override)dort ist es wie oben gezeigt dieser Block...

PHP

<div class="osdownloadsactions">
        <div class="btn_download">
            <?php echo JLayoutHelper::render('buttons.download', $this); ?>
        </div>
    </div>

Den muss ich also wie folgt abändern

PHP

<div>
        <div>
            <?php echo JLayoutHelper::render('buttons.download', $this); ?>
        </div>
    </div>

Aber wo muss ich jetzt das <a> setzen?

JoomlaWunder · 15. Dezember 2019

Das mit dem <a> ist genau der Knackpunkt. Ich verwende da immer die Suchfunktion. Habe aber gerade folgendes gefunden:

https://docs.joomla.org/J3.x:JLayout_Improvements_for_Joomla!

Vielleicht hilft das weiter?!? Gibt es eine Datei ungefähr in dieser Art: /layouts/buttons/download.php

Das ist aber absolut nicht mein Fachgebiet. Vielleicht hat jemand weitere Tipps!

Re:Later · 15. Dezember 2019

Wenn dieses JLayout den Konventionen folgt, findest im Ordner der Komponente (com_osdownloads) den Pfad wie JoomlaWunder oben zeigt

Überschreiben tust, indem du die Datei nach

/templates/DEINTEMPLATENAME/html/layouts/com_osdownloads/buttons/download.php

kopierst.

Falls sie nicht weitere Unter-JLayouts verwendet... Dann muss man halt die nach dem selben Schema kopieren/überschreiben.

vnv-urbex · 15. Dezember 2019

Hallo Leute,

ja diese Datei gibt es in der Komponente und ich habe den Pfad jetzt angelegt(/templates/DEINTEMPLATENAME/html/layouts/com_osdownloads/buttons/download.php) und in der Datei download.php noch folgendes angepasst.

Zeile 60

Code

$attribs = array(
    'class'                  => 'osdownloads-download-button osdownloads-readmore readmore ' . $buttonClasses,

Geändert in...

Code

$attribs = array(
    'class'                  => 'btn btn-primary login-button' . $buttonClasses,

Dann habe ich noch in der Zeile 198 die Klasse geändert.

PHP

 <a href="#" id="<?php echo $elementsId; ?>DownloadContinue"
           class="btn btn-primary login-button">
            <span>
                <?php echo JText::_($compParams->get('download_form_button_label', 'COM_OSDOWNLOADS_CONTINUE')); ?>
            </span>
        </a>

Jetzt funktioniert es, nur noch dieser blaue Rahmen nach dem Klicken ist noch da. Das muss ich aber schon viel früher bei der CSS Anpassung vergessen haben. Dies sollte aber kein Problem darstellen und erledige ich noch. Puh das hat mich jetzt schon ein wenig gefordert Aber es funktioniert. Ich danke euch vielmals und vielleicht können ja auch noch andere diesen Beitrag nutzen.

Also vielen Dank an euch und einen schönen Sonntag noch

LG René