Kontaktliste in Helix Ultimate Template anpassen

DennisMenger · 4. Februar 2021

Hallo zusammen.

Ich hänge mich hier mal dran.

Ich nutze das Shaper Helix Ultimate Template. Auch mich stört die Darstellung der Kontakte einer Kategorie. Ich würde das gerne in Form einer Tabelle haben.

Jetzt habe ich das mit der Klasse "table" nicht ganz verstanden. Wo füge ich das ein?

Danke.

Gruß

Dennis

Re:Later · 4. Februar 2021

Hm, eigentlich zeigt doch schon das erste Beispiel uaf der verlinkten Seite, was man zu tun hat.

Grundlegend fügt man dem

Code

<table

ein

Code

class="table"

Also

Code

<table class="table"

vorausgesetzt, es wird Bootstrap geladen.

Das hat natürlich seine Grenzen. Wenn die table Einträge (überlanges Wort z.B.) enthält oder sogar bescheuerte width-Angaben die die Tabelle nicht weiter schrumpfen lassen können ist schluss mit schrumpfen.

Deshalb legt man um die table noch ein

Code

<div class="table-responsive">

was dann den Scrollbar unten erzeugt, wenn nötig.

Zitat von DennisMenger

Shaper Helix Ultimate Template

Ich habe allerdings keine Ahnung, ob das überhaupt die Klassen oben drinnen hat.

Wenn ich deine Frage falsch verstanden habe, machst wohl besser einen neuen Thread/Thema im Forum auf als hier dranzuhängen... Weil hier gehts ja explizit um Bootstrap 4

DennisMenger · 4. Februar 2021

Wo müssten die Klassen normalerweise zu finden sein?

Ich habe folgende Dateien im Ordner css:

bootstrap.min.css

fa-v4-shims.css

font-awesome.min.css

rtl.css

template.css

design-ks · 4. Februar 2021

Hi,

Grundlegend solltest du diese Dateien nicht ändern. Lege lieber eine eigene Stylesheet im Verzeichnis css an. Diese kannst du dann in der index.php einbinden.

PHP

<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="canonical" href="<?php echo JUri::getInstance()->toString(); ?>">
        <?php
            $theme->head();
            // CSS files
            $theme->add_css('font-awesome.min.css');
            $theme->add_css('custom');
            // Fontawesome 4 to 5 compatible CSS file
            $theme->add_css('fa-v4-shims.css');
            
            // Scss files
            $theme->add_scss('master', $scssVars, 'template');
            if($this->direction == 'rtl')
            {
                $theme->add_scss('rtl', $scssVars, 'rtl');
            }
            $theme->add_scss('presets', $scssVars, 'presets/' . $scssVars['preset']);

        echo '<link href="/joomla/templates/shaper_helixultimate/css/MeineCSS.css" rel="stylesheet" type="text/css" />'."\n";
            
            // JS files
            $theme->add_js('jquery.sticky.js, main.js');

            //Before Head
            if ($before_head = $this->params->get('before_head'))
            {
                echo $before_head . "\n";
            }
        ?>
    </head>

Alles anzeigen

Eintrag in der Zeile 124:

Code

echo '<link href="/joomla/templates/shaper_helixultimate/css/MeineCSS.css" rel="stylesheet" type="text/css" />'."\n";

Diese wird dann als letzte geladen und gilt dann auch mit den Letzten Werten. Alternativ kannst du auch alle in die Werte in die default.css an das Ende der Datei schreiben. Da diese vom Template als letzte geladen wird.

Code

shaper_helixultimate/css/presets/default.css

anka · 4. Februar 2021

Zitat von design-ks

Grundlegend solltest du diese Dateien nicht ändern.

Das ist vollkommen richtig und wird bei diesem Template bereits auf eine viel einfachere Art ermöglicht .

An der index.php muss man nichts ändern (das würde bei einem Update eh wieder überschrieben werden). Man muss lediglich ein eigenes Stylesheet unter dem Namen custom.css anlegen und im Verzeichnis templates/shaper_helixultimate/css speichern. Das Einbinden erfolgt dann automatisch.

design-ks · 4. Februar 2021

Bei meinem Test hatte ich eine CSS mit einem Namen eingefügt, diese wurde nicht automatisch mit geladen.

Aber stimmt die Datei muss customer.css heißen dann wird diese geladen.

Elwood · 4. Februar 2021

Das Helix-Ultimate hat ein extra Feld für eigenen Custom-Code:

anka · 4. Februar 2021

Zitat von Elwood

Das Helix-Ultimate hat ein extra Feld für eigenen Custom-Code:

Ja, ich weiss, aber sobald man mit mehr als einem Templatestil arbeitet, wird es kompliziert. Dann muss man aufpassen, dass man die CSS-Anpassungen bei allen Stilen korrekt eingetragen hat. Deswegen bevorzuge ich meistens das custom.css. Ist aber eigentlich "Geschmacksache"

DennisMenger · 4. Februar 2021

Vielen Dank für eure Antworten. Ich werde mich morgen mal damit beschäftigen.

DennisMenger · 5. Februar 2021

Ich habe jetzt noch mal eine Frage zum Thema css oder Override? Was muss ich denn nutzen, damit ich die folgende Kategorie-Ansicht von Kontakten in Form einer Tabelle hinbekomme?

http://www.neu.tennisfreunde-k…=category&id=4&Itemid=247

In meinem Template gibt es bereits von Haus aus einen Override für die Ansicht eines einzelnen Kontakts.

Sollte ich für die Kategorie auch einen Override machen oder mit css?

So ganz ist mir die Unterscheidung noch nicht klar.

Danke für eure Hilfe. Und schon mal schönes Wochenende.

Gruß

Dennis

Re:Later · 5. Februar 2021

Und ich verstehe nicht, warum überhaupt eine custom.css usw., weil das Template Bootstrap-CSS lädt und die Klassen bereits alle drinnen sind. Das sind Bootstrap-Core-Klassen. Immer da uind fix und fertig...

design-ks · 5. Februar 2021

Hi,

der gesamte Block ist als Liste eingebunden. Voll mit Klassen und DIV- Elementen da schaut keiner in 3 Wochen noch durch. Anbei eine einfache Tabelle die Breite auf 400px; begrenzen und die Spalten passen sich automatisch dann an das <table> Element an.

Code

<table width="400px"><!-- Start Tabelle mit 2 Spalen-->
 <tr><!-- Zeile 1-->
    <td><a href="[Link]"><img src="[Bild]" alt="Kontaktbild"><br>[vName] [nName]</a></td> <!-- Spalte 1 -->
    <td> Ressort: 1. Vorsitzender <br>seit: 10.03.2018 </td> <!-- Spalte 1 -->
 </tr>
<!-- Hier dann weilter mit
 <tr>
    <td></td>
    <td></td>
 </tr>
-->
</table><!-- Ende Tabelle mit 2 Spalen-->

Alles anzeigen

Re:Later · 5. Februar 2021

Code

width="400px"

Absolute Totsünde in responsivem Design mit Pixelwerten zu arbeiten UUUND dieses Attribut generell noch zu verwenden. Wenn, dann setzt man width mit style (auch igitt) oder CSS-Regeln. Und dann am beseten in %.

Verstehe aber gerade nicht, warum dieser Thread so verwässert wird. Fing mal an mit einer klaren Antwort und einer klaren Antwort. Bootstrap 4 hat alles dabei und gut ist's. Auch die Nachfrage von DennisMenger wurde korrekt beantwortet.

DennisMenger Mach doch bitte einen neuen Thread auf zu Frage, wo welchen Override zur Kontaktliste/Kontaktkategorie und wie. Das ist eindeutig eine neue Frage.

anka · 5. Februar 2021

Zitat von Re:Later

Verstehe aber gerade nicht, warum dieser Thread so verwässert wird.

Jo, hast ja recht. Leider habe ich mich zu einer "akademischen Diskussion" über das korrekte Einbinden von CSS-Overrides verleiten lassen, um zu verhindern, dass jemand auf die Idee kommt, die Tipps aus #7 umzusetzen. Asche auf mein Haupt....

Elwood · 5. Februar 2021

Zitat von anka

.... aber sobald man mit mehr als einem Templatestil arbeitet, wird es kompliziert ....

Jepp, danke anka für den Hinweis. Hatte ich nicht bedacht!

Sieger66 · 5. Februar 2021

Zitat von Re:Later

Mach doch bitte einen neuen Thread auf ....

Ja, dieser Thread wurde ja bereits nach dem post#3 von DennisMenger gekapert und gehört ab post#4 meiner Meinung nach am besten in einen eigenen Thread.

DennisMenger du kannst es alternativ ja auch mal mit folgendem CSS in der custom.css versuchen und nach belieben noch anpassen oder erweitern:

Code

div > div  > form > ul.category.row-striped >  li.row-fluid 
{
    
  display: inline-table;
  list-style-type: none;    
  margin-top: 3em; 
     
}

div.contact-category .col-md-2, 
div.contact-category div.span3.col-md-3 , 
div.contact-category div.list-title.span7.col-md-7
{
max-width: 12em;
}

Alles anzeigen

Ich bin diesbezüglich aber auch nur Laie und das müßte man natürlich auch auf unerwünschte Nebenwirkungen in anderen Ansichten prüfen.

Indigo66 · 5. Februar 2021

Zitat von Sieger66

Ja, dieser Thread wurde ja bereits nach dem post#3 von DennisMenger gekapert und gehört ab post#4 meiner Meinung nach am besten in einen eigenen Thread.

Wurde gerade gemacht und ins passene Forenteil verschoben.

Sieger66 · 5. Februar 2021

Alternativ kannst du natürlich aber auch ein Template-Override erstellen von:

https://github.com/joomla/joom…ry/tmpl/default_items.php

Es gibt halt mehrere Wege nach Rom je nachdem "ob man den Tiber sehen möchte" ...

bzw. es kommt eben darauf an was du genau wo und wie ausgegeben und dargestellt haben möchtest.

DennisMenger · 7. Februar 2021

Zitat von Sieger66
Ja, dieser Thread wurde ja bereits nach dem post#3 von DennisMenger gekapert und gehört ab post#4 meiner Meinung nach am besten in einen eigenen Thread.

