Legende/Wer ist Online in Tabs (Organic Tabs)

Hallo

ich verschiebe diesen Thread mal in "allgemeine Diskussionen"
Begründung siehe hier

Ok, danke

Das sieht für mich nach einem Wahlschalter Menü aus, das in ein Template eingebaut wurde.
Ich habe zu diesem Menü bereits vor einiger Zeit ein Tutorial fertiggestellt, welches aber noch intern verhaart, sprich noch nicht öffentlich ist.

Keine Ahnung, wie viel Ahnung du von Templates hast, aber ich bräuchte auf jeden Fall deine Forenversion dazu.
Dann kann ich dir einen HTML Code, einen CSS Code und ein Javascript geben, wobei der HTML Code in das Template eingebaut werden muss und du die entsprechenden Abschnitte des Wer-ist-online?-Bereiches dann in die Spalten des Menüs einfügen musst.
Falls du auch einen Reiter "Chatbox" haben möchtest, ließe sich das in einem Template zum Glück ganz leicht handhaben.
Wenn du das ganze beispielsweise in die Nachricht auf der Startseite einsetzen möchtest, würde das schon komplizierter werden, aber ich hätte auch eine Lösung parat.

Aber erstmal genug davon, mit deiner Forenversion müssten wir beginnen.

Hallo Cyborg112233

Erfahrung = ich lerne

meine forumversion ist punBB = http://soulmate.forumieren.com/
den chat wuerde ich da weglassen, dafuer was anderes relevantes nehmen.

Na gut, ich schreibe dir mal schnell das wichtigste aus dem Tuto raus, hier ist es:
Vorab: Das sind die Codes für die Version punBB, die anderen Versionen haben andere Codes.
Wie gesagt sind es drei Codes, die du benötigst, ein HTML Code, ein CSS Code und ein Javascript. Diese drei Codes setzt du an drei verschiedenen Orten ein.
Das Javascript:
Das Javascript ermöglicht das Wechseln zwischen den einzelnen Reitern, ohne das Javascript siehst du zwar das Menü, kannst aber nicht zwischen ihnen hin und her springen. Bitte den Code nicht verändern, da er sonst nicht mehr funktioniert!
Einzusetzen wäre er hier:
Admin-Bereich->Module->Javascript-Code-Verwaltung->Aktivieren:"Ja"->Ein neues Javascript erstellen->Titel: Nicht relevant/Platzierung: Auf der Startseite
In das Code Fenster gibst du das hier ein:

Code:

function wahlReiter(_this){
            var getReiter  = document.getElementById('meine_reiter').getElementsByTagName('li');
            for(var i = 0; i < getReiter.length; i++){
                if(getReiter[i].id){
                    if(getReiter[i].id == _this.id){
                        getReiter[i].className = 'mein_reiter_selected';
                        document.getElementById('c' + _this.id).style.display            = 'block';
                    }
                    else{
                        getReiter[i].className = 'mein_reiter';
                        document.getElementById('c' + getReiter[i].id).style.display    = 'none';
                    }
                }
            }         
        }

Der CSS Code:
Dieser bestimmt das Aussehen des Menüs, vom Rahmen bis zum Hintergrund.
Hier eine kurze Erklärung der Classen:
.mein_reiter : Style der nicht gewählten Reiter
.mein_reiter:hover : Style des Reiter beim Mouseover-Kontakt
.mein_reiter_selected : Style des gewählten Reiter
.mein_inhalt: Style des Bereiches für den Inhalt
#meine_inhalte, #meine_reiter : Gesamter Style der Menüs
Einsetzen musst du den hier:
Admin-Bereich->Anzeige->Bilder&Farben->Farben->Reiter:CSS Stylesheet
Dort den Code ans Ende setzen und lediglich die Farbangaben etc. verändern, nicht die Classen etc.

Code:

      .mein_reiter{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .mein_reiter:hover{
          background: #b8efa1;
        }       
        .mein_reiter_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .mein_inhalt{
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
          margin-top: -1px;}
        #meine_inhalte, #meine_reiter{
          width: 400px;
          margin: auto;}

Der HTML Code:
Dieser lässt sich an verschiedenen Stellen einsetzen, z.B. auf der Nachricht auf der Startseite, aber in unserem Fall im Template index_body.
In den HTML Code werden die Namen und Inhalte der Reiter eingesetzt. Bitte auch hier sonst wieder nichts verändern.
Admin-Bereich->Allgemeines->Templates->Allgemeines->index_body
Jetzt wird es etwas komplizierter, da du jetzt das ganze so einfügen musst, dass keine größeren Schäden passieren, sprich du nichts veränderst, was du nicht verändern willst.
In die verschiedenen Reiter musst du nun verschiedene Abschnitte des Templates einsetzen, es lassen sich natürlich auch ganz normale Texte oder von dir verfasste Codes einsetzen.
[b]Für andere Nutzer: Bitte nehmt diese Änderungen nur vor, wenn ihr bereits etwas Erfahrung auf dem Gebiet HTML und Templates habt, für Neulinge ist ein Missglücken schon fast vorprogrammiert.
Auf jeden Fall, dies wäre der Code:

Code:

        <div id="meine_reiter">
            <ul><li id="o_1" class="mein_reiter_selected" onclick="wahlReiter(this);">Reiter 1</li>
                <li id="o_2" class="mein_reiter" onclick="wahlReiter(this);">Reiter 2</li>
                <li id="o_3" class="mein_reiter" onclick="wahlReiter(this);">Reiter 3</li>
                <li id="o_4" class="mein_retier" onclick="wahlReiter(this);">Reiter 4</li>
                <div class="clear"><div id="meine_inhalte"></ul>
            <div id="co_1" class="mein_inhalt">Mein inhalt 1</div>
            <div id="co_2" class="mein_inhalt" style="display: none;">Mein inhalt 2</div>
            <div id="co_3" class="mein_inhalt" style="display: none;">Mein inhalt 3</div>
            <div id="co_4" class="mein_inhalt" style="display: none;">Mein inhalt 4</div>
        </div></div></div>

In allen drei Codes finden sich immer wieder die bereits oben genannten Classen. Du könntest diese theoretisch überall in individuell gestaltete Classen umbenennen, nur kann auch das ganz leicht in die Hose gehen, weil es überall dieselben sein müssen und bei einmal vertippen, funktioniert das ganze schon nicht mehr. Mir ist das beim ersten Mal Classen umbenennen auch passiert.

Auf jeden Fall wäre das mal das Grundlegende, bei Fragen melde dich bitte. Du solltest dir auf jeden Fall etwas Zeit mitbringen und dich auch gut konzentrieren, wenn du das einsetzt.

Hallo Cyborg danke dir fuer die Muehe!
ich werde es sofort im probeforum testen.

Ok, dann warte ich auf eine Antwort!

schau mal:



habe ich richtig angefangen?

http://probni.forumieren.com/

welchen teil des codes genau setze ich ein. und, loesche ich dann den "alten" eintrag dass ich das dann nicht doppelt habe?

Gib mir mal bitte den HTML Code, den du eingesetzt hast.

Wenn du jetzt die Online Statistik nicht doppelt haben möchtest, dann natürlich rauslöschen und nur im Code einsetzen.

ich habe die legende nach einem tutorial hier schon mal geaendert und das erscheinungsbild wie jetzt auf dem probeforum.

Code:

<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<div id="meine_reiter">
                <ul><li id="o_1" class="mein_reiter_selected" onclick="wahlReiter(this);">Reiter 1</li>
                    <li id="o_2" class="mein_reiter" onclick="wahlReiter(this);">Reiter 2</li>
                    <li id="o_3" class="mein_reiter" onclick="wahlReiter(this);">Reiter 3</li>
                    <li id="o_4" class="mein_retier" onclick="wahlReiter(this);">Reiter 4</li>
                    <div class="clear"><div id="meine_inhalte"></ul>
                <div id="co_1" class="mein_inhalt"><span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}"></a></span>
                <div id="co_2" class="mein_inhalt" style="display: none;">Mein inhalt 2</div>
                <div id="co_3" class="mein_inhalt" style="display: none;">Mein inhalt 3</div>
                <div id="co_4" class="mein_inhalt" style="display: none;">Mein inhalt 4</div>
            </div></div></div>
<!-- BEGIN disable_viewonline -->

und so sieht die gesamte seite index_box auf dem normalen forum (dem eigentlichen) aus:

Code:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>  <img src="http://i41.servimg.com/u/f41/17/51/26/11/image210.png"></li><br>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>  <img src="http://i41.servimg.com/u/f41/17/51/26/11/image210.png"></li><br>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>  <img src="http://i41.servimg.com/u/f41/17/51/26/11/image210.png"></li><br>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a>  <img src="http://i41.servimg.com/u/f41/17/51/26/11/image210.png"></li><br>
   </ul>
   <p>{LOGGED_IN_USER_LIST}<p>{TOTAL_CHATTERS_ONLINE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p> {L_NOT_CONNECTED}<br> {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out --><span class="gensmall">
</span>

<!-- BEGIN message_admin_index -->
<div class="main">
   <!-- BEGIN message_admin_titre -->
   <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
   </div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
   <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   </div>
   <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
          <td class="catHead" colspan="2" height="42" width="100%">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}"></a></span>
          <!-- END switch_viewonline_link -->
          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle"><img src="{L_ONLINE_IMG}"></span>
          <!-- END switch_viewonline_nolink -->
          </td>
      </tr>
      <tr>
          <td class="row1" colspan="2" width="100%">
            <p align="center"><span class="gensmall">{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}<br><br></span>
          </td>
      </tr><br>
      <tr>
          <td class="row1" rowspan="6" align="center" valign="middle" width="50%">
              <br><p align="left"><span class="gensmall">
          
           <br>{TOTAL_POSTS}<br>

          <br>{TOTAL_USERS}<br>

          <br>{NEWEST_USER}
        </span></p>
            </td>
      </tr>
      <tr>
          <td class="row1" width="50%"><span class="gensmall">{TOTAL_USERS_ONLINE}

        <br> {LOGGED_IN_USER_LIST}</span></td>
      </tr>
        <td width="50%"><br>{L_CONNECTED_MEMBERS}</td>
          <!-- BEGIN switch_chatbox_activate -->
      <tr>
          <td class="row1" width="50%">
            <span class="gensmall"><br>{TOTAL_CHATTERS_ONLINE}
          <br>{CHATTERS_LIST}
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}',<br> '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
            </span>
          </td>
      </tr>
      <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->
<br><br>
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
   <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
   </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Okay, also ich bin mir auf Anhieb nicht sicher, woran das Problem liegt. Du kannst vielleicht noch das Javascript, einstellen, so wie du es eingesetzt hast.
Bist du dir sicher, dass du sonst alles richtig gemacht und eingesetzt hast ?
Auf jeden Fall bin ich jetzt erstmal off bis morgen, wenn jemand den Fehler findet, darf er sich gerne melden, ich schaue frühstens morgen wieder drüber, sorry.

okay schoenes wochenende und danke auf jeden fall dass wir es soweit geschafft haben
edit: java habe ich so wie oben beschrieben eingesetzt bei mir heisst startseite/homepage und habe auf Ja geklickt.

es funktioniert

http://soulmate.forumieren.com/





habe noch fragen

welcher befehl ist zustaendig fuer den text in der statistik: wir haben xxx beitraege in xxx themen
den ersten teil habe ich, mir fehlt das in xxx themen?

auf dem index war das untere bild (footer) verschoben, dass habe ich "zurechtgerueckt" im CSS, doch in anderen bereichen wie auf dem portal, oder wenn man auf beitraege geht etc. ist es jetzt zu weit rechts .. ehm..

Ok, schön wenn's doch noch geklappt hat, sonst hätte ich doch jetzt noch drauf geguckt.
Mit dem Footer muss ich dir gleich sagen, kann ich dir nicht sagen, von CSS fürs Forum hab ich wenig Ahnung, eher in HTML Codes etc.
Das in xxx Themen ist normal gar nicht dort vorhanden, das wird nur in der Statistik im Footer angezeigt, nicht bei Wer-ist-online.
Aber versuch doch mal die passende Variable einzusetzen, nämlich diese hier: 43438
Da werden dir dann die Themen angezeigt.

Ich funke nur ungerne dazwischen, aber diese Variable funktioniert nur in der Nachricht auf der Startseite, sowie Themen und Posts. In den Templates geht das nicht

variable bin zwar aelter wie du aber net schlauer punkto css und dem ganzen. setz ich dass in {}?

kannst du mir nur noch sagen was ich im css aendern muss um runde tabs zu bekommen? habe viele css codes gefunden weiss aber jetzt nicht was ich an deinem aendern darf und was nicht, um nicht alles zu verlieren.

dass mit dem footer bild versteh ich nicht. nachdem ich alles reingestellt habe, war es auch im index verstellt. dass wusste ich zurecht zu ruecken im CSS, aber dann sah ich dass es auch in anderen bereichen verstellt ist, dass weiss ich nicht zurecht zu ruecken.

edit: das mit den beitraegen koennen wir lassen wenn es nicht in dieser version so funktioniert. habe es im portal in der statistik, wenn es von meinen usern interessiert kann ja da schauen. mann kann nicht alles haben (ich finde die legende klasse!)

Die Variable kopierst du so, wie ich sie da hingeschrieben hab, wenn du mal im Template guckst, da gibt's noch ganz viele andere, auch in solchen Klammern geschrieben.
Im CSS darfst du eigentlich alles ändern, außer die Classen, wie es dir beliebt. Auf Google, selfhtml.org und css4you, bestimmt auch auf ohne-css-gehts.net oder wie das heißt, findest du bestimmt den richtigen Code, ein Tipp, das sind Pixelangaben. Aber nicht alle Browser interpretieren das auch richtig oder überhaupt, also nicht wundern.

Wie gesagt, mit dem Footer weiß ich auch nicht weiter, sorry.

ok Cyborg danke dir ich werde rumprobieren.
und wegen footer-bild ebenfalls, wenn ich es nicht hinbekomme habt ihr wieder einen thread von mir

Das darf, bzw. muss dann jemand anderes übernehmen.

das problem footer-bild habe ich geloest, es lag an einem </div> zuviel