+- 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: Toplinks durch Grafik ersetzen und mittig stellen (/thread-28970.html)
Seiten: Seiten:
1
2
Toplinks durch Grafik ersetzen und mittig stellen - lacrima - 05.01.2014
Hallo und Frohes neues!
Ich habe eine Frage und zwar zu den Toplinks.
Habe da tolle Grafiken für erstellt und wollte gerne dass sie die Schrift ersetzen und die Toplinks dann unter dem Header mittig sind.
Wie ihr seht, ist die Schrift noch vorhanden die soll jedoch weg. Was muss ich da genau im Template löschen und wie bekomme ich die Links mittig?
Danke im Voraus,
lacri.
RE: Toplinks durch Grafik ersetzen und mittig stellen - Kalle - 05.01.2014
Hallo
DAS ist momentan Deine Navigation:
<div class="menu">
<ul>
<li><a href="http://www.shatteredsouls.de/search.php">
<img src="images/toplinks/search.gif" alt="" title="" />Suche</a></li>
<li><a href="http://www.shatteredsouls.de/memberlist.php">
<img src="images/toplinks/memberlist.gif" alt="" title="" />Mitglieder</a></li>
<li><a href="http://www.shatteredsouls.de/calendar.php">
<img src="images/toplinks/calendar.gif" alt="" title="" />Kalender</a></li>
<li><a href="http://www.shatteredsouls.de/misc.php?action=help">
<img src="images/toplinks/help.gif" alt="" title="" />Hilfe</a></li>
</ul>
</div>
Die Pfade zu den Grafiken müssen entsprechend geändert werden, wenn Deine neuen Grafiken in einem anderen Verzeichnis liegen sollten.
In der CSS nach der Klasse "menu" suchen und diese dann um die Regeln:
text-align:center;
margin-left:auto;
margin-right:auto;
ersetzen ...eine float-regel rausnehmen.
Texte durch Grafiken zu ersetzen ist jedoch alles andere als barrierefrei ...wenn jemand die Ansicht für Grafiken ausgeschaltet hat (ggf. auch Behinderte die mit Screenreadern arbeiten) stehen dann navigationslos dar !!! Ebenso fehlen beim Druck ohne Grafiken die Linktexte auf dem Papier.
Auf der andern Seite, legen sich weiterhin vorhandene Linktexte immer ÜBER die Grafiken was oft unschön aussieht. Mit speziellen CSS-Tricks bekommt man Linktexte zwar auch exakt hinter die Grafiken (mit gesonderten span-tags und absoluten z-index Positionierungen) positioniert....ist aber ne ziemlich aufwändige CSS Angelegenheit.
Die verträglichste Lösung wäre, wenn Du rein aus CSS Deine Buttons gestaltest und die Linktexte als Beschriftung für diese Buttons belässt...ggf. gesondert etwas formatierst. Oder eben Grafiken verwendest die sich komplett hinter die vorhandenen Linktexte positionieren. Fallen solche Grafiken aus irgendwelchen Gründen aus (oder werden absichtlich ausgeschaltet), sind dann immer noch die Linktexte als Navigation vorhanden.
nette Grüsse
Kalle
RE: Toplinks durch Grafik ersetzen und mittig stellen - SvePu - 05.01.2014
Du könntest die Toplinks auch komplett über eine zusätzliche Schriftart stylen - dabei würden alle Grafiken entfallen.
Hier ein Muster:
RE: Toplinks durch Grafik ersetzen und mittig stellen - lacrima - 05.01.2014
Das wäre natürlich auch nicht verkehrt. Wie ginge das?
RE: Toplinks durch Grafik ersetzen und mittig stellen - SvePu - 05.01.2014
Wenn es dir genügt, dann erstelle ich dir später eine detaillierte Anleitung - Bin momentan nur am Netbook online und per Touchpad arbeitet es sich schlecht (jedenfalls für mich).
RE: Toplinks durch Grafik ersetzen und mittig stellen - lacrima - 05.01.2014
Das wäre wunderbar! Vielen Dank!
RE: Toplinks durch Grafik ersetzen und mittig stellen - SvePu - 05.01.2014
Hi,
nun komme ich endlich dazu, das angesprochene HowTo zu schreiben.
Wie ih gesehen habe, hast du dein aktuelles Theme geändert und ich habe darau basierend die Änderungen erstellt.
Als erstes nimm bitte die Menü-Grafiken aus dem Seitenkopf heraus. Dazu öffne das Template deines Themes: Seitenkopf > header und tausche den Menü-Block:
PHP-Code:
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
gegen:
PHP-Code:
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
</ul>
</div>
und speichere die Änderungen.
Nun tausche den Inhalt der DeinTheme > global.css (erweiterte Bearbeitung) komplett mit em Inhalt der angehängten TXT-Datei aus und speichere alles.
Die angehängte Datei beinhaltet noch einige optische Anpassungen, die du in folgenden Screenshot ersehen kannst.
Viel Spaß!
RE: Toplinks durch Grafik ersetzen und mittig stellen - lacrima - 06.01.2014
Hallo SvePu!
Vielen, lieben Dank für deine Mühe. Ich bin richtig begeistert davon.
Das einzigste, was mich noch stört ist, dass die Links allesamt doppelt sind. Wie kann ich das ändern? Außerdem fehlt mir nun der Block, indem ich zum Acp, Mod- CP, Profil und dergleichen komme.
Also, so sieht es z.Z für mich, als Admin aus:
RE: Toplinks durch Grafik ersetzen und mittig stellen - MrBrechreiz - 06.01.2014
Ich Glaube Du soltest nur den Menüblock gegen seinen austauschen und die global.css mit seiner.
RE: Toplinks durch Grafik ersetzen und mittig stellen - SvePu - 06.01.2014
Ja, wahrscheinlich hast du den {welcomeblock} beim Einfügen entfernt.
Ersetze mal bitte den kompletten Inhalt des Theme-Templates Seitenkopf > header durch diesem hier:
PHP-Code:
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>
<br />