Bereich bei Klick dynamisch aus-, und einblenden

Hi,

ich habe nun schon auf mehreren Webseiten gesehen, dass es möglich ist, einen bestimmten Bereich bei klick auf einen Button komplett von der Seite auszublenden und bei Bedarf wieder einzublenden.

Ich habe eine rechte Spalte, bei der ich das gerne so machen würde. Im Hintergrund der Webseite ist ein großes Bild und ich will dem Besucher die Möglichkeit bieten, das Bild ohne die große Navigation, welche sich in der rechten Spalte befindet zu sehen. Ich habe schon einiges versucht mit display: none; Aber das hat leider nicht zum gewünschten Ergebnis geführt.

Ich habe auch diesen Thread dazu gefunden: https://www.contao-community.de/show...der-ausblenden

Leider funktioniert es bei mir nach deren Vorgehensweise nicht. Hat sonst schon einmal jemand so etwas umgesetzt und könnte mir dabei auf die Sprünge helfen?

Eine Beispielseite wäre immer gut in so einem Fall, aber es klingt für mich danach, als ob Du diese Sache mit dem "Akkordeon" lösen kannst. Schau mal bei den Inhaltselementen und dem Elementtyp "Akkordeon" nach.

Gruß qba|uwe

Beispielseite: http://www.mad.no/about

-> rechts oben show und hide menu

In diesem Fall wurde das ja mit javascript gelöst. Aber sowas kannst Du wirklich mit dem Akkordeon realisieren. Dann packst Du z.B. deinen ganzen Header in ein Akkordeon und kannst es per Klick ein- oder ausblenden. Vom Effekt her kommt es auf das Gleiche hinaus. Schau mal hier: http://hotelrunner.de/laufrouten.html . Wenn Du auf ein Land klickst dann kommt ein Inhalt zum Vorschein und wenn Du wieder draufklickst, dann verschwindet er wieder. Das ist das Akkordeon.

:-)

Hier eine Anleitung wie so etwas mit Mootools gemacht wird.

Ist zwar hier mit login gedacht aber kann ja geändert werden
http://web-kreation.com/index.php/tu...g-mootools-12/

lg Matthias

Hi,

das Akkordeon von Contao kenne ich – habe es genauso, wie auf der von dir benannten Seite schon benutzt.

Ich frage mich nur, wie ich das mit einer Navigation umsetzen soll? Das Akkoerdeon ist ein Inhaltselement -> Das Menü ist ein Modul, welches ich einfach im Seitenlayout einbinde und dann wird es auf jeder Unterseite angezeigt. Fertig.

Demnach müsste ich jeder Unterseite ein Inhaltselement Akkordeon geben und darin das Modul Navigation verschachteln oder? Mit CSS müsste ich dann dafür sorgen, dass der Bereich nicht sichtbar ist, wenn ich auf "Bereich verstecken" klicke oder? Also gebe ich einen negativen Wert und positioniere es negativ?

Viele Fragen ;)

@messa

Hi,

okay, das ist genau das was ich will. Ich versuche es mal in Contao umzusetzen. Danke.

http://web-kreation.com/index.php/tu...t-with-jquery/

Damit dürfe es noch einfacher umzusetzen sein oder?

Naja, ich probiere es mal. Ich werde aber wahrscheinlich eure Hilfe brauchen – darauf könnt ihr euch schon mal einstellen. Aber vielleicht können wir danach zusammen ein Tutorial für alle schreiben, ich denke, dass wäre für einige hier interessant...

Das von mir ist mootool (Contao verwendet Mootool)
Das von dir ist jQuery bei dem musst noch einen Erweitung installieren,
damit du beide verwenden kannst.

Schau dir den HTML Code an.
Java-Script einbauen. Templats - Neues Template -> wähle einfach eines mit moo_ aus dann umbenen moo_slider_menu
dort den JS rein speichern und unter Thems aktivieren.
Dann CSS rein und Modul mit eignenm HTML Code. in dem kannst du dann das NAvigation Modul mit InsertTags reinsetzten.
{{insert_module::*}} * durch ID des Modules ersetzen. eventuel musst du das default_navigation tmp anpassen.

lg Matthias

Ich glaube, ich brauche noch ein bisschen Starthilfe:

- Ich habe ein Template moo_slider_menu erstellt und dieses im Seitenlayout eingebunden. Das benötigte JS ist damit eingebunden.

Ich wollte nun ganz einfach beginnen. Mein Bereicht ist #header in dem Bereich gibt es nur text und einen Link, der dafür sorgen soll, dass es ein-, und ausfährt -> Der Link heißt: "open-close"

