Seite 1 von 6

Button Menu Mod

Verfasst: 04.05.2012 16:49
von amour
hallo

ich habe eine frage und zwar habe ich den button menü mod installiert und er ist auch wirklich super
nur habe ich jetzt auf dieser seite:
http://www.mmog-heaven.net/dm_video/index.php
etwas tolles gesehn und zwar im menü stehen vor dem titel bilder.
und das würde ich jetzt auch gern haben...kann mir jemand dabei helfen?
bitte.

MOd: http://www.phpbb.com/community/viewtopi ... start=1395 auf der 1ten seite
style : prosivler

Re: Button Menu Mod

Verfasst: 04.05.2012 17:24
von Crizzo
Hi,

das ist doch kein Problem. Du hast jetzt quasi sowas eingebaut (hier stark vereinfacht):

Code: Alles auswählen

<ul>
<li><a href="#">Link 1</li>
<li><a href="#">Link 2
<ul>
<li><a href="#">U-Link 1</li>
<li><a href="#">U-Link 2</li>
<li><a href="#">U-Link 3</li>
</ul>

</li>
<li><a href="#">Link 3</li>
</ul>
Jetzt musst du einfach dem per CSS-Regel den "ausklappenden Links " (#menu li li) ein "background-image" geben und den Link-Text halt dann entsprechend per "padding-left" nach rechts schieben. Fertig.

Re: Button Menu Mod

Verfasst: 04.05.2012 21:09
von amour
hallo danke für die rasche antwort aber sowas kann ich nicht finden und war auch nicht bei der install.xml dabei...
und ich habe schon mehrere datein durchsucht aber nichts gefunden.

Re: Button Menu Mod

Verfasst: 04.05.2012 21:17
von Crizzo
In der Install_mod.xhtml steht bei overall_header.html diese Anweisung

Add after:

Code: Alles auswählen

<!-- IF .buttons -->
      <span class="corners-bottom" style="height:0px;"><span style="display: none;"></span></span></div>
    </div>
    <div id="menu" style="clear:both;margin-top:-3px;background: url('{T_THEME_PATH}/images/menu/{S_MENU_COLOR}/menu_bg.gif') repeat-x;">
    	<div class="inner">
    	<span class="menu_corner-left" style="background: url('{T_THEME_PATH}/images/menu/{S_MENU_COLOR}/menu_corner.gif') no-repeat;"></span>
    	<span class="menu_corner-right" style="background: url('{T_THEME_PATH}/images/menu/{S_MENU_COLOR}/menu_corner_right.gif') no-repeat;"></span>
    <!-- IF S_DISPLAY_SEARCH and S_MENU_SEARCH -->
    	<div id="top-search" style="<!-- IF S_MENU_ALIGN == 'right' -->float: left;<!-- ELSE -->float: right;<!-- ENDIF -->background: transparent url('{T_THEME_PATH}/images/menu/{S_MENU_COLOR}/menu_search.gif') no-repeat scroll 0 0;">
    		<form action="{U_SEARCH}" method="post" id="search">
    		<fieldset>
    			<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="menu_search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
    			{S_SEARCH_HIDDEN_FIELDS}
    		</fieldset>
    		</form>
    	</div>
    <!-- ENDIF -->
    	<ul>
    	<!-- BEGIN buttons -->
    		<li style="float:{S_MENU_ALIGN};"<!-- IF .buttons.sub --> onmouseover="getElementsByTagName('ul')[0].style.display = 'block';" onmouseout="getElementsByTagName('ul')[0].style.display = 'none';"<!-- ENDIF -->>
          <a href="{buttons.URL}" title="{buttons.NAME}"<!-- IF buttons.EXTERNAL --> target="_blank"<!-- ENDIF --> style="font-weight:{S_MENU_WEIGHT};text-transform:{S_MENU_TEXT_TRANSFORM};">{buttons.NAME}</a>
          <!-- IF .buttons.sub -->
            <ul>
              <!-- BEGIN sub --><li><a href="{sub.URL}" title="{sub.NAME}"<!-- IF sub.EXTERNAL --> target="_blank"<!-- ENDIF --> style="font-weight:{S_MENU_WEIGHT};text-transform:{S_MENU_TEXT_TRANSFORM};">{sub.NAME}</a></li><!-- END sub -->
          	</ul>
        	<!-- ENDIF -->
        </li>
      <!-- END buttons -->
    	</ul>
    <!-- ENDIF -->
Ist natürlich durch die Template-Abfragen und Co ein wenig unübersichtlich. Aber im Prinzip sind das zwei in einander verschaltelte unsortierte Listen.

Aber das kann dir ja egal sein, ruf einfach dein Forum auf, schau dir den Quelltext an und dann schreibst du dein CSS dazu. Das CSS muss sich sowieso auf die Ausgabe beziehen und nicht auf den unverarbeiteten Template-Code. :wink:

Re: Button Menu Mod

Verfasst: 04.05.2012 22:16
von vallehru
Gibt es für diese MOD eine deutsche Übersetzung?

Re: Button Menu Mod

Verfasst: 04.05.2012 22:20
von Crizzo
vallehru hat geschrieben:Gibt es für diese MOD eine deutsche Übersetzung?
Wäre mir nicht bekannt. Aber es gibt nur eine Sprachdatei, die ist fürs Admin-Panel und dann müsstest du da nur mal eben ca. 70 Wörter, Sätze übersetzen. Wäre auch schnell alleine machbar. :)

