Question Template Anpassung noch unverständlich für mich

Hallo Leute, wie der Titel schon sagt bin ich bei der Template Anpassung noch nicht ganz durchgestiegen. Ich habe zwar diese Erklärung hier gefunden und weiß wie ich Klassen finde und in CSS Dateien anpassen kann.

Ich möchte jetzt zum Beispiel den Border im Bild anpassen. Auf dieser Seite ..

Hier habe ich die Regel gefunden und normal würde ich nun in die passende Datei gehen, die Zeile suchen und meine Änderungen vornehmen.

Da mir die kunena.css aber scheinbar generiert wird, hänge ich fest und verstehe das System der less und css nicht. Wie genau muss ich anhand dieses Beispiels jetzt vorgehen?

Vielen Dank und LG

Hier habe ich die Regel gefunden und normal würde ich nun in die passende Datei gehen, die Zeile suchen und meine Änderungen vornehmen.

Im Prinzip ist es recht einfach. Wenn du den passenden Code (oder Regel) gefunden hast, probiere die Änderung direkt mit deinem Browserwerkzeug, dann siehst du sofort, ob diese übernommen wird. Es funktioniert wie früher, aber anstatt in irgendeiner css den Code zu ändern, kopiere den Code in die custom.less.

Less hat den Vorteil, dass sich ständig wiederholende Codes nicht jedesmal extra geladen werden müssen. Außerdem hat man damit mehr Möglichkeiten.

z.B nehmen wir an, das ist ein Code, den du gefunden hast und du willst die Schriftgröße und Farbe ändern:

#kunena.layout .topictitle {
font-size: 110%;
}

Dann reicht es, wenn du diesen Code in die custom.less einträgst:

.topictitle {
font-size: 120%;
color: red;
}

Das sollte in der Regel reichen.
Sollte die Änderung danach auch nach dem leeren des Caches nicht angezeigt werden, dann versuche es mit .layout#kunena (wie unten) davor. Den Befehl „!imortant“ kannst du im Notfall immer noch verwenden.

.layout#kunena .topictitle {
font-size: 120%;
color: red;
}

Hallo Rich und erstmal vielen Dank,
ich habe jetzt schon einige Anpassungen umsetzten können. Ich mache es wie du schon gesagt hast, per Erweiterung suchen und so kann ich mir den Eintrag direkt anzeigen lassen und halt temporär anzeigen lassen. Ab und zu habe ich aber Überschneidungen mit meinem Joomla Template, was bisher aber noch kein Problem darstellt, da werde ich mal später schauen. Was aber gar nicht passt sind die Thumbnail Darstellungen, quasi die Anordnung.

Hast du da vielleicht eine Idee, dass diese sauberer in einer Reihe angezeigt werden?

Hier unter diesem Beitrag sieht man es gut.

Vielen Dank

Ab und zu habe ich aber Überschneidungen mit meinem Joomla Template, was bisher aber noch kein Problem darstellt, da werde ich mal später schauen.

Die Überschneidungen sollten sich in der Regel nicht auswirken, da die Kunena custom.css nur auf den Forenseiten geladen wird. Aber notfalls kannst du noch immer .layout#kunena voran stellen.

Was aber gar nicht passt sind die Thumbnail Darstellungen, quasi die Anordnung.

Die Thumbnailgröße wird normal in der Kunena-Konfiguration unter „Anhänge“ festgelegt. Standard ist 32x32 px, damit sollte es passen.

Aber mit dem Browserwerzeug findest du in diesem Fall 2 Selektoren. Wenn du das Thumbnail samt den Rahmen drum herum betrachtest, siehst du
.thumbnail {
samt zugehörigen Eigenschaften
}
Wenn du jetzt nur das innere enthaltene Bildchen betrachtest, siehst du
#kunena.layout img {
samt zugehörigen Eigenschaften
}

Kombiniere diese beiden und füge die gewünschten Eigenschaften hinzu (in diesem Fall die Größenangaben):
.layout#kunena .thumbnail img {
width: 32px;
height: 32px;
}

Hallo und schöne Weihnachten Rich,
ich habe es jetzt in der less wie folgt angepasst...

#kunena.layout img {
height: 128px;
width: 128px;
}

#kunena.layout .thumbnails li {
padding-bottom: 5px;
}

Nun passt die Ansicht der Bilder, aber auch die Rankingbilder und das runde Benutzerbild(Navigation) haben sich geändert und werden nun zu groß angezeigt. Scheinbar hängt das irgendwie zusammen.

Kann man in den Einstellungen auch diesen kleinen Info Bottom ausblenden wenn man diese nicht benötigt?

LG und Danke

So wie du es gemacht hast werden alle Bilder (img) im Forum auf die Größe 128 x 128 gesetzt.

Wenn du nur die Größe der Attachment-Bilder ändern willst dann musst du es so machen:

#kunena.layout .kattach img {
height: 128px;
width: 128px;
}

Gruß
Wolfgang

Super, vielen Dank Wolfgang, damit funktioniert es wunderbar.
Weißt du ob man in den Einstellungen, auch diesen kleinen Info Bottom ausblenden kann, wenn man diese nicht benötigt?
LG René

Hallo René,

welchen kleinen Info-Button meinst du?

Für den Online/Offline-Button:

#kunena.layout .profilebox li:nth-child(3) {
height: 0px;
visibility: hidden;
}

Für den Mehr-Button:

#kunena.layout .profile-expand.center {
height: 0px;
visibility: hidden;
}

Gruß
Wolfgang

Hallo, nein ich meine den kleinen Info Bottom neben den Thumbs. Bei einen klick auf diesen, wird das Bild ja in einem extra Fenster angezeigt und ein paar Infos zum Bild.


LG René

#kunena.layout .kattach .thumbnail a.btn.btn-small {
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
}

Für die persönliche Anpassung deines Forums ist dieses Forum eigentlich nicht die richtige Anlaufstelle. Du solltest dich vielleicht einmal grundsätzlich über CSS informieren, z.B. hier: www.w3schools.com/