Eigenes Stylesheet in eigenem Template verwenden

Hallo zusammen,

ich arbeite derzeit an einem (noch) Childtheme. Im nächsten Schritt soll es dann komplett autark werden. Nun möchte ich für meine Blöcke, Div’s und co natürlich eigene Styles definieren, wofür ich die Datei

source\out\kcs_theme1\src\css\footer.css

erstellt habe.
Leider finde ich mit jedem neuen Tutorial eine neue Variante, um dieses Vorhaben umzusetzen. Mal heißt es, man braucht Node/Grunt und muss eine Less-Datei in die styles.min.css einarbeiten lassen. An anderer Stelle wird dann mit include in der TPL gearbeitet oder gar, das dies nur mit einem eigenen, zum Thema zugehörigen Modul zu erledigen sei…
Da ich in den default-Themen unter OXID 6.3 keinerleit build-Ordner oder gar Less-Dateien finden konnte, schätze ich mal, diese Methode ist veraltet? Wobei ich ja fürs erste glücklich wäre, wenn überhaupt mal eine Methode klappen würde.

Wie ist denn sowas nun korrekt umzusetzen?

Meine Verzeichnisstruktur für das Childtheme:


Falls die footer.tpl von Belang ist:

[{block name="footer_main"}]

  [{* assign default config variables *}]
  [{assign var="blShowFullFooter" value=$oView->showSearch()}]
  [{assign var="blFullwidth" value=$oViewConf->getViewThemeParam('blFullwidthLayout')}]
  [{$oView->setShowNewsletter($oViewConf->getViewThemeParam('blFooterShowNewsletterForm'))}]
  [{if $oxcmp_user}] [{assign var="force_sid" value=$oView->getSidForWidget()}] [{/if}]

  [{* debugging mode on/off *}]
  [{debug}]



  [{* footer background *}]
  [{block name="footer_landscape"}]
    <div class="div_footer_landscape">
      Hello World!
      <img  id="img_footer_landscape" src="[{$oViewConf->getImageUrl('/backgrounds/footer-bg.jpg')}]"</img>
    </div>
  [{/block}]


[{/block}]

Vorab vielen Dank für die Unterstützung!

Für Dokumentationen oder Blogbeiträge gibt es die Webseite https://oxidforge.org dort wurde z.B. ein Blog Beitrag zum Thema Child Theme veröffentlicht - das Original dazu findest unter OXID6 Child-Themes auf Basis von WAVE-Parent erstellen – the real world

Dort hat der Autor versucht die Standard OXID Themes zu analysieren wie diese mit Webdesign Tools wie Grunt entwickelt werden bzw. wie es gedacht sein mag. Vielleicht hilft Dir dies ein Stück weiter :slight_smile:

Was ich noch anmerken würde, selber arbeite ich gerne mit einer CSS Datei wo ich weitere CSS Dateien include.

Beispiel Struktur

/source/out/themename/src/css/styles.css (Haupt CSS-Datei)

/* Custom Fonts */
@import url(./fonts.css);

/* Import Bootstrap Version v5.0.0-beta1 */
@import url(./theme.min.css);

/* Custom CSS */
@import url(./custom.css);

Zuerst lade ich die lokalen hinterlegten Fonts ein, im zweiten Import Bootstrap Framework CSS Anweisungen und am Ende meine Individualisierungen CSS.

Ideen dahinter

  1. Fonts Lokal hosten (Datenschutzkonform)
  2. Bootstrap CSS einfacher zu aktualisieren, weil getrennt von eigenen CSS Individualisierungen

Einen vorgeschriebenen Weg gibt es dort nicht.

Wenn Du Zugriff auf den kompletten Shop und Deine CSS Anweisungen nicht modulspezifisch, dann kannst direkt in Deinem Child-Theme CSS arbeiten.

Wenn CSS Anweisungen nur für Dein Modul relevant, dann kannst eigene CSS Datei in eigenen Template Datei oder Blocküberladung Template Datei in Deinem Modul setzen.

1 Like

Hallo indianer3c,

danke für deine Antwort.
Habe mir den Blogeintrag durchgelesen, konnte mein Problem damit leider jedoch auch noch nicht lösen. Die CSS-Datei wird nach wie vor nicht korrekt eingebunden. Zur Kontrolle: Mit Inline-CSS funktioniert alles natürlich einwandfrei. Ich bin auch nach wie vor etwas ratlos, wie das Ganze überhaupt laufen soll/kann. Scheinbar braucht man also kein Grunt oä, um eigene CSS-Dateien verwenden zu können?

Nachfolgend mein Status Quo:

  1. Seitenaufruf → Aufruf von ./source/Application/views/kcs_theme1/layout/start.tpl:
[{capture append="oxidBlock_content"}]
    [{assign var="oConfig" value=$oViewConf->getConfig()}]
    [{assign var='rsslinks' value=$oView->getRssLinks()}]
    [{assign var="blFullwidth" value=$oViewConf->getViewThemeParam('blFullwidthLayout')}]

    [{block name="testblock1"}]
      <p>Ich steh dann wohl im Body</p>
    [{/block}]

 [{include file="footer.tpl"}]