Wie passe ich nun das CSS an?

Code:

---

/*
Name: Nice Login and Signup Panel using Mootools 1.2
Tutorial URI: http://web-kreation.com/demos/login_form_mootools_1.2/
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: August 2008

        The CSS, XHTML and design is released under Creative Common License 2.5:
        http://creativecommons.org/licenses/by-sa/2.5/

*/

/* Login Panel */
#top {
          background: url(images/login_top.jpg) repeat-x 0 0;
        height: 38px;
        position: relative;
}

#top ul.login {
        display: block;
        position: relative;
          float: right;
          clear: right;
          height: 38px;
        width: auto;
          font-weight: bold;
        line-height: 38px;
        margin: 0;
        right: 150px;
          color: white;
          font-size: 80%;
        text-align: center;
          background: url(images/login_r.jpg) no-repeat right 0;
        padding-right: 45px;
}

#top ul.login li.left {
          background: url(images/login_l.jpg) no-repeat left 0;
          height: 38px;
        width: 45px;
        padding: 0;
        margin: 0;
          display: block;
        float: left;
}

#top ul.login li {
        text-align: left;
          padding: 0 6px;
        display: block;
        float: left;
        height: 38px;
          background: url(images/login_m.jpg) repeat-x 0 0;
}

#top ul.login li a {
        color: #33CCCC;
}

#top ul.login li a:hover {
        color: white;
}

/*Login*/
/* toggle effect - show/hide login*/
#login {
        width: 100%;
        color: white;
        background: #1E1E1E;
        overflow: hidden;
        position: relative;
        z-index: 3;
        height: 0;
}

#login a {
        text-decoration: none;
        color: #33CCCC;
}

#login a:hover {
        color: white;
}

#login .loginContent {
        width: 550px;
        height: 80px;
        margin: 0 auto;
        padding-top: 25px;
        text-align: left;
        font-size: 0.85em;
}

#login .loginContent .left {
        width: 120px;
        float: left;
        padding-left: 65px;
        font-size: 0.95em;
}

#login .loginContent .right {
        width: 290px;
        float: right;
        text-align: right;
        padding-right: 65px;
        font-size: 0.95em;
}

#login .loginContent form {
        margin: 0 0 10px 0;
        height: 26px;
}

#login .loginContent input.field {
        border: 1px #1A1A1A solid;
        background: #464646;
        margin-right: 5px;
        margin-top: 4px;
        color: white;
        height: 16px;
}

#login .loginContent input:focus.field {
        background: #545454;
}

#login .loginContent input.rememberme {
        border: none;
        background: transparent;
        margin: 0;
        padding: 0;
}

#login .loginContent input.button_login {
        width: 47px;
        height: 20px;
        cursor: pointer;
        border: none;
        background: transparent url(images/button_login.jpg) no-repeat 0 0;
}

#login .loginClose {
        display: block;
        position: absolute;
        right: 15px;
        top: 10px;
        width: 70px;
        font-size: 0.8em;
        text-align: left;
}

#login .loginClose a {
        display: block;
        width: 100%;
        height: 20px;
        background: url(images/button_close.jpg) no-repeat right 0;
        padding-right: 10px;
        border: none;
        font-size: 0.9em;
        color: white;
}

#login .loginClose a:hover {
        background: url(images/button_close.jpg) no-repeat right -20px;
}

---

Was sind:
#top
#login
ul.login
.loginContent
input.field
.loginClose

bei mir?

Wohin soll ich open-close verlinken? --> # ?

Wie gesagt, ich will es erst einmal ganz einfach halten: Der Bereich, in dem es funktionieren soll ist der #header -> im Header nur Text und ein Link (open-close)

Wäre für deine Hilfe sehr dankbar! Habe so was noch nicht oft gemacht...

Bitte schau dir das Beispiel an vorallem den HTML Code.
Das # mach das Wort zu einem Link, der dann das aufplannen ausführt.

Das ist der Bereich der versteckt ist!
Also über den wrapper.

Code:

---

<div id="login">
  <div class="loginContent">
  <form action="#" method="post">
    <label for="log"><b>Username: </b></label>
    <input class="field" type="text" name="log" id="log" value="" size="23" />
    <label for="pwd"><b>Password:</b></label>
    <input class="field" type="password" name="pwd" id="pwd" size="23" />
    <input type="submit" name="submit" value="" class="button_login" />
    <input type="hidden" name="redirect_to" value=""/>
  </form>
  <div class="left">
    <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
  <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>

---

Login ist das was angeeigt wird!

Code:

---

<div id="container">
  <div id="top">
  <ul class="login">
    <li class="left">&nbsp;</li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
  </ul>
  </div>

---

lg Matthias

don't get it.

Funktioniert einfach nicht bei mir.

Ich habe dir/oder jemand anders der helfen mag einen Zugang auf einer Testumgebung eingerichtet.

http://test.con-testumgebung.de.dd28...ntao/index.php

[Moderation: Zugangsdaten entfernt. Sensible Daten bitte ausschließlich per PN bekanntgeben!]


Es ist eine Ganz frische Contao Installation und ich habe das meiste, was ich heute Nachmittag angestellt habe wieder rückgängig gemacht, da sich wahrscheinlich sonst keiner auskennt.
Das moo_slide_header habe ich erstellt und eingebunden. Die CSS-Dateien habe ich auch im Seitenlayout eingebunden und wieder auf die ursprüngliche Form zurückgestellt.
Die CSS-Dateien: fx.slide.css und styles_slider habe ich kopiert und eingefügt.

Seit heute Mittag habe ich es probiert, aber es leider nicht geschafft. Ich habe die Testumgebung angelegt, da ich denke, dass es sehr schwer ist immer zu beschreiben was ich gemacht habe und was nicht funktioniert. Vielleicht hast du ja Zeit es dir anzusehen bzw. es umzusetzen und mir dann zu sagen, wie du genau vorgegangen bist.

Wäre spitze! Danke!

ahahah poste doch nicht einfach deine Zugangsdaten.
Tja hilft nichts ich habe dir alle relevatnen Infos gegeben.
Programmieren kann ich das für dich nicht. Keine Zeit für so was.

1 Fehler gleich gefunden.
moo_datei
schau dir bitte noch eine andere an vergleich sie mit deiner was fehlt?
Das siehst du unten schon auf der Seite was im HTML ausgegeben wird!

lg

Es ist nur eine Testumgebung, daher kann jeder die Daten sehen – kein Problem.

Ja, das <script></script> hat gefehlt. Aber das war nicht das Problem, da es vorher auch schon einmal drin stand...

Meiner Meinung nach müsste ich jetzt doch "nur noch" die CSS-Datei anpassen oder?

2 Hinweiß :)

Im Beispiel ist der "versteckte" Bereich nicht im Kopfpereich auch nicht im #wrapper
sonder darüber (Quellcode).
- fe_page template erstellen.
- Dann umbennen fe_page_moo
- In Seitenlayout einstellen

-Modul mit eingem HTML Code erstellen, hier kommt der ganze Teil rein der sich verstecken soll

- in fe_page_moo
- das Modul via Insertags reinladen {{insert_module::*}} * durch Modul ID ersetzen.
- ÜBER WRAPPER, schau dir dazu aber bitte nochmal das Beispiel an!

lg Matthias

O.K. i try

Ach noch was und lösche dann das Zeug aus deinem Artike wieder raus (das du nun im Modul hast)

und dann kommt in den Wrapper wieder das (Damit der Login angezeigt wird.

Code:

---

<div id="top">
  <ul class="login">
    <li class="left">&nbsp;</li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
  </ul>
  </div>

---

würde ich auch wider ein HTML Modul erstellen
und das dann bei Seitenlayouts in den Kopfbereich einfügen

lg

Jaaa! Spitze! Ich bin auch einer...

Hab einfach nicht bedacht, dass es über Wrapper gehört! Danke dir vielmals!

Sehs gerade :)
Lösch das bei Login wider raus :)
Bruachts doch nciht :D

lg

Alles super!

Also nochmal vielen Dank dir!!

was ist eigentlich, wenn der besucher, kein javascript aktiviert hat? dann kann er sich gar nicht anmelden oder? ich würde sowas auch gerne haben, jedoch macht mir das mit dem javascript sorgen. wenn jemand es deaktiviert hat, dann kann er sich nicht einloggen/registieren und daher nicht einkaufen.

versuche mich auch gerade damit...klappt natürlich nicht ;) wäre über hilfe dankbar.
habe bisher folgendes gemacht:

1. Neue Template namens moo_slider_menu angelegt mit dem code von der tutorialseite. am anfang bzw. ende noch <script type="text/javascript"> bzw. </script> eingefügt
2. Das neue Template moo_slider_menu ins Seitenlayout eingebunden
3. Hab das CSS File runtergeladen bzw. den Code kopiert, in ein neues File gepackt und integriert für meine Installation.