Re: Button Menu Mod

Verfasst: 04.05.2012 22:38
von Gast234254

Re: Button Menu Mod

Verfasst: 05.05.2012 00:29
von amour
ich danke dir für die hilfe..
aber ehrlich gesagt kenn ich mich nicht gut aus.
ich hörte das ich es mit <li> machen muss
aber wo nur..und wie mach ich die css`??

sagen wir ich mach mal die css.
mit dem namen für den 3 menüpunkt das 1 button

.menu3 {
background-color: #000000;
background-image: url("{T_THEME_PATH}/images/logo.gif");
)

würde es so gehn??weil es soll ja nicht in jedem menüpunkt das selbe bild sein
bei manchen soll eines sein und bei anderen nicht.
es tut mir leid falls ich zu wenig weiß aber ich lerne seit ein paar wochen erst php

Re: Button Menu Mod

Verfasst: 05.05.2012 04:40
von hackepeter13
amour hat geschrieben:es tut mir leid falls ich zu wenig weiß aber ich lerne seit ein paar wochen erst php
Das hat aber wenig mit php zu tun, sondern mehr mit html/css. ;)

Probiere mal das (aus dem Stehgreif & ungetestet):

Suche:

Code: Alles auswählen

<!-- BEGIN sub --><li><a href="{sub.URL}" title="{sub.NAME}"<!-- IF sub.EXTERNAL --> target="_blank"<!-- ENDIF --> style="font-weight:{S_MENU_WEIGHT};text-transform:{S_MENU_TEXT_TRANSFORM};">{sub.NAME}</a></li><!-- END sub -->
Und ersetze mit:

Code: Alles auswählen

<!-- BEGIN sub --><li class="{sub.NAME}"><a href="{sub.URL}" title="{sub.NAME}"<!-- IF sub.EXTERNAL --> target="_blank"<!-- ENDIF --> style="font-weight:{S_MENU_WEIGHT};text-transform:{S_MENU_TEXT_TRANSFORM};">{sub.NAME}</a></li><!-- END sub -->
Sprich li bekommt eine class zugeordnet, welche automatisch immer das Submenü-Name bekommt.

Nun musst du zu jedem Submenü-Name einen entsprechenden Eintrag in die CSS-Datei machen.

Beispiel:
Du hast ein Menüpunkt "Hilfe" und als Submenü steht ja dort "FAQ", "BBCode Anleitung", "Nutzungsbedingungen" und "Datenschutzrichtlinien".

Nun öffnest du die css und fügst bspw. für "FAQ", sowie "Nutzungsbedingungen" ein:

Code: Alles auswählen

li .FAQ {
 background-image: url("{T_THEME_PATH}/images/menu_faq.gif");
 padding-left: 25px;
}

li .Nutzungsbedingungen{
 background-image: url("{T_THEME_PATH}/images/menu_faq.gif");
 padding-left: 25px;
}
(Angaben zum Images und Padding natürlich ensprechend anpassen!)

PS: Style aktualisieren nicht vergessen.

Re: Button Menu Mod

Verfasst: 05.05.2012 05:42
von vallehru