contao-themes-net / nature-theme-bundle

nature theme bundle for contao cms
Other
7 stars 2 forks source link

Anpassung des Nature Themes #56

Closed srothe closed 1 year ago

srothe commented 2 years ago

Hi, laut https://pdir.de/docs/de/contao/themes/nature/customization/ gibt es ja eine Vorgabe, wie ich gewisse Dinge anpassen kann.

Ich habe eine indivduelle css-Datei hinzugefüg und im Seitenlayout als externes Stylesheet (am Ende) hinzugefügt. Trotzdem wird es scheinbar vor dem nature css geladen, so dass ich mit !important arbeiten muss. Das scheint mir nicht der Sinn der Sache zu sein und scheitert insbesondere wenn im nature Standard auch schon !important verwendet wird (zB .has-background-grey-light).

Wie ist der vorgesehen Weg um zB .has-background-grey-light und .has-dark-text h3 mit einer anderen Farbe zu versehen?

Was ich auch noch nicht herausgefunden habe: Wie kann ich die Breite des Content-Bereiches und dessen padding am elegantesten anpassen?

Vielen Dank für eure Unterstützung! sven

seibtph commented 2 years ago

Hallo Sven,

die Reihenfolge ist falsch, da hast du recht. Du kannst das ganze einfach im Template fe_page_nature ändern.

<?= $this->stylesheets ?> muss nach <link rel="stylesheet" type="text/css" media="all" href="<?= ContaoThemesNet\NatureThemeBundle\ThemeUtils::getCombinedStylesheet(); // nature theme css optimization ?>"> geladen werden.

Wir werden das in der nächsten NATURE Theme Version anpassen.

Die Klassen für Farben und Hintergründe, z. B. .has-background-grey-light, kommen aus dem Bulma Framework. Das hat also gar nichts direkt mit dem NATURE Theme zu tun.

Du kannst die Klassen mittels Variablen überschreiben, z. B.:

$grey-light: #000;

Oder nutzt eine der anderen vordefinierten Klassen: https://bulma.io/documentation/helpers/color-helpers/#background-color

Für die Breite des Content-Bereich gibt es auch Variablen von Bulma, die man nutzen kann. Diese kannst du z. B. in der _custom_variables.scss einfügen (das !default am Ende ist notwendig):

$container-max-width: 1200px !default;
$container-offset: 0 !default;

Den Abstand kannst du so ändern:

.mod_article:not(.article-full-width) .container {
    padding: 0 20px;
}
srothe commented 1 year ago

Hi @seibtph Vielen Dank für den Support! Beste Grüße, sven