was muss ich jetzt als nächstes machen? Wenn mir hier jemand step by step helfen könnte (also wirklich schritt für schritt), dann würde ich parallel eine Anleitung für das Wiki schreiben, damit es jeder da nachlesen kann!

Weiss sonst keiner wie das geht außer joedoe und Messa und kann mir helfen? :( Wäre klasse, wenn ich das echt mit wem schritt für schritt schnell machen könnte. Leider schaffe ich es anhand der obigen Anleitung nicht. Und wie gesagt: würde dann sogar auch den WIKI eintrag gleich schreiben, damit in Zukunft es jeder machen kann.

1. moo_slider_menu Template erstellen
-> Irgendein Template, dass mit moo_ beginnt kopieren und den Inhalt hier einfügen:

Code:

---

/* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */

window.addEvent('domready', function(){

        $('login').setStyle('height','auto');
        var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state 

    $('toggleLogin').addEvent('click', function(e){
                e = new Event(e);
                mySlide.toggle();
                e.stop();
        });

    $('closeLogin').addEvent('click', function(e){
                e = new Event(e);
                mySlide.slideOut();
                e.stop();
        });

});

---

2. Css-Dateien erstellen:
a) fx.slide.css

Code:

---



/* Login Panel */
#top
{
    height:38px;
    position:relative;
    background: url(/tl_files/themes/standardtheme/images_slider/login_top.jpg) repeat-x 0 0;
}

#top ul.login
{
    width:auto;
    height:38px;
    right:150px;
    position:relative;
    float:right;
    clear:right;
    display:block;
    margin:0;
    padding-right:45px;
    text-align:center;
    font-size:80%;
    line-height:38px;
    font-weight:bold;
    color: #ff0000;
    background: url(/tl_files/themes/standardtheme/images_slider/login_r.jpg) no-repeat right 0;
}

#top ul.login li.left
{
    width:45px;
    height:38px;
    float:left;
    display:block;
    margin:0;
    padding:0;
    background: url(/tl_files/themes/standardtheme/images_slider/login_l.jpg) no-repeat left 0;
}

#top ul.login li
{
    height:38px;
    float:left;
    display:block;
    padding:0 6px;
    text-align:left;
    background: url(/tl_files/themes/standardtheme/images_slider/login_m.jpg) repeat-x 0 0;
}

#top ul.login li a
{
    color:#33CCCC;
}

#top ul.login li a:hover
{
    color: white;
}


/* toggle effect - show/hide login */
#login
{
    width:100%;
    height:0;
    position:relative;
    overflow:hidden;
    color: white;
    background: #1E1E1E;
    z-index: 3;
}

#login a
{
    text-decoration:none;
    color:#33CCCC;
}

#login a:hover
{
    color: white;
}

#login .loginContent
{
    width:550px;
    height:80px;
    margin:0 auto;
    padding-top:25px;
    text-align:left;
    font-size:0.85em;
}

#login .loginContent .left
{
    width:120px;
    float:left;
    padding-left:65px;
    font-size:0.95em;
}

#login .loginContent .right
{
    width:290px;
    float:right;
    padding-right:65px;
    text-align:right;
    font-size:0.95em;
}

#login .loginContent form
{
    height:26px;
    margin:0 0 10px;
}

#login .loginContent input.field
{
    height:16px;
    margin-top:4px;
    margin-right:5px;
    border:1px #1A1A1A #solid;
    background: #464646;
    color: white;
}

#login .loginContent input:focus.field
{
    background: #545454;
}

#login .loginContent input.rememberme
{
    margin:0;
    padding:0;
    border: none;
    background: transparent;
}

#login .loginContent input.button_login
{
    width:47px;
    height:20px;
    cursor: pointer;
    border: none;
    background: transparent url(/tl_files/themes/standardtheme/images_slider/button_login.jpg) no-repeat 0 0;
}

#login .loginClose
{
    width:70px;
    right:15px;
    position:absolute;
    display:block;
    text-align:left;
    font-size:0.8em;
    top: 10px;
}

#login .loginClose a
{
    width:100%;
    height:20px;
    display:block;
    padding-right:10px;
    font-size:0.9em;
    background: url(/tl_files/themes/standardtheme/images_slider/button_close.jpg) no-repeat right 0;
    border: none;
    color: white;
}

#login .loginClose a:hover
{
    background: url(/tl_files/themes/standardtheme/images_slider/button_close.jpg) no-repeat right -20px;
}

