WS 3.0 Teaser

  • Ich traue mich kaum fragen, aber ich hätte den Teaser gerne als Hintergrund im Header. Wie ich gelesen habe, geht das nur mittels manueller Einbindung. Da ich aber komplett keine Programmierkenntnisse habe, wäre ich um eine kurze Anleitung, was ich tun muss, sehr dankbar.
    Bedanke mich schon mal im Voraus.

  • Hallo Rübezahl,

    Ich traue mich kaum fragen, aber ich hätte den Teaser gerne als Hintergrund im Header.

    dafür gibt es eigentlich keinen Grund sich nicht zu trauen ;)

    Da ich aber komplett keine Programmierkenntnisse habe

    Auch kein Beinbruch da dies nicht erforderlich ist.
    Letztendlich handelt es sich hier nur um eine Codezeile in einem Template eingefügt werden muss.

    geht das nur mittels manueller Einbindung

    Und das sieht folgendermaßen aus.



    ACP > Anpassungen > Template > Style wählen > Absenden


    Hier ist das Beispiel vom Studio Design


    Wenn das ausgewählt (absenden)




    Hier findest du nun die angepassten Templates von deinem Design.
    Logischerweise wählen wir das pageHeader Template aus und drücken auf den Stift (bearbeiten)


    Hier siehst du nun den Template-Code


    Code
    <div id="pageHeaderContainer" class="pageHeaderContainer">
    	<header id="pageHeader" class="pageHeader">
    		<div id="pageHeaderPanel" class="pageHeaderPanel">
    			<div class="layoutBoundary">
    				{include file='pageHeaderLogo'}
    				{include file='pageHeaderMenu'}
    			</div>
    		</div>

    Das Template von dem Teaser heißt __teaser und wird manuell in das pageHeader Templatemit folgenden Code eingebunden.


    {include file='__teaser'}


    Um den Header weitflächig abzudecken habe ihn gleich hinter der 1. Codezeile kopiert



    Code
    <div id="pageHeaderContainer" class="pageHeaderContainer">
    	{include file='__teaser'}
    	<header id="pageHeader" class="pageHeader">
    		<div id="pageHeaderPanel" class="pageHeaderPanel">
    			<div class="layoutBoundary">
    				{include file='pageHeaderLogo'}
    				{include file='pageHeaderMenu'}
    			</div>
    		</div>

    Du kannst hier nach belieben den Code auch in andere Postionen (Zeilen) kopieren und schauen was passiert.


    Das sollte aber nur im Header <header.... </header> gemacht werden > nicht zwischen den if-Abragen und Scripten!!


    Und sollte dann so ungefähr aussehen ;)


    Falls noch kein pageHeader Template in deinem Design vorhanden sein sollte muss du das in Style kopieren!!
    Danach kannst du es bearbeiten.


  • Hallo Rübezahl,

    das Seitenlogo sollte im Teaser sein und nicht darunter!

    als Problem sehe ich das nicht gerade weil dein Logo natürlich auch irgendwo platziert werden möchte. ;)
    Und das es nicht automatisch in den Teaser wandert ist bei dieser Ausgangslage technisch garnicht möglich.


    Dafür bedarf anderer Überlegungen damit das dein Wünschen auch entspricht.


    Du kommentierst die Zeile im Template pageHeader aus


    Code
    <div id="pageHeaderFacade" class="pageHeaderFacade">
    			<div class="layoutBoundary">
    				{*{include file='pageHeaderLogo'}*}


    {*{include file='pageHeaderLogo'}*}
    auskommentieren bedeutet das {*...........*}


    Somit wird dein Logo ausgeblendet.


    Nun fügen wir diesen wieder in dein __teaser Template wieder ein.
    Da das Template noch nicht in deinem Design vorhanden ist, kopierst das Template (wie oben schon beschrieben) in dein Style.


    Dann wieder auf bearbeiten und fügst dein Logo dort {include file='pageHeaderLogo'} an diese Stelle ein



    Code
    <div class="slider-container-wrapper {if TEASERS_POSITION == content || TEASERS_POSITION == belowcontent}marginTop{/if}">
                {if TEASER_FULLSIZE == 1 && TEASERS_POSITION == header}<div class="layoutBoundary">{/if}
                <div class="slider-container">
    				{include file='pageHeaderLogo'}
                    <div class="slider">

    Danach noch den Pinsel rausholen ;)




    Code
    .pageHeaderLogo {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 100;
    }

    und nun ist dein auch Logo im Teaser :)


    Mit top und left kannst du dein Logo positionieren.

    Mit freundlichen Grüßen


    Pacco

    Einmal editiert, zuletzt von Pacco ()

  • Ich weiß nicht, was ich sagen soll - deshalb kann ich nur eines tun: Vielen, vielen Dank für deine Hilfe und für deine Geduld.


    Lieber @Pacco, ich denke, dass du mit deiner ausführlichen Anleitung nicht nur mir geholfen hast.


    Danke
    Rübezahl

  • Bitte schön. ;)

    ich denke, dass du mit deiner ausführlichen Anleitung nicht nur mir geholfen hast

    Davon gehe ich mal aus das andere das auch als Inspiration / Anleitung annehmen :)


    Viel Spass und Gutes Gelingen mit deinem Forum :thumbsup:

  • Grüß euch!


    Dürfen der WS 3 Teaser und der neue Easyslider gemeinsam auf einer Webseite betrieben werden? Oder geraten die sich technisch gesehen in die Haare?


    BG Rübezahl