[{/capture}]
[{include file="layout/page.tpl"}]

In dieser findet sich folgende Zeile:

 [{include file="footer.tpl"}]

Welche widerrum ./source/Application/views/kcs_theme1/tpl/layout/page.tpl aufruft:

[{capture append="oxidBlock_pageBody"}]
    [{if $oView->showRDFa()}]
        [{include file="rdfa/rdfa.tpl"}]
    [{/if}]

    [{block name="layout_header"}]
        [{include file="layout/header.tpl"}]
    [{/block}]

    [{assign var="blFullwidth" value=$oViewConf->getViewThemeParam('blFullwidthLayout')}]

    <div id="wrapper" [{if $sidebar}]class="sidebar[{$sidebar}]"[{/if}]>

        <div class="[{if $blFullwidth}]container[{else}]container-fluid[{/if}]">

            <div class="underdog">

                <div class="row">

                    [{if $oView->getClassName()=='start' && $oView->getBanners() && !empty($oView->getBanners())}]
                        [{include file="widget/promoslider.tpl"}]
                    [{/if}]

                </div>

                <div class="content-box">

                    [{if $oView->getClassName() != "start" && !$blHideBreadcrumb}]
                        [{block name="layout_breadcrumb"}]
                            [{include file="widget/breadcrumb.tpl"}]
                        [{/block}]
                    [{/if}]

                    [{$smarty.capture.loginErrors}]

                    <div class="row">
                        [{if $sidebar && $sidebar != "Right"}]
                            <div class="col-xs-12 col-md-3 [{$oView->getClassName()}]">
                                <div id="sidebar">
                                    [{include file="layout/sidebar.tpl"}]
                                </div>
                            </div>
                        [{/if}]

                        <div class="col-xs-12 [{if $sidebar}]col-md-9[{/if}]">

                            <div id="content">
                                [{block name="content_main"}]
                                    [{include file="message/errors.tpl"}]

                                    [{foreach from=$oxidBlock_content item="_block"}]
                                        [{$_block}]
                                    [{/foreach}]
                                [{/block}]
                            </div>

                        </div>

                        [{if $sidebar && $sidebar == "Right"}]
                            <div class="col-xs-12 col-md-3 [{$oView->getClassName()}]">
                                <div id="sidebar">
                                    [{include file="layout/sidebar.tpl"}]
                                </div>
                            </div>
                        [{/if}]
                    </div>
                </div>
            </div>
        </div>
    </div>

    [{include file="layout/footer.tpl"}]

    [{block name="layout_init_social"}]
    [{/block}]

    <i class="fa fa-chevron-circle-up icon-4x" id="jumptotop"></i>
[{/capture}]
[{include file="layout/base.tpl"}]

In dessen Zeile:

[{include file="layout/footer.tpl"}]

Dann die Datei ./source/Application/views/kcs_theme1/tpl/layout/footer.tpl aufruft:

[{block name="footer_main"}]

  [{* assign default config variables *}]
  [{assign var="blShowFullFooter" value=$oView->showSearch()}]
  [{assign var="blFullwidth" value=$oViewConf->getViewThemeParam('blFullwidthLayout')}]
  [{$oView->setShowNewsletter($oViewConf->getViewThemeParam('blFooterShowNewsletterForm'))}]
  [{if $oxcmp_user}] [{assign var="force_sid" value=$oView->getSidForWidget()}] [{/if}]

  [{* include custom stylesheet for footer.tpl *}]
  [{oxscript include("css\footer.css")}]

  [{* debugging mode on/off *}]
  [{debug}]

  [{* footer background *}]
  [{block name="footer_landscape"}]
    <div class="div_footer_landscape">
      Hallo Welt!
      <img id="img_footer_landscape"  src="[{$oViewConf->getImageUrl('/backgrounds/footer-bg.jpg')}]"</img>



    </div>
  [{/block}]
[{/block}]

In dieser wurde nun letztendlich in folgender Zeile:

[{oxscript include("css\footer.css")}]

Schlussendlich die Datei ./source/out/kcs_theme1/src/css/footer.css aufruft:

.div_footer_landscape {

}

#img_footer_landscape {
  width: 100%;
  z-index: 2;
}

Da schon der Befehl [{debug}] in der footer.tpl nicht mehr ausgeführt wird, vermute ich, dass bereits diese Datei nicht korrekt implementiert wird.

Stimmt denn der allgemeine Ablauf so überhaupt und ich habe lediglich falsche Befehle/URI’s verwendet? Oder ist das von der Logik an sich schon falsch? Werde aus denen Tutorials leider nicht wirklich schlau, da die alle ein gewisse OXID/Smarty-Basics benötigen, die mir zurzeit leider noch fehlen.

Über Hilfe und Ratschläge wäre ich sehr dankbar!
Beste Grüße

[{oxstyle include=“css/footer.css”}]
s. base.tpl In dem Fall bedeutet das out/themename/src/css/footer.css