---

b) styles_slider

Code:

---

/* Name: Nice Login and Signup Panel using Mootools 1.2 Tutorial URI:
http://web-kreation.com/demos/login_form_mootools_1.2/ Author: Jeremie
Tisseau Author URI: http://web-kreation.com/ Date: August 2008 The CSS,
XHTML and design is released under Creative C */
html,
body
{
    margin:0;
    padding:0;
    border:0;
}

body
{
    width:100%;
    min-width:970px;
    line-height:130%;
    font: 85%/0.9 arial, helvetica, sans-serif;
    background: url(/tl_files/themes/standardtheme/images_slider/bg_repeat.jpg) repeat 0 0;
}

a
{
    text-decoration:none;
    color:#0099CC;
}

a:hover
{
    color:#00CCFF;
}

a img
{
    border: none;
    /*remove border for linked images*/;
}

/** clear **/
.clear
{
    height:0;
    clear:both;
    line-height:0;
}

.clearfix:after
{
    height:0;
    clear:both;
    display:block;
    content: ".";
    visibility: hidden;
}

.clearfix
{
    display:inline-block;
}


/* Hides from IE-mac \ */
* html .clearfix
{
    height:1%;
}

.clearfix
{
    display:block;
}


/* End hide from IE-mac */
.clearfix
{
    height:1%;
}

.clearfix
{
    display:block;
}

/** Main Layout **/

/* End hide from IE-mac */
#container
{
    width:100%;
    height:100%;
    text-align:center;
    /* IE fix to center the page */;
}

#content
{
    width:900px;
    margin:0 auto;
    padding:20px;
    /* center the page in Firefox */    text-align: left;
}

---

3. fe_page kopieren und in fe_page_moo umbenennen

über den Wrapper:
{{insert_module::1}}
<div id="wrapper">

4. Eigenes HTML-Modul erstellen:
Hier für den Login:

Code:

---

<div id="login">
  <div class="loginContent">
  <form action="#" method="post">
    <label for="log"><b>Username: </b></label>
    <input class="field" type="text" name="log" id="log" value="" size="23" />
    <label for="pwd"><b>Password:</b></label>
    <input class="field" type="password" name="pwd" id="pwd" size="23" />
    <input type="submit" name="submit" value="" class="button_login" />
    <input type="hidden" name="redirect_to" value=""/>
  </form>
  <div class="left">
    <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
  <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>
 
 <div id="container">
  <div id="top">
  <ul class="login">
    <li class="left">[nbsp]</li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
  </ul>
  </div>

---

5. Die CSS-Dateien und die fe_page_moo im Seitenlayout einbinden. Fertig.

Wenn du möchtest, dass es genau so aussieht, wie auf der Demo-Seite: http://web-kreation.com/index.php/tu...g-mootools-12/
dann "download" klicken, entpacken und die images bei dir uploaden und dann in der CSS-Datei die Pfade anpassen.

Grüße, johndoe

Danke schonmal. Kannst du das mit Schritt 3 aber genauer ausführen? Habe das template kopiert und umbenannt. Was muss ich jetzt damit machen?

Zudem die frage, ob bei Schritt 1 nicht noch ein <script> </script> fehlt?

So habe es jetzt geschafftt :)

http://www.drinkinggames.de/test_contao/
user: admin
pw: admin1

Ausserdem die Frage, ob ich folgendes auch realisieren kann:
ich habe das "Hello Guest!" umbenannt in "Login with Facebook". Es gibt ja eine Erweiterung, mit der man sich via Facebook anmelden kann. Wie kann ich jetzt erreichen, dass beim Klick auf das "Login with Facebook", das Popup-Fenster erscheint, wie es eben bei der Erweiterung normal ist?

Grüsse u Danke

Des Weiteren die Frage: Wenn ich jetzt einen Test-User habe (maxmustermann; 12345678), was muss ich noch einrichten, damit man sich damit einloggen kann? Also welche Module muss ich erstellen und wo zuweisen, damit der Login funktioniert?

Bitte schau dir alles Modul an.
Nicht böse gemeint aber nur durchs fragen lernst du es nicht.
Probier auch mal etwas selber aus.

