+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Dropdownmenu im Showthread Template (/thread-3808.html)
Seiten: Seiten:
1
2
Dropdownmenu im Showthread Template - Grauer-Magier - 11.11.2006
Hallöchen ihr Lieben!
Ich hab mich etwas inspirieren lassen, und bin drauf und dran das Template showthread zu verändern.
Soweit bin ich schon gediehen:
Code:
...
{$multipage}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
<tr>
<td class="thead" colspan="2">
<div style="float: right;"><table>
<tr>
<td> <b>Thema-Optionen</b>: <br /><span class="smalltext"> <a href="printthread.php?tid={$tid}">{$lang->view_printable}</a><br />
<a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a><br />
<a href="usercp2.php?action=addsubscription&tid={$tid}">{$lang->subscribe_thread}</a> <br /><a href="usercp2.php?action=addfavorite&tid={$tid}">{$lang->add_favorites}</a></span></td>
<td VALIGN=TOP> <b>Ansicht</b>: <br /><span class="smalltext"><strong><a href="showthread.php?mode=threaded&tid={$tid}&pid={$pid}#pid{$pid}">{$lang->threaded}</a> <br /><a href="showthread.php?mode=linear&tid={$tid}&pid={$pid}#pid{$pid}">{$lang->linear}</a></strong></span></td>
</tr>
</table>
</div>
<div>
<strong>{$rating} <font size=5>{$thread['subject']}</font></strong>
</div>
</td>
</tr>
<tr>
<td class="tcat" width="15%"><span class="smalltext"><strong>{$lang->author}</strong></span></td>
<td class="tcat" width="85%"><span class="smalltext"><strong>{$lang->message}</strong></span></td>
</tr>
{$posts}
{$threadpages}
...Sieht schonmal ganz gut soweit aus.
Und jetzt zu dem Punkt wo ich ein wenig feststecke.
Ich wollte diese beiden Menüpunkte "Ansicht" und "Thema-Optionen" in jeweils ein eigenes Dropdownmenü kleiden, so wie das bei "Moderationsoptionen". Das würde dann, so wie ich mir das vorstelle eine optimale Übersichtlichkeit und Funktionalität gewähren (ohne jedesmal die ganzen Posts nach unten scrollen zu müssen).
Allerdings habe ich keine Ahnung, wie ich da anfangen kann. Ich steh etwas aufm Schlauch.
Und dadurch das die Moderationsoptionen ja nicht für jeden User sind, wird das mit dem abgucken etwas kompliziert.
Kann mir jemand helfen/Tipp geben?
Liebe Grüße, GM!
RE: Dropdownmenu im Showthread Template - Mak - 11.11.2006
Also ein Dropdownmenü kannst du grundsätzlich immer über zwei Wege machen: JavaScript und CSS. CSS ist einfacher bietet aber nicht so viele Möglichkeiten. Um rauszukriegen, wie sowas geht, kannst du mal googlen:
http://www.google.de/search?hl=de&q=css+dropdownmen%C3%BC&btnG=Google-Suche&meta=
Wenn du jetzt die Moderationsoptionen nur für Moderatoren anzeigen lassen möchtest, musst du in einer Datei (showthread.php) eine Variable erstellen, abfragen, ob der Benutzer ein Mod ist und nur dann anzeigen lassen. Versuch aber erstmal ein allgemeines Dropdownmenü, dann können wir uns dem Rest zuwenden.
RE: Dropdownmenu im Showthread Template - Grauer-Magier - 11.11.2006
Hi, Mak!
Also das Dropdownmenü hab ich soweit hinbekommen. Aber es noch nicht ganz optimal. Wenn ich mit der Maus darüberfahre klappt es zwr auf. aber es drückt die gesamte Überschriftsspalte nach unten, und das sieht nicht wirklich schon aus.
Code:
...
<style type="text/css">/* Fürs Beispiel */
@media screen, projection, print {
ul.examp {margin-left:1em; padding:0; list-style:none;}
ul.examp li {float:left; margin:0; padding:0; list-style:none; border:1px solid #000; background:#fff; width:180px; padding-left:10px; color:#000; font-family:Arial; font-size:16px;}
ul.examp li:hover {background:#B0C4DE;}
ul.examp2 {display:none; margin:0; padding:0; list-style:none;}
ul.examp2 li {margin:0; padding:0; list-style:none; border:0;}
ul.examp2 li:hover {margin:0; padding:0; list-style:none; border:0; background:#B0C4DE}
.examp li:hover ul.examp2 {display:block;}
ul.examp a:link, ul.examp a:visited {color:#000; text-decoration:none; display:block; width:100%;}
ul.examp a:hover, ul.examp a:active, ul.examp a:focus {color:#000; text-decoration:none; display:block;}
/* Für die Liste */
div.dm {height:9em;}
div.dm ul {display:none; margin-bottom:0;}
div.dm:hover ul {display:block;}
}</style>
</head>
<body>
{$header}
{$pollbox}
<div style="float: right; padding-bottom: 4px;">
{$newreply}{$newthread}
</div>
{$multipage}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
<tr>
<td class="thead" colspan="2">
<div style="float: right;">
<ul class="examp">
<li><a><b>Thema-Optionen</b></a><ul class="examp2">
<li><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
<li><a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a></li>
<li><a href="usercp2.php?action=addsubscription&tid={$tid}">{$lang->subscribe_thread}</a></li>
<li><a href="usercp2.php?action=addfavorite&tid={$tid}">{$lang->add_favorites}</a></li></ul></li>
<li><a><b>Ansicht</b></a><ul class="examp2">
<li><a href="showthread.php?mode=threaded&tid={$tid}&pid={$pid}#pid{$pid}">{$lang->threaded}</a></li>
<li><a href="showthread.php?mode=linear&tid={$tid}&pid={$pid}#pid{$pid}">{$lang->linear}</a></li></ul></li>
</ul>
</div>
<div>
<strong>{$rating} <font size=3>{$thread['subject']}</font></strong>
</div>
</td>
</tr>
<tr>
<td class="tcat" width="15%"><span class="smalltext"><strong>{$lang->author}</strong></span></td>
<td class="tcat" width="85%"><span class="smalltext"><strong>{$lang->message}</strong></span></td>
</tr>
{$posts}
{$threadpages}
<tr>
<td colspan="2" class="tfoot">
<div><strong>« <a href="showthread.php?tid={$tid}&action=nextoldest">{$lang->next_oldest}</a> | <a href="showthread.php?tid={$tid}&action=nextnewest">{$lang->next_newest}</a> »</strong></div>
</td>
</tr>
</table>...Und das hab ich in das Standardtheme eingefügt:
Code:
whatever {
display: none
}
whatever:hover {
display: block
}Hast du eine Idee wie ich den Code verändern muss, damit es zwar aufklappt, aber die Tabelle nicht verschiebt?
RE: Dropdownmenu im Showthread Template - Mak - 12.11.2006
Dazu muss ich mir mal angucken, wie es bisher aussieht. Poste mal einen Link oder einen vorher/nacher Screenshot.
RE: Dropdownmenu im Showthread Template - Grauer-Magier - 12.11.2006
Okay hier die Shots:
Vorher (also nicht aufgeklappt:
Nachher (also aufgeklappt):
RE: Dropdownmenu im Showthread Template - Michael - 12.11.2006
Ich kenne den genauen Code nicht, daher versuche es mal bitte mit diesen Alternativen:
Code:
whatever {
display: none;
}
whatever:hover {
display: inline;
}Code:
whatever {
display: none;
}
whatever:hover {
display: block;
z-index: 10;
}Code:
whatever {
display: none
}
whatever:hover {
display: inline;
z-index: 10;
}RE: Dropdownmenu im Showthread Template - Grauer-Magier - 12.11.2006
Hi, Michael!
Hab alle drei Varianten ausprobiert, hat leider nichts geändert.
Den Code hab ich oben gepostet. Zwischen den beiden "style"-Befehlen.
RE: Dropdownmenu im Showthread Template - Michael - 12.11.2006
Füge mal noch ein position: fixed; oder position: absolute; hinzu.
RE: Dropdownmenu im Showthread Template - Mak - 12.11.2006
Wenn ich das richtig verstehe, geht das nicht anders. Bei einem CSS Menü ist es nicht möglich, das, was runterklappt, über den Rest drüberzu machen. Dazu muss das Menü außerhalb der Tabelle stehen, was aber im MyBB nicht wirklich geht. Wirst es entweder mit Java machen oder irgendwo anders hin verschieben müssen.
RE: Dropdownmenu im Showthread Template - Grauer-Magier - 12.11.2006
@ Michael:
Ich hab den Code mal so angepasst:
Code:
<style type="text/css">
@media screen, projection, print {
ul.examp {margin-left:1em; padding:0; list-style:none;}
ul.examp li {float:left; margin:0; padding:0; list-style:none; border:1px solid #000; background:#fff; width:200px; padding-left:10px; color:#000; font-family: Arial; font-size:12px;}
ul.examp li:hover {background: #B0C4DE; display: block;}
ul.examp2 {display: none; margin:0; padding:0; list-style: none;}
ul.examp2 li {margin:0; padding:0; list-style: none; border:0;}
ul.examp2 li:hover {margin:0; padding:0; list-style: none; border:0; background:#B0C4DE;}
.examp li:hover ul.examp2 {display: block; position: absolute;}
ul.examp a:link, ul.examp a:visited {color:#000; text-decoration:none; display: block; width:100%;}
ul.examp a:hover, ul.examp a:active, ul.examp a:focus {color:#000; text-decoration:none; display: block;}
div.dm {height:9em;}
div.dm ul {display:none; margin-bottom:0;}
div.dm:hover ul {display: block; postition: absolute;}
}</style>Ich hab es fast geschafft! - Der einzige Wehrmutstropfen ist, dass das 1. Menü nicht direkt untereinander aufgelistet wird. Mom, ich poste einen Screenshot.
@ Mak:
Ich glaub ich habs fast hinbekommen!