[Frage] Menüleiste für Tabacco

Xastrax · Post by **Xastrax** » Mon Jun 30, 2008 10:17 pm

Guten abend,
Ich bin seit einigen Tagen von Wordpress auf s9y umgestiegen und bin bis jetzt sehr zufrieden.
Als Design verwende ich eine angepasste version des Tabacco styles. Ich würde diesem Style nun aber gern eine Menüleiste verpassen mit 4 oder 5 Buttons.
In meiner Thorie würde ich nun versuchen das ganze mit einer Index.tpl zu realisieren. Da Tabacco so eine Datei nich hat kann ich dafür die Standart Index.tpl (templates/default/index.tpl) nehmen ? Wenn ja was muss ich da für einen Code für die Menüleiste eintragen. Reicht es wenn ich ganz einfach mit HTML- Code eine Tabelle erstelle und da die Buttens reinpacke oder muss ich da anders vorgehen ???

MfG
Chris

Post by **garvinhicking** » Tue Jul 01, 2008 9:29 am

Hi!

Ja, das ist richtig -- Du kannst die index.tpl vom default template rüberkopieren und dann wie gewünscht anpassen. Den HTML-Code kannst du einfügen wie du willst; NAvigationen per Ordered/Unordered Lists einzufügen ist von der Barrierefreiheit etwas besser als Tabellen...

Grüße,
Garvin

Post by **yellowled** » Tue Jul 01, 2008 9:42 am

An geeigneter Stelle der index.tpl:

Code: Select all

<div id="navigation">
    <ul>
         <li><a href="#">Link #1</a></li>
         <li><a href="#">Link #2</a></li>
         <li><a href="#">Link #3</a></li>
         <li><a href="#">Link #4</a></li>
    </ul>
</div>

In style.css:

Code: Select all

#navigation,
#navigation ul {
    float: left;
    width: 100%;
}

#navigation li {
    float: left;
    width: auto;
}

#navigation a { display: block; }

Das ist natürlich nur der absolut minimal notwendige CSS-Code, damit das Menü korrekt dargestellt wird - er müsste noch an die Optik von Tabacco angepasst werden.

Damit die floats des Menüs gecleart werden, muss folgender Code in die style.css:

Code: Select all

#mainpane { clear: left; }

wobei ich in diesem Fall davon ausgehe, dass Du die Navigation zwischen <div id="serendipity_banner">...</div> und <table id="mainpane"> setzte. Ansonsten muss eben statt #mainpane das im Quellcode auf die Navigation folgende Element clear: left; zugewiesen bekommen.

Eine andere Variante wäre natürlich, ein "modernes" Template wie etwa Bulletproof zu verwenden, welches bereits eine bequeme Konfiguration dieser Menüleiste über die Verwaltungsoberfläche bietet. Sollte Dir Tabacco ausnehmend gut gefallen, könnte man auch die Grafiken und das CSS von Tabacco in ein Bulletproof-Colorset umwandeln.

YL

Xastrax · Post by **Xastrax** » Sat Jul 05, 2008 9:14 am

Guten Morgen,
erstmal herzlichen Dank für die vorschläge das hat mich nen gutes Stück vorwärts gebracht. Leider habe ich nun ein neues Problem.
Ich wollte nun das Menü mit kleinen Grafiken und einem Mouse over effekt umsetzten doch nun bekomme ich irgendwie nen syntax fehler um die ohren der eigendlich nicht da sein sollte weil der Quelltext stimmt (es sei denn ich bin Betriebsblind)

Hier erstmal der Link zu meinem Blog http://legt-los.de/blog/index.php

Und hier meine Index.tpl um mein Werk offen zu legen.

Code: Select all

{if $is_embedded != true}
{if $is_xhtml}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{else}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
{/if}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang}" lang="{$lang}">
<head>
    <title>{$head_title|@default:$blogTitle} {if $head_subtitle} - {$head_subtitle}{/if}</title>
    <meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
    <meta name="Powered-By" content="Serendipity v.{$head_version}" />
    <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
    <link rel="alternate"  type="application/rss+xml" title="{$blogTitle} RSS feed" href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/index.rss2" />
    <link rel="alternate"  type="application/x.atom+xml"  title="{$blogTitle} Atom feed"  href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/atom.xml" />
{if $entry_id}
    <link rel="pingback" href="{$serendipityBaseURL}comment.php?type=pingback&entry_id={$entry_id}" />
{/if}

{serendipity_hookPlugin hook="frontend_header"}


<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "img/blank.jpg";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "img/gal.jpg"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "img/blank.jpg";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "img/gb.jpg"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "img/blank.jpg";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "img/uber.jpg"; /* dritte Highlight-Grafik */


function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>

</head>

<body>
{else}
{serendipity_hookPlugin hook="frontend_header"}
{/if}

{if $is_raw_mode != true}
<div id="serendipity_banner">
    <h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
    <h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
</div>

<div id="navigation">
<!--Anfang Menü -->
    <table width="500" border="0" align="right">
  <tr>
  		<!--Menü Bild zeig wo das "versteckte" Menü ist -->
		<td><img src="img/menu.jpg" alt="Menu" /></td>
		
		<!--Menüpunkt 1 -->
		<td><a href="/blog/index.php?/pages/uberme.html"
   			onmouseover="Bildwechsel(0, Highlight1)"
   			onmouseout="Bildwechsel(0, Normal1)"><img src="img/blank.jpg"
   			width="130" height="30" border="0" alt="Ueber mich"></a></td>
		
		<!--Menüpunkt 2 -->
		<td><a href="/blog/index.php?/pages/gallery.html"
   			onmouseover="Bildwechsel(1, Highlight2)"
   			onmouseout="Bildwechsel(1, Normal2)"><img src="img/blank.jpg"
   			width="130" height="30" border="0" alt="Gallerie"></a></td>
		
		<!--Menüpunkt 3 -->
		<td><a href="/blog/index.php?/pages/guestbook.html"
   			onmouseover="Bildwechsel(2, Highlight3)"
   			onmouseout="Bildwechsel(2, Normal3)"><img src="img/blank.jpg"
   			width="130" height="30" border="0" alt="Guestbook"></a></td>  
  </tr>
</table>
<!--Ende Menü -->
</div>

<table id="mainpane">

    <tr>
{if $leftSidebarElements > 0}
        <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
        <td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
        <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}
    </tr>
</table>
{/if}

{$raw_data}
{serendipity_hookPlugin hook="frontend_footer"}
{if $is_embedded != true}
</body>
</html>
{/if}

Post by **yellowled** » Sat Jul 05, 2008 8:41 pm

Xastrax wrote:

Code: Select all

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>

{ und } müssen in Template-Dateien maskiert werden - kurz gesagt (die Nudelholzfraktion lauert, mich vom Rechner zu entfernen): alle {, die nicht zu Smarty, sondern Javascript gehören, müssen durch {ldelim}, alle } durch {rdelim} ersetzt werden, oben also:

Code: Select all

function Bildwechsel (Bildnr, Bildobjekt) {ldelim}
  window.document.images[Bildnr].src = Bildobjekt.src;
{rdelim}
</script>

YL

[Frage] Menüleiste für Tabacco

[Frage] Menüleiste für Tabacco

Re: [Frage] Menüleiste für Tabacco