Ich weiss, dass es nicht böse gemeint ist ;) Problem ist halt einfach nur, dass ich es nicht schaffe. wie man an den zeitlichen abständen der posts sieht, versuche ich mich ja daran, bekomme es nur leider nicht hin :(

Habe eben das Modul "Login-Formular" eingerichtet. Dieses muss ich jetzt halt irgendwie den Slider-Inputfeldern und dem Submitfeld zuweisen meiner Meinung nacht. Nur da hängt es eben.

Der Login funktionier automatisch schon.
Wenn du den Benutzername ausgeben willst schau dir (GOOGLE) Conta InsertTags an.

lg

Zitat:

---

Zitat von Messa

Der Login funktionier automatisch schon.
Wenn du den Benutzername ausgeben willst schau dir (GOOGLE) Conta InsertTags an.

lg

---

Das mit dem Benutzernamen weiss ich, wie es geht. Das sollte kein Problem sein.
Aber das Login-Formular funktioniert nicht bei mir. Wie meinst du es sollte automatisch funktionieren? Wenn ich einfach das HTML-Modul erstellt habe? Falls ja...irgendwas klappt bei mir dann nicht.

- Formular Modul erstelle.
- Modul an stelle einfügen.
- Weiterleitungseite
- Diese im Menü verstecken

- Mitgliedergruppen erstellen
- Mitglied erstellen

- Inhalte schützen anzeigen für Mitglieder

fertig.

Zitat:

---

Zitat von Messa

- Formular Modul erstelle.
- Modul an stelle einfügen.
- Weiterleitungseite
- Diese im Menü verstecken

- Mitgliedergruppen erstellen
- Mitglied erstellen

- Inhalte schützen anzeigen für Mitglieder

fertig.

---

- Modul "Login-Formular" erstellt
- Muss ich das "Login-Formular" jetzt in mein template "fe_page.xhtml" einfügen? Dort habe ich bereits folgenden code

HTML-Code:

---

<body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
{{insert_module::8}}
<div id="wrapper">

---

wobei modul 8 der html-code ist für den login-slider von joedoe oben
- Weiterleitungsseite = vorherige Seite
- Mitgliedergruppen werden nicht benötigt
- Mitglied erstellt (maxmustermann; 12345678)

Ich glaub jetzt hat es KLICk gemacht ;)
Du meinstest es so:

Nachdem ich das Modul "Login-Formular" erstellt habe, muss ich folgende Dinge machen:
1. ID des Moduls merken
2. Anstatt diesem Code für das HTML-Modul, welches in das "fe_page"-template eingebunden wird:

Code:

---

<div id="login">
  <div class="loginContent">
  <form action="#" method="post">
    <label for="log"><b>Username: </b></label>
    <input class="field" type="text" name="log" id="log" value="" size="23" />
    <label for="pwd"><b>Password:</b></label>
    <input class="field" type="password" name="pwd" id="pwd" size="23" />
    <input type="submit" name="submit" value="" class="button_login" />
    <input type="hidden" name="redirect_to" value=""/>
  </form>
  <div class="left">
    <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
  <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>
 
 <div id="container">
  <div id="top">
  <ul class="login">
    <li class="left">[nbsp]</li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
  </ul>
  </div>

---

diesen verwenden:

Code:

---

<div id="login">
 <div id="login_content">
<!-- indexer::stop -->
{{insert_module::11}}
<!-- indexer::continue -->
 </div>
 </div>
  <div id="top">
  <ul class="login">
    <li class="left">[nbsp]</li>
    <li>Login with Facebook</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In/Out</a></li>
  </ul>
  </div>
 <div class="clearfix"></div>

---

wobei {{insert_module::11}} das "Login-Formular"-Modul ist, richtig? So kannich mich auf jeden Fall an- und abmelden. Es funktioniert. Aber ist es so auch korrekt?

Jetzt habe ich noch eine Frage bzgl. Insert Tags:
Habe folgenden Code verwendet jetzt für das HTML-Modul:

Code:

---

<div id="login">
 <div id="login_content">
<!-- indexer::stop -->
{{insert_module::11}}
{{insert_module::12}}
<!-- indexer::continue -->
 </div>
 </div>
  <div id="top">
  <ul class="login">
    <li class="left">[nbsp]</li>
    <li>Hi {{user::firstname}}</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In/Out</a></li>
  </ul>
  </div>
 <div class="clearfix"></div>

---

Wenn man jetzt nicht angemeldet ist, dann steht lediglich "Hi" da. Wenn man angemeldet ist, dann "Hi NAME". Gibt es die Möglichkeit, dass man das irgendwie dynamisch macht, im Sinne von:
Nicht angemeldet: "Hi Gast"
Angemeldet: "Hi NAME"
Kann man das irgendwie mit Insert Tags realisieren?