Dreispaltige Tabelle zwischen Header und Navigation
Hier stelle ich euch heute ein Tutorial vor wie ihr mit Hilfe von HTML eine 3 spaltige Tabelle zwischen dem Kopfzeilenbild und der Navigation einbinden könnt. Diese könnt ihr dann später selbst mit Inhalt füllen. Ich nutze sie gerne für eine Kurzbeschreibung des Forums, Shortnews, Wetteranzeigen, Wegweiser (anhand von Links) und/oder eine kurze Teamauflistung. Natürlich stehen euch aber auch viele weitere Möglichkeiten offen für die ihr die Tabelle nutzen könnt.
Ich werde alles Schritt für Schritt durchgehen, damit auch komplette Anfänger etwas damit anfangen können. Die Erfahrenen unter euch können die ersten beiden Schritte gerne überspringen.
Allerdings ist hier Vorsicht geboten, denn der Code für die Tabelle muss in das Template eingesetzt werden! Es ist also wichtig, dass ihr die Anleitung genau befolgt und alles gründlich lest - wenn es sein muss auch 3-5 mal. Jeder kleine Fehler kann unter Umständen erheblichen Schaden im Forum verursachen, deshalb seid bitte wirklich vorsichtig und konzentriert bei der Sache. Ich würde euch, um größeren Schaden zu vermeiden, vorschlagen das Ganze zuvor in einem Testforum zu testen das ihr euch jederzeit kostenlos erstellen könnt.
Die fertige Tabelle sieht am Ende so aus:
Schritt 1 - Das Anlegen einer Kopie
Zu aller erst begeben wir uns in das ACP (Admin Control Panel). Dieses findet ihr indem ihr in eurer Navigationsleiste auf "Admin" oder "Administration" (Je nach Template) klickt. Von dort aus geht es direkt weiter nach "Template Entwicklung". Dort legt ihr euch eine Kopie des Templates an das ihr nutzen wollt. Den Namen des Templates könnt ihr natürlich nach belieben verändern. Wenn ihr wollt, könnt ihr auch noch eine Beschreibung hinzufügen. Alles andere einfach so lassen wie es eingestellt ist und auf "Kopie anlegen" klicken.
Schritt 2 - Erste Schritte
Nun haben wir also eine Kopie des Templates unserer Wahl. Dieses findet ihr unter "Template Entwicklung" ganz unten. Dort klickt ihr ganz rechts auf "edit" um das Template bearbeiten zu können. Habt ihr das getan, öffnet sich euch eine neue Seite mit den Grundeinstellungen, die wir bereits vorgenommen haben als wir die Kopie erstellt haben und darunter die einzelnen Elemente eures Templates. Keine Sorge, wir konzentrieren uns ausschließlich auf das oberste Template Element "Obere Leiste". Alles andere ist hierfür nicht weiter relevant. Wir klicken nun also einmal das Template Element "Obere Leiste" an und uns öffnet sich eine Seite mit vielen Codes die jedem Anfänger erst einmal vorkommen wie ein wirres durcheinander.
Schritt 3 - Der Code
Jetzt haben wir also die Codes für das Template Element "Obere Leiste" direkt vor uns. Jeder Code stellt eine Funktion eures Forums dar, deshalb ist es wichtig, dass ihr hier nichts löscht oder verändert! Wir nehmen keine Veränderungen an den vorhandenen Codes vor, sondern fügen lediglich unseren eigenen an der richtigen Stelle ein. Ich werde euch hier die richtige Stelle für das Gaia-Template, das Business Template und das Standard Template zeigen. Aber dazu später mehr. Nehmt euch ruhig ein paar Minuten Zeit und schaut euch den Code für die Tabelle etwas genauer an.
Hier der Code für die Tabelle den wir einfügen werden:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table style="!important; background-color:{{global_header_bg_color}};" cellpadding=0 cellspacing=1 border=0>
<tr valign="middle"><br>
<td align="center" width="33%"><b>ÜBERSCHRIFT 1</b></td>
<td align="center" width="33%"><b>ÜBERSCHRIFT 2</b></td>
<td align="center" width="33%"><b>ÜBERSCHRIFT 3</b></td>
</tr>
<tr valign="middle">
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
</tr>
</table>
Was genau ihr verändern könnt und was auf jeden Fall stehen bleiben muss, zeige ich euch später. Jetzt wollen wir den Code doch erst einmal einbauen.
Schritt 4 - Das Einbauen des Codes
Nun haben wir also das Template Element "Obere leiste" vor uns geöffnet und den Code den wir einfügen wollen. Doch wohin damit? Man kann Codes nicht einfach an eine beliebige Stelle setzen, denn auch hier herrscht Struktur und Ordnung. Setzt ihr es falsch ein kann das üble Folgen haben und die Tabelle würde auch nicht dort angezeigt werden wo wir sie haben wollen. Da ich hier die Vorgaben für 3 verschiedene Templates angebe, achtet bitte genau darauf, dass ihr euch an die Vorlage für euer Template haltet!
Ein kleiner Tipp am Rande, bevor ihr euch dumm und dämlich sucht: Die Stellen nach denen ihr sucht befinden sich in allen Templates so ziemlich in der Mitte!
Gut, fangen wir mit dem Gaia Template an.
GAIA TEMPLATE
Noch einmal zum mitkommen: Admin -> Template Entwicklung -> Kopie von Gaia Template -> edit -> Obere Leiste. Habt ihr die Codes für das richtige Element vor euch sucht ihr folgende Stelle heraus:
1
2
3
4
5
2
3
4
5
</tr>
<tr>
<td colspan="2" style="background-color: {{global_navlist_bg}}; {{global_nav_bg_image==true.start}} background-Image: url({{global_nav_bg_image}}); {{global_nav_bg_image==true.end}}">
<div class="nav_n" id="nav_n">
<ul {{user_registered==true.start}} {{global_top_onclick==false.start}}onmouseout="hideDivById('user_add');" {{global_top_onclick==false.end}}{{user_registered==true.end}} >
Zwischen diesen beiden Zeilen müsst ihr dann den obrigen Code für die Tabelle einfügen:
1
2
3
2
3
<div class="nav_n" id="nav_n">
--Füge hier den Code für die Tabelle ein--
<ul {{user_registered==true.start}} {{global_top_onclick==false.start}}onmouseout="hideDivById('user_add');" {{global_top_onclick==false.end}}{{user_registered==true.end}} >
Meine Anmerkungen gehören natürlich nicht zum Code sondern sollen lediglich der Übersicht dienen. So sollte es dann aussehen, wenn ihr es richtig gemacht habt:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="content">
<table width="100%" style="!important; background-color:{{global_header_bg_color}}; border-collapse: collapse; margin-top: 0px;">
<tr {{global_header_bg_color==true.start}}style="min-height: 120px !important;"{{global_header_bg_color==true.end}}><td>{{html_header==false.start}}<div style="{{global_header_bg_color==true.start}}min-height:100px; height:auto !important; height:100px;{{global_header_bg_color==true.end}}{{global_header_image_position==true.start}}text-align:{{global_header_image_position}};{{global_header_image_position==true.end}}"> {{global_header_image==true.start}}<img src="{{global_header_image}}" alt="headerimg" />{{global_header_image==true.end}}</div>{{html_header==false.end}} {{html_header==true.start}} {{html_header}} {{html_header==true.end}} </td>
</tr>
<tr>
<td colspan="2" style="background-color: {{global_navlist_bg}}; {{global_nav_bg_image==true.start}} background-Image: url({{global_nav_bg_image}}); {{global_nav_bg_image==true.end}}">
<div class="nav_n" id="nav_n">
<table style="!important; background-color:{{global_header_bg_color}};" cellpadding=0 cellspacing=1 border=0>
<tr valign="middle"><br>
<td align="center" width="33%"><b>ÜBERSCHRIFT 1</b></td>
<td align="center" width="33%"><b>ÜBERSCHRIFT 2</b></td>
<td align="center" width="33%"><b>ÜBERSCHRIFT 3</b></td>
</tr>
<tr valign="middle">
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
</tr>
</table>
<ul {{user_registered==true.start}} {{global_top_onclick==false.start}}onmouseout="hideDivById('user_add');" {{global_top_onclick==false.end}}{{user_registered==true.end}} >
{{user_admin==true.start}}
<li><a h}}ref="{{link_admin}}">{{global_nav_admin==true.start}}<img src="{{global_nav_admin}}" alt="admin" style="vertical-align: middle; margin-right: 3px, border: none;"/>{{global_nav_admin==true.end}}Admin</a></li>
{{user_admin==true.end
Besonders wichtig ist es, dass ihr diese Leere Zeile hier beachtet! Also nachdem ihr den Code eingefügt habt am Ende noch einmal die Enter-Taste betätigen, sonst wird die Navigation falsch angezeigt!
Deshalb unbedingt zwischen diesen Zeilen eine leere Zeile hinzufügen, damit es nicht direkt untereinander steht, sondern etwas Raum dazwischen ist.
1
2
3
2
3
</table>
--hier die leere Zeile nicht vergessen!--
<ul {{user_registered==true.start}} {{global_top_onclick==false.start}}onmouseout="hideDivById('user_add');" {{global_top_onclick==false.end}}{{user_registered==true.end}} >
BUSINESS TEMPLATE
Noch einmal zum mitkommen: Admin -> Template Entwicklung -> Kopie von Business Template -> edit -> Obere Leiste. Habt ihr die Codes für das richtige Element vor euch sucht ihr folgende Stelle heraus:
1
2
3
4
5
6
7
2
3
4
5
6
7
<div class="spacer">
<div class="usercontent">
{{html_header==false.start}}<div class="spacer20"><h1>{{html_title}}</h1></div>{{html_header==false.else}}{{html_header}}{{html_header==false.end}}
</div>
<div id="navigation" class="navigation_wrap" width="60%">
<ul class="navigation">
{{menu|filter(menulist, key!==link_mail|link_logout|link_online|link_lastentry|link_member|link_search|link_userlist|link_faq,100)}}
Habt ihr diese Stelle gefunden, fügt ihr zwischen diesen beiden Zeilen den Code für die Tabelle ein:
1
2
3
4
5
6
2
3
4
5
6
<div class="usercontent">
{{html_header==false.start}}<div class="spacer20"><h1>{{html_title}}</h1></div>{{html_header==false.else}}{{html_header}}{{html_header==false.end}}
</div>
--Hier den Code für die Tabelle einfügen!--
--Die leere Zeile nicht vergessen!--
<div id="navigation" class="navigation_wrap" width="60%">
Meine Anmerkungen gehören natürlich nicht zum Code sondern sollen lediglich der Übersicht dienen. So sollte es dann aussehen, wenn ihr es richtig gemacht habt:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="spacer">
<div class="usercontent">
{{html_header==false.start}}<div class="spacer20"><h1>{{html_title}}</h1></div>{{html_header==false.else}}{{html_header}}{{html_header==false.end}}
</div>
<table style="!important; background-color:{{global_header_bg_color}};" cellpadding=0 cellspacing=1 border=0>
<tr valign="middle"><br>
<td align="center" width="20%"><b>ÜBERSCHRIFT 1</b></td>
<td align="center" width="20%"><b>ÜBERSCHRIFT 2</b></td>
<td align="center" width="20%"><b>ÜBERSCHRIFT 3</b></td>
</tr>
<tr valign="middle">
<td width="20%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="20%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="20%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
</tr>
</table>
<div id="navigation" class="navigation_wrap" width="60%">
<ul class="navigation">
STANDARD TEMPLATE
Noch einmal zum mitkommen: Admin -> Template Entwicklung -> Kopie von Standard Template -> edit -> Obere Leiste. Habt ihr die Codes für das richtige Element vor euch sucht ihr folgende Stelle heraus:
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
{{mailerror==true.start}}
<a href="{{link_memberdata}}"><img src="{{global_img_mailerror}}" border="0" /></a>
{{mailerror==true.end}}
<center>
<div style="clear: both;">
<div class="nav_n" id="nav_n">
<ul style="margin: 0px auto; padding: 0px; clear: both;">
{{user_newmail==true.start}}
<li><a href='{{link_mails}}'><img src='{{global_img_new_pm}}' style='border: none;'/></a></li>
{{user_newmail==true.end}}
Habt ihr diese Stelle nun gefunden fügt ihr den Code für die Tabelle (Siehe Schritt 3) nun genau zwischen diesen beiden Zeilen ein:
1
2
3
4
2
3
4
<div class="nav_n" id="nav_n">
--hier Code für die Tabelle--
--leere Zeile nicht vergessen!--
<ul style="margin: 0px auto; padding: 0px; clear: both;">
Meine Anmerkungen gehören natürlich nicht zum Code sondern sollen lediglich der Übersicht dienen. So sollte es dann aussehen, wenn ihr es richtig gemacht habt:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table cellpadding="0" cellspacing="0" border="0" width="{{global_page_width}}" align="center" id="pagewidth">
<tr>
<td colspan="2" class="thin" valign="top">
<table cellpadding="3" cellspacing="1" border="0" width="100%">
<tr>
<td align="center">
{{mailerror==true.start}}
<a href="{{link_memberdata}}"><img src="{{global_img_mailerror}}" border="0" /></a>
{{mailerror==true.end}}
<center>
<div style="clear: both;">
<div class="nav_n" id="nav_n">
<table style="!important; background-color:{{global_header_bg_color}};" cellpadding=0 cellspacing=1 border=0>
<tr valign="middle"><br>
<td align="center" width="33%"><b>ÜBERSCHRIFT 1</b></td>
<td align="center" width="33%"><b>ÜBERSCHRIFT 2</b></td>
<td align="center" width="33%"><b>ÜBERSCHRIFT 3</b></td>
</tr>
<tr valign="middle">
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
<td width="33%" align="justify" style="padding:10px;" valign="top">
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font></td>
</tr>
</table>
<ul style="margin: 0px auto; padding: 0px; clear: both;">
{{user_newmail==true.start}}
<li><a href='{{link_mails}}'><img src='{{global_img_new_pm}}' style='border: none;'/></a></li>
{{user_newmail==true.end}}
Schritt 5 - Die Aktivierung des Templates
Habt ihr den Code nun erfolgreich eingefügt und nochmals kontrolliert ob auch alles seine Richtigkeit hat, klickt ihr unten auf "speichern". Jetzt haben wir zwar den Code für die "Obere Leiste" verändert, sehen aber in unserem Forum noch keine Veränderung, da das Template noch nicht aktiv ist. Um es zu aktivieren und die Veränderungen sichtbar zu machen, gehen wir zurück auf die Übersicht der Templates. Also wieder Admin -> Template Entwicklung -> Templates. Dort 'sucht' ihr dann erneut nach eurem kopierten Template das ihr soeben bearbeitet habt und klickt links auf "Aktivieren". Ist das Template aktiv, seht ihr dort ein ein grünes Häkchen. Hat alles funktioniert, sollte die Tabelle nun zwischen Header und Navigationsleiste sichtbar sein. Falls nicht, einfach einmal F5 drücken.
Sollte irgendetwas fehlerhaft angezeigt werden, besteht ein Fehler im Template, so klein er auch sein mag. Solltet ihr im Nachhinein aber keinen Fehler finden, habt ihr die Möglichkeit das Template Element "Obere Leiste" zu aktualisieren. So wird alles auf den ursprünglichen Zustand zurückversetzt und ihr könnt ggf. nochmal von vorn anfangen.
Schritt 6 - der Inhalt der Tabelle
So, nun haben wir also unsere Tabelle. Aber was fangen wir damit an? Womit ihr den Inhalt letzten Endes füllt, bleibt jedem selbst überlassen. So könnt ihr beispielsweise eine Kurzbeschreibung eures Forums einfügen, eine Team-Grafik, Aktuelle News, usw. Die Möglichkeiten sind fast unendlich. Eurer Kreativität sind also keine Grenzen gesetzt. Um die Tabelle zu bearbeiten, sollte man aber wissen was im Code stehen bleiben muss und was nach belieben verändert werden kann. Daher möchte ich darauf nochmal für alle Anfänger kurz eingehen. Der Inhalt muss selbstverständlich auch wieder im Template verändert werden (Admin -> Template Entwicklung -> Templates -> Kopie von ... Template -> Edit -> Obere Leiste ).
Folgende Zeilen im Code könnt ihr ohne große Bedenken verändern:
1
2
3
4
5
6
2
3
4
5
6
<b>ÜBERSCHRIFT 1</b>
<b>ÜBERSCHRIFT 2</b>
<b>ÜBERSCHRIFT 3</b>
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font>
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font>
<smallfont>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</font>
Im Gegenzug müssen diese Zeilen auf jeden Fall immer stehen bleiben:
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<table style="!important; background-color:{{global_header_bg_color}};" cellpadding=0 cellspacing=1 border=0>
<tr valign="middle"><br>
<td align="center" width="33%">[Inhalt]</td>
</tr>
<tr valign="middle">
<td width="33%" align="justify" style="padding:10px;" valign="top">
[Inhalt]</td>
</tr>
</table>
Für diejenigen unter euch die keine Grundkentnisse in HTML besitzen, hier noch einmal ein paar Standard-Codes zum einsetzen von Grafiken, Links, usw.:
Code für Grafiken:
1
<img src="Bild-URL"/>
Code für Links:
1
<a href="Link-URL">Gib hier den Text an der angezeigt werden soll</a>
Code für eine Grafik als Link:
1
2
3
2
3
<a target="_blank" href="Link-URL">
<img src="Bild-URL">
</a>
Code für Zeilenumbruch:
1
<br>
Code für kleinen Text:
1
<smallfont>Dein Text</font>
Solltet ihr mit diesen Codes rein gar nichts anfangen können, fragt bitte jemanden mit Grundkentnissen in HTML oder informiert euch im Internet wie diese Codes einzusetzen/zu benutzen sind.
Login
Activity Feed
Heute 20:47
River, TripleM und Mike48 haben 3 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Nach Installation der App (auf iPad) muss man die E-Mail-Adresse bestätigen, damit man Push-Nachrichten bekommt.Nach Klick auf den Link kommt aber diese Ansicht:[[File:image.png|none|auto]]Das stimmt aber (hoffentlich) nicht? Man möchte ja Push auf das Gerät, wo man die App installiert hat und keine...
Gibt es eine Möglichkeit das Formular des E-Mail Newsletter anzupassen. Es geht um den unteren Teil der automatisch eingefügt wird. Den würde ich gerne erweitern um den Benutzernamen. Es gibt immer wieder Mitglieder die sich nicht mehr einloggen können weil sie ihren Benutzernamen nicht mehr wissen....
Heute 17:04
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Heute 16:11
Franz-Jupp und Dieter Weißbach haben 5 neue Beiträge im Thema Dateinamen von Bildern, Grafiken etc. mit Umlauten (Ä, Ö, Ü und ä, ü, ö sowie dem Buchstaben ß) führen zu merkwürdigen Anzeige-Ausfällen geschrieben.
Zwischenspeicherung ist nicht nötig.Einfügen, Zeilenumbruch, einfügen, Zeilenumbruch, usw.Erst zum Schluss den Beitrag speichern.Jedenfalls hat das vor 'ner knappen Stunde in meinem Testforum so funktioniert.Sieht vor'm speichern ungefähr so aus[[File:Screenshot_20240517-160950_Chrome.jpg|none|auto]]
Heute 16:05
Dieter Weißbach hat sich bedankt!
Beitrag: Dateinamen von Bildern, Grafiken etc. mit Umlauten (Ä, Ö, Ü und ä, ü, ö sowie dem Buchstaben ß) führen zu merkwürdigen Anzeige-Ausfällen
Beitrag: Dateinamen von Bildern, Grafiken etc. mit Umlauten (Ä, Ö, Ü und ä, ü, ö sowie dem Buchstaben ß) führen zu merkwürdigen Anzeige-Ausfällen
%usernames% hat sich bedankt!
Heute 14:49
Ingmar hat sich bedankt!
Beitrag: Dateinamen von Bildern, Grafiken etc. mit Umlauten (Ä, Ö, Ü und ä, ü, ö sowie dem Buchstaben ß) führen zu merkwürdigen Anzeige-Ausfällen
Beitrag: Dateinamen von Bildern, Grafiken etc. mit Umlauten (Ä, Ö, Ü und ä, ü, ö sowie dem Buchstaben ß) führen zu merkwürdigen Anzeige-Ausfällen
%usernames% hat sich bedankt!
Heute 14:48
Dieter Weißbach hat das Thema Dateinamen von Bildern, Grafiken etc. mit Umlauten (Ä, Ö, Ü und ä, ü, ö sowie dem Buchstaben ß) führen zu merkwürdigen Anzeige-Ausfällen erstellt
Dateinamen von Bildern, Grafiken etc. mit Umlauten (Ä, Ö, Ü und ä, ü, ö sowie dem Buchstaben ß)führen zu merkwürdigen Anzeige-Ausfällen.Bei unseren historischen Bahnen kommen öfter Bilddateinamen wie Märklin-4711, Märklin-4712,Märklin-4713 etc. vor. Dies führt dazu, dass meist das erste Bild noch an...
Heute 11:50
Ingmar und 3 weitere haben 5 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Zitat von Mike48 im Beitrag #91Ich habe im Forum das Update gestartet. Dann auf meinem iPhone die App neu installiert.Also ich musste unter Android nichts neu installieren. Eventuell hilft es, wenn du einmal in deiner App die Push-Nachrichten deaktivierst und dann wieder aktivierst.Zitat von Ludger ...
%usernames% hat sich bedankt!
Gestern 20:37
Ingmar und 2 weitere haben 4 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Zitat von Mike48 im Beitrag #87Muss man nach dem Update die App neu installieren?Das sollte sich automatisch aktualisieren. Wenn ich das richtig sehe gibt es aber je nach Betriebssystem und Version Unterschiede, wie schnell das passiert.
%usernames% hat sich bedankt!
Zitat von Gabriella im Beitrag #7Ja ebenso, musst Du denn dafür noch etwas anderes schreiben?Nein. Das habe ich schon so eingebaut dass der AF auch mobil wie beim PC gleich ist.
Gestern 16:19
%usernames% hat sich bedankt!
Gestern 15:51
Knox hat sich bedankt!
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
%usernames% hat sich bedankt!
Gestern 15:32
Ingmar hat sich bedankt!
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Hallo zusammen,wie es scheint, hat niemand eine Idee zu meinem Wunsch. Ich habe gerade nachgeschaut, scheint nicht möglich zu sein, den AF auch für Mitglieder nicht sichtbar zu machen. Oder ich finde nicht, wo das machbar wäre. Dann sehe ich das wohl richtig, dass nur eine Deaktivierung in Frage käme?
Gestern 09:53
Mike48 und 1 weitere haben 2 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Zitat von creator im Beitrag #83Andere Android-Smartphones nutzen entweder die integrierten Knöpfe im Gerät, eine ähnliche Leiste unten oder Wischgesten. Beim iPhone gibt es genauso Gesten.Dann wäre es ja eine gute Geste zu zeigen wie das auf einem iPhone geht statt zu spekulieren.Zitat von creator ...
Gestern 00:26
Mike48 und 1 weitere haben 4 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Zitat von l2otbart_57 im Beitrag #81Möglicherweise wird die Leiste nur auf "Verlangen" eingeblendet, indem man den unteren Bildschirmrand berührt und nach oben ziehtGeht nicht. Damit öffnet man die Liste der geöffneten Apps.
15.05.2024 23:38
%usernames% haben sich bedankt!
15.05.2024 21:59
River und 1 weitere haben sich bedankt!
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
%usernames% haben sich bedankt!
15.05.2024 21:34
Mike48 hat einen neuen Beitrag im Thema Neue User freischalten - nur wo und wie? geschrieben.
Zitat von AlEm im Beitrag #1Da steht nun 3 Mitglieder warten auf ihre Freischaltung. Jetzt Speichern - wenn ich auf Jetzt Speichern gehe, gelange ich zum Adminstrationsmenü.Wenn du im Admin auf der Home-Seite bist, dann musst du, so weit ich weiß, ganz nach unten scrollen. Da solltest du die Liste f...
%usernames% hat sich bedankt!
15.05.2024 20:32
Gabriella und 2 weitere haben sich bedankt!
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
%usernames% haben sich bedankt!
15.05.2024 20:03
Dieter Weißbach und 1 weitere haben 3 neue Beiträge im Thema Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren. geschrieben.
Hallo River, danke, diese Funktion kannte ich tatsächlich noch nicht.Gut zu wissen, mit der Revision-Funktion können wir die alten Texte finden und wieder herstellen.Allein dafür lohnt sich dieses Thema
Ich habe die kostenlose Version. Ich hatte an sich eingestellt, dass ich neue Mitglieder manuell freischalten muss. Und hab dann Einladungen versendet.Mir werden nun 3 neue User angezeigt (eine bin ich mit einem zweiten Browser)Da steht nun 3 Mitglieder warten auf ihre Freischaltung. Jetzt Speichern...
15.05.2024 18:34
River hat sich bedankt!
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
%usernames% hat sich bedankt!
15.05.2024 17:02
Ingmar hat sich bedankt!
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
%usernames% hat sich bedankt!
15.05.2024 13:24
%usernames% hat sich bedankt!
15.05.2024 13:19
Mike48 und 1 weitere haben 4 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Zitat von Mike48 im Beitrag #77Auf Android bekomme ich nicht mein Logo auf den Home-Bildschirm sonder nur einen Button mit dem ersten Buchstaben des Forum. Android 8.1.0Das hat sich erledigt nachdem ich auf dem alten Motorola Handy Updates der APPs gemacht habe. Wahrscheinlich nach dem Chrome auf de...
15.05.2024 11:59
%usernames% hat sich bedankt!
15.05.2024 09:43
Knox hat sich bedankt!
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
Beitrag: Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren.
%usernames% hat sich bedankt!
15.05.2024 09:42
Knox hat einen neuen Beitrag im Thema Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren. geschrieben.
Also bei uns ist ein ähnliches Problem. Es gehen zwar keine Text Zeilen verloren aber wenn man das Bild löscht, das gleichnamige wieder einfügt, dann wird plötzlich ein anderes Bild was gar nicht so heisst, als das neue angezeigt und an der Stelle an der es sein sollte, ist nur Code in der Vorschau....
14.05.2024 22:01
Dieter Weißbach und 1 weitere haben 2 neue Beiträge im Thema Beim gleichzeitigen Löschen und Hochladen von gleichnamigen Bildern geht der Beitragstext komplett verloren. geschrieben.
Hallo River,alles gut, vielleicht kann noch jemand diesen Fehler reproduzieren.Ja genau, es blieb eine leere Beitragsbox und ein leeres Titelfeldbei diesem Beitrag. Die übrigen Beiträge blieben unverändert.Das hochgeladene neue Bild wurde unter der Beitragsbox angezeigt,der Bildaufruf in der Beitrag...
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% haben sich bedankt!
%usernames% haben sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Besucher Statistiken
Heute waren Online
911, balea, bennos, creator, Dieter Weißbach, Franz-Jupp, Gabriella, Gemshorn, hans58, Ingmar, Johannes, kacz, Katja23101971, Knox, Kräuterhexe, l2otbart_57, Lady of the light, Lobbo, Ludger, Mike48, Moby, Nico1981, nighti, nobody, Olaf, Olli 66, Rika1, River, Scannerxy, Sporty, Susse, TripleM
911, balea, bennos, creator, Dieter Weißbach, Franz-Jupp, Gabriella, Gemshorn, hans58, Ingmar, Johannes, kacz, Katja23101971, Knox, Kräuterhexe, l2otbart_57, Lady of the light, Lobbo, Ludger, Mike48, Moby, Nico1981, nighti, nobody, Olaf, Olli 66, Rika1, River, Scannerxy, Sporty, Susse, TripleM
Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)
Besucherzähler
Heute waren 2337 Gäste und 32 Mitglieder, gestern 3599 Gäste und 34 Mitglieder online.
Statistiken
| Themen | 41421 |
| Beiträge | 302490 |
| Mitglieder | 12.395 |
Forum empfehlen