DennisMenger du kannst es alternativ ja auch mal mit folgendem CSS in der custom.css versuchen und nach belieben noch anpassen oder erweitern:
Code
div > div  > form > ul.category.row-striped >  li.row-fluid 
{
    
  display: inline-table;
  list-style-type: none;    
  margin-top: 3em; 
     
}

div.contact-category .col-md-2, 
div.contact-category div.span3.col-md-3 , 
div.contact-category div.list-title.span7.col-md-7
{
max-width: 12em;
}
Alles anzeigen
Ich bin diesbezüglich aber auch nur Laie und das müßte man natürlich auch auf unerwünschte Nebenwirkungen in anderen Ansichten prüfen.

Ich habe jetzt den Code aus #16 in den Custom.css des Templates eingefügt. Jetzt wird jeder Kontakt nebeneinander angezeigt.

Das habe ich vielleicht verkehrt ausgedrückt. Ich möchte gerne, dass die Kontakte zeilenweise untereinander angezeigt werden.

1. Spalte das Bild, 2. Spalte der Name, 3. Spalte das Ressort, usw. Und alle Kontakte dann untereinander in Zeilen. Dies soll am besten dann nicht bei jedem Template-Update wieder überschrieben werden.

Ich weiß nicht was die sauberste Lösung ist das hinzubekommen. Ob mit einem Override oder im custom.css Bereich des Templates.

Ich hoffe ihr könnt da noch einmal helfen.

Danke.

DennisMenger · 9. Februar 2021

Hallo ich nochmal.

Ich wollte das jetzt mit einem Override der Kategorieanzeige hinbekommen, allerdings komme ich nicht weiter.

Ich möchte, dass der Name, Telefon usw. rechts neben dem Bild ausgegeben wird. Ich sehe allerdings nicht den Grund warum der Rest unter dem Bild steht.

Am besten so in dem Format:

Bild Name Telefon Ort

Position Mobil

Hier ist der Code ab dem Stück wo die Ausgabe passiert.

Spoiler anzeigen

PHP

<?php if ($this->params->get('show_image_heading')) : ?>
                        <?php $contactWidth = 7; ?>
                        <div class="span2 col-md-2">
                            <?php if ($this->items[$i]->image) : ?>
                                <a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
                                    <?php echo JHtml::_(
                                        'image',
                                        $this->items[$i]->image,
                                        JText::_('COM_CONTACT_IMAGE_DETAILS'),
                                        array('class' => 'contact-thumbnail img-thumbnail')
                                    ); ?>
                                </a>
                            <?php endif; ?>
                        </div>
                    <?php else : ?>
                        <?php $contactWidth = 9; ?>
                    <?php endif; ?>
                    <div class="list-title span<?php echo $contactWidth; ?> col-md-<?php echo $contactWidth; ?>">
                        <a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
                            <?php echo $item->name; ?>
                        </a>
                        <?php if ($this->items[$i]->published == 0) : ?>
                            <span class="label label-warning">
                                <?php echo JText::_('JUNPUBLISHED'); ?>
                            </span>
                        <?php endif; ?>
                        <?php echo $item->event->afterDisplayTitle; ?>
                        <?php echo $item->event->beforeDisplayContent; ?>
                        <?php if ($this->params->get('show_position_headings')) : ?>
                            <?php echo $item->con_position; ?><br />
                        <?php endif; ?>
                        <?php if ($this->params->get('show_email_headings')) : ?>
                            <?php echo $item->email_to; ?><br />
                        <?php endif; ?>
                        <?php $location = array(); ?>
                        <?php if ($this->params->get('show_suburb_headings') && !empty($item->suburb)) : ?>
                            <?php $location[] = $item->suburb; ?>
                        <?php endif; ?>
                        <?php if ($this->params->get('show_state_headings') && !empty($item->state)) : ?>
                            <?php $location[] = $item->state; ?>
                        <?php endif; ?>
                        <?php if ($this->params->get('show_country_headings') && !empty($item->country)) : ?>
                            <?php $location[] = $item->country; ?>
                        <?php endif; ?>
                        <?php echo implode(', ', $location); ?>
                    </div>
                    <div class="span3 col-md-3">
                        <?php if ($this->params->get('show_telephone_headings') && !empty($item->telephone)) : ?>
                            <?php echo JText::sprintf('COM_CONTACT_TELEPHONE_NUMBER', $item->telephone); ?>
                        <?php endif; ?>
                        <?php if ($this->params->get('show_mobile_headings') && !empty ($item->mobile)) : ?>
                            <?php echo JText::sprintf('COM_CONTACT_MOBILE_NUMBER', $item->mobile); ?>
                        <?php endif; ?>
                        <?php if ($this->params->get('show_fax_headings') && !empty($item->fax)) : ?>
                            <?php echo JText::sprintf('COM_CONTACT_FAX_NUMBER', $item->fax); ?>
                        <?php endif; ?>
                    </div>

Alles anzeigen

Ich hoffe mir kann da jemand den richtigen Tipp geben.

Danke und schönen Abend noch.