Unterkategorien (HG) Text nicht mittig

Lösung heißt:
Lerne mal 60 Minuten CSS - Kein Scherz, nicht böse gemeint - aber mit nur 30-60 Minuten CSS lernen kannst sowas alles selbst machen. z.b. hier sowas (Link nur für registrierte Nutzer sichtbar.) - is ne rel. einfache erklärung aber reicht aus für kleine anpassungen im shop.

Der Weg ist immer gleich:
Rechte Taste auf den Bereich den du ändern willst (in Chrome) Untersuchen klicken.
Dann kommt ein Fenster wo unten links html und rechts das CSS zu sehen ist für den bereich.
Das was dein Browser vom Server bekommen hat. Hier kannst spielen und ändern soviel du willst, es is nur in deinem Fenster nicht auf dem Server, kannst also nix verstellen. Seite neu laden - alles wieder wie vorher.

Nun sieht man wenn man links im html Bereich über die abschnitte fährt oben auf der Seite farbige markierungen, die zeigen für was der bereich zuständig ist. Hast den richtigen gefunden (evtl. muss man die kleinen Pfeile öffnen und genauer selektieren). dann klicken und rechts steht das css was den makierten Bereich gestaltet.
Da siehst dann auch textfarben, größen alles was hinterlegt wurde für den bereich.

Text centrieren kann man mittels
text-align: center

entweder es gibt dafür schon einen eintrag oder schreibst ihn testweise drunter und schaust obs ergebnis so is wie du wolltest.
Wenn du es schreiben musstest und es passt -
Das CSS ist immer so aufgebaut

namen name bereich {
CSS : Wert;
CSS : Wert;
}

wenn dein geänderter abschnitt passt kopierst du den block und fügst ihn so im stlye editor unter eigenes CSS ein.
Speichern schauen obs passt, speichern, seite neu laden (evtl. caches leeren Shop und browser da css bis 60 min. zwischengespeichert wird). freuen

 

Ich wollt dich nciht beleren, wollte dir nur zeigen wie es machbar ist, das man eben nicht als fragen muss.
Wenn alles mittig war, war deine Auswahl nicht fein genug.

Ich vermute du hast nur den
a (link) Tag centriert. - der wird allerdings überall für jeden Link verwendet. Daher muss man ihm sagen.
Nur den a tag innerhalb eines anderen bereiches

aber mach doch einfach den ganzen bereich auf center also alle texte in einer Unterkategorie box
geht mit

Code:

ul.subcategories-listing {
    text-align: center;
}

 

wenn das nicht geht muss was bei dir anders sein als normal. daher braucht man immer den LINK.
Das musst bei eigenes CSS einfügen.
Caches von Shop und Browser leeren.

 

Ich hänge mich mal ran.
Leider trotz ewigen lesen und css auslesen durch untersuchen, bin ich nicht auf die passenden css-befehle gekommen.
ich würde gerne auch die Bilder zentrieren und die Textleiste farblich hinterlegen, wie im angehängten Bsp.
Vielleicht macht sich einer die Mühe und hilft mit css... DANKE

 

@Yabonet.eu Ich hab mal gerade nen Blick drauf geworfen: In dem Shop, den du in deiner Signatur verlinkt hast, sind die Unterkategorie-Texte schon richtig zentriert, die Bilder der Kategorien aber nicht. Versuchs hier mal mit einem

Code:

.subcategories-listing .subcategory-item a img {
    margin: 0 auto;
}

um da die Bilder zu zentrieren. Zur Erklärung, was das CSS von mir bewirkt. Das Margin beschreibt die Aussenabstände eines HTML-Elements im CSS. Bei so genannten Block-Elementen (z.B. Bilder oder alle Elemente, die die CSS-Eigenschaft display: block oder display:inline-block haben) bedeutet meine Anweisung folgendes: Nimm für Oben und Unten einen Außenabstand von 0 und für Links und Rechts nimm einen automatischen Wert, der für beide Seiten gleich groß ist. Da nun für Links und Rechts die Außenabstände gleich groß sein sollen, zentriert der Browser das Block-Element in dem HTML-Eltern-Element (oder auch Eltern-Container), in unserem Fall ist das das Listen-Element li.subcategory-item.

Diese Art der Zentrierung funktioniert nicht für Inline-Elemente, wie z.B. Text. Da verwendet man dann das von Dennis beschriebene text-align: center.

Zum Anderen ist mir noch eine Kleinigkeit bei deinem Hintergrundbild aufgefallen: Momentan wird das Links und Rechts mit einem grauen Rand dargestellt. Zumindest bei Display-Auflösungen ab 1920x1080. Da gerade 4k Monitore immer stärker im kommen sind, sieht das auf denen noch ein wenig unschöner aus. Im StyleEdit3 müsstest du für das Hintergrundbild noch folgende Einstellung haben: "Hintergrundbild Größe". Änder das mal von "auto" auf "cover", dann wird das Bild über die gesamte Fensterbreite gezogen und der graue Rand verschwindet.

@mymaus Um bei dir schauen zu können, was nicht funktioniert, müsste man direkt in deinem Shop nachsehen. Wenn du den hier im Forum noch nicht öffentlich machen möchtest, kannst du mir auch den Zugang zukommen lassen mit einer kurzen EInverständniserklärung deinerseits, dass ich in deinen Shop schauen darf. Dann würde ich das in einer freien Minute mal analysieren und schauen, was da nicht geht.

 

Vielen Dank!!!
Danke für den Code und den Tipp mit den HG-Bild.
Die Erklärung für das css ist super und leicht verständlich, ich hatte auch nicht ganz das ".subcategory-item a img" herausgefunden. Aber nun geht es Aufwärts! ;-)

 

Ich habe mich mit meinem CSS wohl etwas verzettelt....
Wollte die Kategorien wie im Bild eines vorherigen Beitrages oben.
Ich dachte einfach den Block mit grauen hintergrund und dann die Höhe nur einstellen, aber bekomme es einfach nicht hin... *doof guck

Code:

.subcategories-listing > li > a {
     display: inline-block;
      width: 100%;
      padding: 10px;
    background: #BDBDBD;
    color: #FFF;
}

 

Das wird mit purem CSS leider nciht ganz klappen. Dafür müsstest du das HTML anpassen. Such mal nach der /templates/Honeygrid/module/categorie_listing/categorie_listing.html und mach dir davon eine Kopie mit dem Namen categorie_listing-USERMOD.html. In der USERMOD suchst du nach folgender Stelle:

HTML:

{if $SHOW_SUB_CATEGORIES_NAMES == '1' && $module_data.CATEGORIES_NAME != ''}
                                {$module_data.CATEGORIES_NAME}
          {/if}

und machst daraus:

HTML:

{if $SHOW_SUB_CATEGORIES_NAMES == '1' && $module_data.CATEGORIES_NAME != ''}
                                <span class="category-name">{$module_data.CATEGORIES_NAME}</span>
           {/if}

Anschließend kannst du dann dein CSS mit einer kleinen Anpassung verwenden:

Code:

.subcategories-listing > li > a > span{
     display: inline-block;
      width: 100%;
      padding: 10px;
    background: #BDBDBD;
    color: #FFF;
}

 

Perfekt, so funzt es !