Design Clean
    >> Tipps zum anpassen

Forum-Login in Box

Foren-Login in rechter Box

Beispielforum
Siehe Beispiel-Forum auf dieser Seite : /Forum/index.htm

Schritt 1: DIV`s in Box einfügen

Einige Baukasten-Designs ( z.B. "Clean" / "CSS" / "Flash" / "Professional" / u.s.w. ) besitzen nur eine rechte Box. In dieser - einen - Box fügen wir z.B. 3 DIV ein. Diese 3 DIV bekommen das Aussehen von "rechten Boxen" . Und diese 3 DIV bekommen die Inhalte, die wir in der Box haben möchten. Zur Beschreibung : Mehrere Boxen im Design

Mit der Beschreibung entstanden auch die 3 Boxen, welche ihr hier rechts seht

Schritt 2: Login-Box einfügen:

Nach "Schritt 1" platzieren wir vor dessen HTML-Code ein DIV, welches den Login enthält.

- auf "Design"
- auf "Designeinstellungen"
- auf "Erweiterte Einstellungen anzeigen"
- hier ist das Feld "erste Rechte Box"
- dort habt ihr die DIV's aus "Schritt 1" eingefügt
- nun folgt davor dieser HTML-Code :
<div class="login">
<h2>Forum Login</h2>
<form action="index.htm" method="post">

<input type="text" name="modulenter[nick]" value="Benutzername"  />
<input type="password" name="modulenter[pwd]" value="Kennwort"  />
<input type="submit" value="Login"  />
<input type="hidden" name="mode" value="login" />
</form>
<a href="register.htm" style="font-weight:bold;">Noch nicht angemeldet ? </a>
<br>
</div>

Schritt 3: Aussehen der Box

nun folgenden CSS-Code einfügen :

- auf "Extras"
- dort das Extra "Eigener <head> - Inhalt" öffnen
- hier sind Eure CSS-Codes am besten aufgehoben
<style type="text/css">
<!--

/* Aussehen der Login-Box */
.login {
   width: 92%;
   padding: 10px;
   margin: 0px 0px 20px 0px;
   text-align: center;
   border: 1px solid #ccc; 
   overflow:hidden; 
   display: none; }

/* Ueberschrift in Login-Box */
.login h2 {
   background-color: #333333; 
   color: #FFFFFF;
   font-size:14px;
   margin: -10px -10px 20px -20px;
   padding-left: 30px;
   box-shadow: 3px 5px 10px 5px #BBBBBB;
   text-align: left;}

/* die Eingabefelder Login */
.login .input {
   width: 150px!important;
   margin-bottom: 15px; }

-->
</style>
Nach dem Einfügen seht Ihr, das nur die Boxen sichtbar sind, welche den Klassennamen "boxen" im HTML-Code stehen haben. Das DIV mit dem Klassennamen "login" ist auf allen Seiten nicht sichtbar.

Schritt 4: Login-Box im Forum sichtbar machen

Auf der Seite "Forum" machen wir die Box mit dem Login sichtbar und wir entfernen den Login, der sich noch über dem Forum befindet, sowie die anderen 3 Boxen.

- auf "Extras" gehen
- das Extra "Forum" wählen"
- hier folgenden CSS-Code einfügen :
<style type="text/css">
<!--
/* Altes Login-Feld über Forum entfernen */
.forumtabelle:first-child { display: none; }

/* alle anderen Boxen entfernen */
div.boxen { display:none; }

/* Box mit Login sichtbar  */
.login {display: block!Important;}

-->
</style>



Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :50 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben