How woud i achieve something like that?
https://gyazo.com/973b2e2525e43beeb9000b67bbae803e
When i add pictures to my Category they are all shrunk and ugly.
is there a custom plugin or something?
Have a look at Category Banners. It is a theme component that you can install on your site to add a banner to your categories. The “Additional CSS styling” section at the bottom of the topic gives details about how to set a background image for the banner.
From the looks of it it seems like thats a banner for the category, i need one that shows the section, to explain myself better…
https://forum.fivem.net/categories
thats what i want
This will require some custom work. Have a look at the theme guide if you want to do it yourself or create a topic in the marketplace category if you want to hire someone to do it for you.
Das ist das, was sie verwenden, aber ich bekomme es nicht zum Laufen.
discourse-misc-html-css (2).zip (2,5 KB)
Es gibt viele Links und Elemente, die sowohl im CSS-Tab als auch im Head-Tab bearbeitet werden müssen. Hast du das erledigt?
Das ist das benutzerdefinierte CSS, das Fivem heute verwendet, und das habe ich vom Admin-Team erhalten. Ich habe jedoch keine Ahnung, wie ich es zum Laufen bringe.
discourse-misc-html-css (2).zip (2,5 KB)
Also, ich arbeite schon eine Weile daran und es funktioniert einigermaßen.
Pic
Und es funktioniert wirklich gut, ehrlich gesagt.
Aber oben werden aus irgendeinem Grund einige der Kategorien dupliziert.
Wie kann ich das beheben und verhindern, dass Kategorien dupliziert werden?
Hier ist meine Konfiguration:
discourse-misc-html-css.zip (2,5 KB)
So habe ich es zumindest für mich selbst behoben
Zuerst lade diese Datei herunter:
discourse-misc-html-css (2).zip (2,5 KB)
Wenn du nicht sicher bist, wie du diese Datei zu deiner Seite hinzufügst, lies zuerst diesen Leitfaden:
Gehe nun zu Misc/HTML+CSS und dann zu CSS. Dort musst du einige Einstellungen anpassen.
Zuerst kopierst du diese Zeile:
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Ändere dann den Namen, den dein Banner tragen soll.
In meinem Beispiel verwende ich test1:
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Damit bist du im CSS-Bereich fertig.
Gehe nun zum -Abschnitt.
Scrolle nach unten zu:
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
Finde dort den Abschnitt namens:
<div class="category-thing fivem">
Kopiere dann:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Und passe es an deine Einstellungen an. In meinem Beispiel habe ich test1 verwendet.
Ich mache hier dasselbe:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Scrolle dann weiter nach unten zu:
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
Finde dort:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Und ändere es entsprechend deinen Einstellungen. In meinem Beispiel ändere ich fivem zu test1:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Scrolle dann weiter nach unten und finde den Abschnitt mit:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Hier möchtest du den Kategorie-Flag hinzufügen, den wir weiter oben erstellt haben. Der Grund dafür ist, dass du keine doppelten Kategorien erhältst, wie es bei mir das Problem war:
Ich füge also test1 für mein Beispiel hinzu:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Scrolle dann weiter nach unten und finde den Abschnitt namens:
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
Hier möchtest du fivem durch deinen gewünschten Namen ersetzen. In meinem Beispiel füge ich test1 hinzu:
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
Damit bist du fertig.
Als Nächstes möchtest du deinen Kategorie-Slug ändern. Hier ist mein Beispiel:
Dann wird diese Kategorie unter dem test1-Banner angezeigt.
Alle anderen Kategorien werden in diesem Beispiel unter dem Core CFX.RE-Banner angezeigt.
Hier übrigens meine aktuellen Einstellungen, die ich auf meiner Seite verwende:
discourse-misc-html-css.zip (2,5 KB)
Wenn du es dir ansehen möchtest, hier ist der Link:
https://forum.tgacommunity.com/
Außerdem könntest du dieses Thema als gelöst markieren?
Ich hoffe, das hat euch geholfen. Falls jemand Fragen hat, fragt mich einfach hier oder per PN.
Hallo zusammen. @manuel hat eine Theme-Komponente erstellt, die diesen Code erweitert und es den Leuten erleichtert, ihn in ihrem eigenen Forum zu verwenden.
Aber beide Methoden funktionieren und es liegt an Ihnen, wie Sie es machen wollen. Und beide Methoden liefern das gleiche Ergebnis.