Hallo rubbercut,

Demnach stimmt das also so?
Immerhin wäre besagter Pfad out/themename/src/css/footer.css korrekt. Da liegt ja auch die footer.css.
Oder meintest du wegen dem Backslash (inzwischen korrigiert → kein Effekt). Habe alle möglichen Pfadangaben versucht, leider hat nichts geholfen. In der base.tpl werden die CSS-Dateien ja genauso eingebunden

Die Änderungen hast gesehen? oxstyle statt oxscript und der include ist etwas anders.

Hoppla :sweat_smile:
Habe ich in der Tat übersehen. Leider dennoch keine Veränderung. Gut möglich, dass es aber gar nicht soweit kommt, da nun gar keine Änderungen an meiner start.tpl sichtbar sind (auch mein plain text zum debuggen ist verschwunden). Muss wohl erst rausfinden, was da jetzt wieder schiefläuft, gerade ging’s doch noch

// Edit:
Da ich es nichtmehr gefixt bekomme (merkwürdig, hatte gar keine Änderungen vorgenommen, als das aufeinmal auftrat), muss ich erst ein neues Childtheme erzeugen und nochmal von vorne anfangen. Sobald ich soweit bin, melde ich mich hier wieder zu Wort.

Dann viel Erfolg.

Du hast die Smarty Struktur von OXID Themes (noch) nicht verstanden…

Das Verzeichnis der Startseite liegt im Verzeichnis

./source/Application/views/kcs_theme1/page/shop/start.tpl

Dies war scheinlich ein Tippfehler, weil im Screenshot von Dir passt es.

Das Footer Include ist sinnfrei, weil layout/footer.tpl über layout/page.tpl am Ende eingebunden wird.

Zusätzlich gibt es im shop Verzeichnis bei dir im Screenshot keine Datei footer.tpl.

Diese Aussage stimmt meiner Meinung nicht, bei Dir wird im Code auf base.tpl verwiesen. Guck Dir Smarty Capture Definition an Die reservierte {$smarty} Variable | Smarty

Capture ist ein Zwischenspeicher. Alles innerhalb Capture wird zwischengespeicert und später im layout/base.tpl wieder eingefügt → wave-theme/base.tpl at v1.6.0 · OXID-eSales/wave-theme · GitHub

Wie bereits erwähnt muss es oxstyle heißen und nicht oxscript bei CSS Dateien.

Die Logik der Startseite ist wie folgt:

  1. Im Frontend wird die Startseite aufgerufen - das OXID Framework weiß das die Startseite an den Start Controller übergeben werden muss oxideshop_ce/ShopControl.php at master · OXID-eSales/oxideshop_ce · GitHub

  2. Im Start Controller ist das Smarty Template page/shop/start.tpl definiert oxideshop_ce/StartController.php at master · OXID-eSales/oxideshop_ce · GitHub

  3. Im Smarty Template page/shop/start.tpl wird über das Capture namens oxidBlock_content die Ausgabe zwischengespeichert und über inlcude auf layout/page.tpl verwiesen wave-theme/start.tpl at v1.6.0 · OXID-eSales/wave-theme · GitHub

  4. Im Template layout/page.tpl wird wieder ein Capture namens oxidBlock_pageBody zwischengespeichert und über include auf layout/base.tpl verwiesen wave-theme/page.tpl at v1.6.0 · OXID-eSales/wave-theme · GitHub

  5. Erst im Template findet die Ausgabe statt, dort werden z.B. alle zwischengespeicherten Captures für den Inhaltsbereich in einer Schleife ausgegeben wave-theme/base.tpl at v1.6.0 · OXID-eSales/wave-theme · GitHub

1 Like

Hallo indianer3c,

vielen vielen Dank für diese ausführliche Erklärung! Du hast Recht, ich hatte die Smarty Struktur von OXID Themes noch nicht verstanden. Ich denke, durch deine Schilderung des Ablaufs bin ich ein großes Stück weiter gekommen.

Das Problem, das zuletzt auftauchte, waren Änderungen in der base.tpl, wodurch die aufgezeichneten Captures nicht mehr ausgegeben wurden. Sehr naheliegend, jetzt wo ich die Struktur verstehe.
Auch meine footer.css wird nun korrekt eingebunden.

→ In der ./source/Application/views/<Themename>/tpl/layout/base.tpl:

[{block name="base_style"}]
  [{* default body sheets *}]
  [{oxstyle include="css/styles.min.css"}]

  [{* custom body sheets *}]
  [{oxstyle include="css/styles.css"}]
[{/block}]

Die eingebunde ./source/out/<Themename>/src/css/styles.css:

/* Import Bootstrap Version v5.0.0-beta1 */
/*@import url(./theme.min.css);*/   /* Für später, wenn Responsive angegangen wird */

/* Custom CSS */
@import url(./footer.css);

Habe dabei deine Trennung aus Post #2 übernommen, danke für den Tipp!

1 Like

@stuck1a gerne doch :slight_smile: