Extra Top Menu Umgestaltung

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Extra Top Menu Umgestaltung

      Hallo liebe Community,

      ich komme gerade wieder an die Grenzen meiner Fähigkeiten *uff*...
      Geplant ist, dass die Elemente aus dem "Extra Top Menu" (die Leiste, die unten oder oben, je nach Einstellung für angemeldete User angezeigt wird) an einer anderen Stelle angezeigt werden.

      Ich habe eine neue User Section gebaut, die im Header-Bereich sitzt und im Prinzip ähnlich wie die Facebook-Buttons funktionieren soll. D.h. Freundesanfragen, allgemeine Accountverwaltung, Statusupdates (Spy).

      Da mir aber die Funktionalität, die Boonex hier mitbringt nicht gefällt und ich diese Entsprechend umbauen will, brauche ich einige Daten aus der Datenbank, mit denen entsprechend gearbeitet wird.

      Jetzt baut sich Boonex aber dieses komplette Menü da unten generisch zusammen und klebt alles in Arrays, die dann am Ende komplett ausgelesen werden.

      Die entsprechenden Dateien hierzu dürften die folgenden sein:
      - extra_top_menu.html (Templatedatei mit VIEL Javascript)
      - inc/classes/BxDolMemberMenu.php (hier baut er zusammen ;) )
      - member_menu_queries.php (wenn ich das richtig verstehe, werden hier die Abfragen für die einzelnen Items generiert)


      Mein Weg bisher:

      In der Datei inc/design.inc.php habe ich folgende Funktion geschrieben:

      Quellcode

      1. function getUserSection() { if ($GLOBALS['logged']['member'] || $GLOBALS['logged']['admin']) { // GENERATE USER SECTION $user_menu_section = $GLOBALS['oSysTemplate'] -> parseHtmlByName('dT_UserSection.html', array()); } else { // GENERATE SIGN-UP/IN Section $user_menu_section = $GLOBALS['oSysTemplate'] -> parseHtmlByName('dT_LoginJoinSection.html', array()); } return $user_menu_section; }


      Daraufhin habe ich die Funktion getMainLogo() erweitert:

      Quellcode

      1. function getMainLogo() { global $dir, $site; $sFileName = getParam('sys_main_logo'); $sUserSection = getUserSection(); // --BEN, 02.04.2013 $sTopArea = getTopRightSection(); // --BEN, 13.04.2013 if(!file_exists($dir['mediaImages'] . $sFileName)) return ''; //return '<a href="' . BX_DOL_URL_ROOT . '"><img src="' . $site['mediaImages'] . $sFileName . '" class="mainLogo" alt="logo" /></a>'; return '<a href="' . BX_DOL_URL_ROOT . '"><img src="' . $site['mediaImages'] . $sFileName . '" class="mainLogo" alt="logo" /></a>' . $sTopArea . $sUserSection; }

      (das kann man mit Sicherheit schöner lösen, es funktioniert aber für den Moment)


      Wie im ersten Codeschnippsel ersichtlich, habe ich das Template um zwei Template-Dateien erweitert. Uns interessiert jetzt im Prinzip die Datei templates/base/dT_UserSection.html:

      Quellcode

      1. <div style="position: absolute; top: 105px; right: 0; z-index: 200;"> <div class="navbar"> <div class="navbar-inner navbar-inner-small"> <ul class="nav"> <li class="dropdown"> <a rel="tooltip" class="dropdown-toggle" data-toggle="dropdown" href="#" data-original-title="Postfach"><i class="icon-envelope-alt icon-large"></i><span id="badge_Mail" class="badge badge-small badge-important"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="z-index: 2;"> <li><a href="mail.php?mode=inbox"><i class="icon-inbox icon-large"></i> Posteingang <span class="badge">12</span></a></li> <li><a href="mail.php?mode=outbox"><i class="icon-share-alt icon-large"></i> Gesendet <span class="badge">9</span></a></li> <li><a href="mail.php?mode=trash"><i class="icon-trash icon-large"></i> Papierkorb <span class="badge">0</span></a></li> <li><a href="mail.php?mode=compose"><i class="icon-pencil icon-large"></i> Verfassen</a></li> </ul> </li> <li class="divider-vertical divider-small"></li> <li class="dropdown" id="us_notifications"> <a rel="tooltip" class="dropdown-toggle" data-toggle="dropdown" href="#" data-original-title="Benachrichtigungen"><i class="icon-globe icon-large"></i><span id="badge_Spy" class="badge badge-small badge-important"></span></a> <ul id="badge_Spy_notifications" class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="z-index: 2; width: 350px;"> <li> <div class="umenu-notification"> <ul class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="height: 50px; width: 50px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABYklEQVR4nO2UMY6DMBBFc/+jTOnKlRs3Ln0An8FX8FaDBgRFwpKn1f7iSUmIRo/H4Necc/1nXrQAjQLQAjQKQAvQKAAtQKMAtACNAtACNApAC9AoAC1AowC0AI0C0AI0CkAL0CgALUCjALQAze0ApZRlZsvMVs759D9mtlJK6MxHArTWlpntPrfWdv+ptb4l+8TMxwLknC+f0JxzjTG2Jxllc87LzNYYY7vJWuutmUgAl3Ahv4ljoJTSTrb3vsxsW/V47dOZWICrdfXvY4xT2fie995/ZSYSwNfVV7OUsl3zp3cm61tw/P3OzK8HSCmdyvrNHYnCV2t+Z+bXA/hpHA+zuM7xpqJoXO14IN6ZiQSYc/8uHw+sK9m45v5k48n/yUwswF9HAWgBGgWgBWgUgBagUQBagEYBaAEaBaAFaBSAFqBRAFqARgFoARoFoAVoFIAWoFEAWoBGAWgBGgWgBWh+AP6jH/MlZDmNAAAAAElFTkSuQmCC"> </a> <a class="pull-right" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="height: 50px; width: 50px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABYklEQVR4nO2UMY6DMBBFc/+jTOnKlRs3Ln0An8FX8FaDBgRFwpKn1f7iSUmIRo/H4Necc/1nXrQAjQLQAjQKQAvQKAAtQKMAtACNAtACNApAC9AoAC1AowC0AI0C0AI0CkAL0CgALUCjALQAze0ApZRlZsvMVs759D9mtlJK6MxHArTWlpntPrfWdv+ptb4l+8TMxwLknC+f0JxzjTG2Jxllc87LzNYYY7vJWuutmUgAl3Ahv4ljoJTSTrb3vsxsW/V47dOZWICrdfXvY4xT2fie995/ZSYSwNfVV7OUsl3zp3cm61tw/P3OzK8HSCmdyvrNHYnCV2t+Z+bXA/hpHA+zuM7xpqJoXO14IN6ZiQSYc/8uHw+sK9m45v5k48n/yUwswF9HAWgBGgWgBWgUgBagUQBagEYBaAEaBaAFaBSAFqBRAFqARgFoARoFoAVoFIAWoFEAWoBGAWgBGgWgBWh+AP6jH/MlZDmNAAAAAElFTkSuQmCC"> </a> <div> <a href="#" style="font-weight: bold;">Benny</a> hat einen Kommentar an deine Pinnwand geschrieben<br> <small>vor 10 Minuten</small> </div> </ul> </div> </li> </ul> </li> <li class="divider-vertical divider-small"></li> <li class="dropdown" id="us_friend-request"> <a rel="tooltip" class="dropdown-toggle" data-toggle="dropdown" href="#" data-original-title="Freundschaftsanfragen"><i class="icon-group icon-large"></i><span id="badge_Friends" class="badge badge-small badge-important"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="z-index: 2; width: 350px;"> <li> <div class="umenu-friend-request"> <ul class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="height: 50px; width: 50px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABYklEQVR4nO2UMY6DMBBFc/+jTOnKlRs3Ln0An8FX8FaDBgRFwpKn1f7iSUmIRo/H4Necc/1nXrQAjQLQAjQKQAvQKAAtQKMAtACNAtACNApAC9AoAC1AowC0AI0C0AI0CkAL0CgALUCjALQAze0ApZRlZsvMVs759D9mtlJK6MxHArTWlpntPrfWdv+ptb4l+8TMxwLknC+f0JxzjTG2Jxllc87LzNYYY7vJWuutmUgAl3Ahv4ljoJTSTrb3vsxsW/V47dOZWICrdfXvY4xT2fie995/ZSYSwNfVV7OUsl3zp3cm61tw/P3OzK8HSCmdyvrNHYnCV2t+Z+bXA/hpHA+zuM7xpqJoXO14IN6ZiQSYc/8uHw+sK9m45v5k48n/yUwswF9HAWgBGgWgBWgUgBagUQBagEYBaAEaBaAFaBSAFqBRAFqARgFoARoFoAVoFIAWoFEAWoBGAWgBGgWgBWh+AP6jH/MlZDmNAAAAAElFTkSuQmCC"> </a> <a href="#" style="font-size: 12px; font-weight: bold">Benny</a><br> 2 gemeinsame Freunde <div class="friend-approve-section pull-right"> <a class="btn btn-mini" href="#"><i class="icon-ok" style="color: green;"></i></a> <a class="btn btn-mini" href="#"><i class="icon-remove" style="color: red;"></i></a> </div> </ul> </div> </li> <li> <div class="umenu-friend-request"> <ul class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="height: 50px; width: 50px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABYklEQVR4nO2UMY6DMBBFc/+jTOnKlRs3Ln0An8FX8FaDBgRFwpKn1f7iSUmIRo/H4Necc/1nXrQAjQLQAjQKQAvQKAAtQKMAtACNAtACNApAC9AoAC1AowC0AI0C0AI0CkAL0CgALUCjALQAze0ApZRlZsvMVs759D9mtlJK6MxHArTWlpntPrfWdv+ptb4l+8TMxwLknC+f0JxzjTG2Jxllc87LzNYYY7vJWuutmUgAl3Ahv4ljoJTSTrb3vsxsW/V47dOZWICrdfXvY4xT2fie995/ZSYSwNfVV7OUsl3zp3cm61tw/P3OzK8HSCmdyvrNHYnCV2t+Z+bXA/hpHA+zuM7xpqJoXO14IN6ZiQSYc/8uHw+sK9m45v5k48n/yUwswF9HAWgBGgWgBWgUgBagUQBagEYBaAEaBaAFaBSAFqBRAFqARgFoARoFoAVoFIAWoFEAWoBGAWgBGgWgBWh+AP6jH/MlZDmNAAAAAElFTkSuQmCC"> </a> <a href="#" style="font-size: 12px; font-weight: bold">Raph</a><br> 6 gemeinsame Freunde <div class="friend-approve-section pull-right"> <a class="btn btn-mini" href="#"><i class="icon-ok" style="color: green;"></i></a> <a class="btn btn-mini" href="#"><i class="icon-remove" style="color: red;"></i></a> </div> </ul> </div> </li> </ul> </li> <li class="divider-vertical divider-small"></li> <li class="dropdown" id="us_account"> <a rel="tooltip" class="dropdown-toggle" data-toggle="dropdown" href="#" data-original-title="Account"><i class="icon-user icon-large"></i></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="z-index: 2;"> <li><a href="member.php"><i class="icon-user icon-large"></i> Account-&Uuml;bersicht</a></li> <li><a href="#"><i class="icon-user icon-large"></i> Profil ansehen</a></li> <li><a href="#"><i class="icon-edit icon-large"></i> Profil bearbeiten</a></li> <li><a href="#"><i class="icon-cogs icon-large"></i> Privatsph&auml;re</a></li> </ul> </li> <li class="divider-vertical divider-small"></li> <li> <a rel="tooltip" href="logout.php?action=member_logout" data-original-title="Logout"><i class="icon-off icon-large"></i></a> </li> </div> </div> </div> <script type='text/javascript'> $(document).ready(function () { if ($("[rel=tooltip]").length) { $("[rel=tooltip]").tooltip(); } }); </script>



      (kurze Info: bei meinem Projekt ist ein Bootstrap eingebunden, das hier style-technisch einiges macht...)


      Was ich nun erreichen will:
      Irgendwie muss ich aus der Datenbank viele Dinge auslesen (Bild des Posters, Statusmeldung, ggf. das kommentierte Bild etc. etc.), die ich hier an der richtigen Stelle übergebe. Und um ehrlich zu sein habe ich gerade vollkommene Ratlosigkeit, wie ich das am besten angehe.


      Ich weiß, das hier ist eine Mammut-Frage. Aber vielleicht gibts hier den ein oder anderen, der dieses Projekt interessant findet und Lust, Zeit und Know-How hat zu helfen :)

      Liebe Grüße
      bquarta


      EDIT: Gibts ne möglichkeit codeschnippsel hier nicht als "Einzeiler" darzustellen? o_O

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von bquarta ()

    • extra menu

      also ich habe bei mir auf der seite so was ähnliches gemacht und habe die originale leiste in den header integriert,

      Ich habe die Leiste im admin bereich bei Einstellungen (top, buttom, static) auf static eingestellt, dadurch wird die leiste fest auf der webseite, anschließend hab ich in general.css folgende Einstellungen vorgenommen


      (ca. Zeile 880 bei mir)

      /* ---Zusatzleiste Grösse verstellen--- */


      div.extra_top_menu table.fixed_menu {
      width:1000px; //hier gibst du die Größe deiner Webseite ein einfach austesten)
      min-width:700px; //das ist deine mindestgröße deiner Leiste
      border: 0px solid #8D8D8D; //liniedicke außenrand
      height:27px;
      margin:0 auto;
      }

      div.extra_top_menu table.fixed_menu td
      {
      border-top: 15px solid transparent; //abstand von oben+farbhintergrund über der leiste, wenn abstand gemacht wird
      }


      Spiel einfach damit rum, bis es so passt wie du es möchtest.
      wenn du oben kein Platz hast, oder zu wenig und willst dir nicht viel arbeit machen, lade in deiner Basiseinstellung einfach ein Bild rein, was du als Hintergrund nutzen willst oder wenn es leer sein soll auch ein leeres bild z.B. in .png Datei (transparentes Bild).

      Ich habe bei mir z.B. ein bild verwendet mit der Gr. 1.000px × 30px
      hier: my-clip.eu/media/images/1370126956.png

      Viel Spass

      Achtung!!! Musst wahrscheinlich nach jeder Änderung Cache löschen und am besten mit STRG+F5 aktualisieren!

      :freuen:
    • Hallo Albg,

      danke für deine Antwort. Leider reicht das pure versetzen und anpassen der Leiste in unserem Fall nicht aus. Wir wollen nämlich gerne erreichen, dass (ähnlich wie bei Facebook) z.B. neue Freundschaftsanfragen über das User-Menu direkt beantwortet werden können (und nicht mit der Umleitung auf die Extra-Seite) und das Statusmeldungen (XY hat das Bild Z kommentiert) in der Meldung nicht nur als reiner Textlink, sondern mit dem Avatar und ggf. Bild mit angezeigt werden. Das sind dann zusätzliche Werte, die mit ausgelesen werden müssen.

      Liebe Grüße
      bquarta
      Bilder
      • 01a.jpg

        88,44 kB, 434×268, 211 mal angesehen
      • 02a.jpg

        92,44 kB, 434×268, 213 mal angesehen
    • Naja, deshalb hab ich ja dieses Topic eröffnet, weil es eben noch nicht funktioniert ;)

      Um das ganze so hinzubekommen wie auf den Bildern musst du erst mal ein Bootstrap einbinden. Das erfordert aber dann ein aktuelles jquery und das gibt Folgeprobleme an denen wir jetzt seit eineinhalb Jahren fixen -.-...

      Ob wir also eine "Out of the Box"-Lösung anbieten können, wenn das alles mal steht, kann ich jetzt noch nicht sagen...

      Liebe Grüße
      bquarta