Buttons/Links Topbar

[g0l0m]

Hallo,

wie kann ich im Greenmile Template Buttons in der Topbar einfügen.

Übermich Firma Shop Galerie


Wie kann ich die Seiten anschließend befüllen / ansprechen. Die Buttons Shop und Galerie sollen eine Weiterleitung sein.

Danke für eure Hilfe

[yellowled]

wie kann ich im Greenmile Template Buttons in der Topbar einfügen.

Übermich Firma Shop Galerie

Wie kann ich die Seiten anschließend befüllen / ansprechen. Die Buttons Shop und Galerie sollen eine Weiterleitung sein.

Mal sehen, wenn ich das richtig verstehe, möchtest Du so etwas wie im Connections-Template ganz oben, also eine zusätzliche, horizontale Menüleiste (ob nun über oder unter der Kopfgrafik ist dabei letztlich egal), in das Green Mile-Template integrieren, richtig? Sollen es grafische Buttons sein oder reichen textbasierte (wie in Connections)?

Da Shop und Galerie bereits bestehen, braucht man auf diese lediglich verlinken, insofern entfällt da "befüllen" (wenn ich "befüllen" richtig deute ). Die Seiten Über mich und Firma sind vermutlich reine Infoseiten, die einmalig erstellt und bestenfalls sporadisch geändert werden? Das macht man dann am besten über das zusätzliche s9y-Plugin Static Page. Damit kann man statische Seiten in das Blog integrieren, die jedoch nicht (unbedingt) zwischen den normalen Einträgen angezeigt werden, aber wie der Rest des Blogs formatiert werden. Die verlinkt man dann halt auch mit den Buttons in der Navbar - und dann ist das quasi fertig.

[g0l0m]

Genau eine horizontale Leiste wie in Connections textbasiert.
Koenntest du mir sagen, welche Dateien ich anpaßen muss und wie ich die Static Pages einrichten muss damit sie beim drücken des Links auch erscheinen.
Das SP Plugin ist installiert.

[/quote]

[yellowled]

Genau eine horizontale Leiste wie in Connections textbasiert.
Koenntest du mir sagen, welche Dateien ich anpaßen muss und wie ich die Static Pages einrichten muss damit sie beim drücken des Links auch erscheinen.
Das SP Plugin ist installiert.

Dann solltest Du zunächst mal die statischen Seiten, welche über Static Pages befüllt werden, zusammenstellen bzw. mit Inhalt versehen. Das geht in der Admin-Oberfläche über Einträge -> Statische Seiten -> Neuer Eintrag -> Los!

Dort legst Du nun Seiten für "Über mich" und "Firma" an. Besonders wichtig sind dabei Permalink und URL-Titel der Seite, beide solltest Du jeweils so anpassen, dass sie eindeutig zur Seite gehören, also z.B. für Firma in /pages/firma.html und firma bzw. /pages/uebermich.html und uebermich. Speziell der komplette Permalink (bitte sonst nichts verändern, nur den Teil zwischen /pages/ und .html) ist wichtig, den brauchen wir später für die Navleiste.

Die Navleiste selbst wird in die Datei index.tpl eingefügt. Ich beschreibe Dir jetzt zunächst mal nur, wie man die Leiste an sich einfügt, Du wirst später mit Sicherheit noch gewisse Anpassungen vornehmen müssen, damit sie auch optisch in das GreenMile-Template passt. Es kann sein, dass die Navleiste also zunächst nicht so aussieht, wie Du es gern hättest - das ist aber kein Problem, das lösen wir später. Es ist einfach sinnvoller, zunächst die Leiste zu integrieren und sich dann um die Optik zu kümmern.

Füge nun folgenden Code

Code: Select all

<ul id="topnav">
<li><a href="link1" id="navIch" title="Über mich">Über mich |</a></li>
<li><a href="link2" id="navFirma" title="Firma">Firma |</a></li>
<li><a href="link3" id="navShop" title="Shop">Shop |</a></li>
<li><a href="link4" id="navGalerie" title="Gallerie">Gallerie</a></li>
</ul>

in die Datei index.tpl des GreenMile-Templates ein, und zwar in diesen Teil, wo ich es markiert habe:

Code: Select all

{if $is_raw_mode != true}
<div id="wrap">
<!-- hier den Code einfügen -->
<div id="serendipity_banner"><a id="topofpage"></a>

(Speichern nicht vergessen )

So. Nun müssen wir Deine URLs in diese Navleiste einbauen. Dazu brauchen wir sowohl die Permalinks der von Dir erstellten statischen Seiten in s9y als auch die URLs des Shops und der Gallerie. Nun musst Du im gerade eingefügten Code folgendes ändern:

1. Ersetze link1 (und nur link1, alles andere muss so stehen bleiben!) durch Folgendes:

Code: Select all

{$serendipityBaseURL}{$serendipityRewritePrefix}pages/uebermich.html

(Solltest Du die Seite anders genannt haben, musst Du das natürlich entsprechend anpassen.)
2. Ersetze link2 analog zu link1 für die statische Firma-Seite
3. Ersetze link3 durch den vollständigen URL zum Shop
4. Ersetze link4 durch den vollständigen URL zur Gallerie
5. Speichern.

Dazu brauchen wir ein paar zusätzliche Dinge in der style.css. Hänge den folgenden Code einfach ans Ende der style.css des GreenMile-Templates an:

Code: Select all

#topnav 
{
	list-style:none;
	font-size:0.9em;
	margin:0 auto;	
	padding:12px 20px 0 0;
	text-align:right;	
	font-family:Verdana, Arial, Sans-Serif;
}
#topnav li 
{
	list-style:none;
	display:inline;
	padding:0;
	margin:0;
	font-weight:bold;
}
#topnav li a:link, #topnav li a:visited
{
	text-decoration:none;	
	color:#BBC4A3;
}
#topnav li a:hover, #topnav li a:active
{
	color:#F7F3ED;	
}

(Auch speichern. Ja, jetzt sieht die Navleiste genauso wie in Connections aus. Das ändern wir, wie gesagt, später.)

So. Das ist zunächst mal relativ viel, ergo auch Quelle für viele Fehler Wenn dieser Teil soweit klappt, passen wir das ganze auch noch optisch an das GreenMile-Template an. Und dann brauche ich 'ne Kur oder so

[g0l0m]

Hallo.

Super Arbeit ! Danke für die Anleitung. Läuft

Hast du vielleicht noch einen Tipp wie ich die Links per Css mit Schatten hinterlege bzw wie ich sie ein bisschen aufpeppen kann.

Danke

[yellowled]

Super Arbeit ! Danke für die Anleitung. Läuft

Naja, es ist nicht unbedingt meine Arbeit, ich kombiniere mehr die Arbeit anderer und übersetze sie

Hast du vielleicht noch einen Tipp wie ich die Links per Css mit Schatten hinterlege bzw wie ich sie ein bisschen aufpeppen kann.

Nun, Du solltest sie zunächst mal farblich an das GreenMile-Template anpassen. Steht das betreffende Blog bereits online, d.h. kann ich es mir irgendwo ansehen? Das würde es sehr vereinfachen, Tipps zur Optik zu geben. Ich weiß ja nicht einmal genau, wie es im Moment aussieht

[yellowled]

Ich weiß ja nicht einmal genau, wie es im Moment aussieht

Okay, nun, da ich es weiß, würde ich persönlich (Geschmäcker sind verschieden ...) zunächst mal empfehlen, das Ganze optisch an GreenMile anzupassen. Das geht ausschließlich über die Datei style.css, wobei wir im Prinzip nur den Teil bearbeiten müssen, den Du beim letzten Mal eingefügt hast, also alles, was mit "#topnav" beginnt.

Ich würde zunächst mal die Hintergrundfarbe anpassen, indem man zu #topnav folgenden einfügt:

Code: Select all

background-color: #f8fbeb;
color: #000;

Damit hat die Navleiste dieselbe Hintergrundfarbe wie die Einträge, allerdings sieht man dadurch gehoverte Links vermutlich nicht mehr gut, weshalb ich dafür die Farbe ändern würde. Hier:

Code: Select all

#topnav li a:hover, #topnav li a:active
{
	color:#F7F3ED;	
}

könnte man statt #F7F3ED z.B. #849b29 verwenden, dann wären gehoverte Links in einem Grün, welches auch in der Header-Grafik vorkommt.

Zudem könnte man die Navleiste noch rahmen, das würde ich so machen (ebenfalls zu #topnav hinzufügen):

Code: Select all

border-left: 1px solid #849b29;
border-top: 1px solid #849b29;
border-right: 1px solid #849b29;

Dabei gibt es aber noch viele andere Möglichkeiten, wie man die Leiste stylen kann - ohne konkrete Wünsche kann ich da wenig Ratschläge geben (Was den Wunsch nach Schatten angeht: Das geht meines Wissens rein über CSS nicht, zumindest nicht browserunabhängig.)

So lange Du Sicherungskopien Deiner Dateien machst, kannst Du natürlich auch selbst nach Lust und Laune mit style.css rumprobieren.

[g0l0m]

Danke. Du hast meinen Geschmack getroffen .

Super !

[DeinLakai]

@YellowLed
erstmal danke für die schöne erklärung um diese Links einzubauen.
Bei mir hat es auch super geklappt nur habe ich jetzt noch ein paar formatierungs probleme da ich vom coden absolut keine ahnung habe:

Meine Seite: http://derlakai.painful-shadows.de/
Vorbild für meine Seite:http://www.wetterling.org/blog/index.php
(So soll mein Header auch aussehen, ohne suchfunktion)

1. Wie ihr sehen könnt ist auf meiner Seite die Leiste wo die links stehen (schwarze Leitste) zu breit. Wie schaffe ich es diese Leiste richtig anzupasssen?prob gelöst

2. Die textlinks sollen links stehen und nicht rechts.prob gelöst


3. Die textlinks sollten in der tabelle (falls es eine ist) mittig sein!

4. Die textlinks sollten voneinander abgetrennt sein! (siehe Vorbild)


Hoffe man kann mir weiterhelfen.

Edit: wie kann ich umlaute in dem blog aktivieren, geht das überhaupt?

[yellowled]

3. Die textlinks sollten in der tabelle (falls es eine ist) mittig sein!

Was heißt "mittig"? Im Moment ist die Liste (das ist es, keine Tabelle) horizontal zentriert, zumindest in Firefox. Das würde ich unter "mittig" verstehen ..?

4. Die textlinks sollten voneinander abgetrennt sein! (siehe Vorbild)

Schauen wir mal ein Deinen CSS-Code:

Code: Select all

#topnav li
{
   list-style:none;
   display:inline;
   padding:10;
   margin:4;
   font-weight:bold;
}

Okay, 1.: Die Werte für padding (Innenabstand) und margin (Außenabstand) haben keine Einheit. Das ist böse[tm], bitte jeweils ein px anhängen. 2. Was verstehst Du unter "abgetrennt"? Mehr Abstand? Dann erhöhe in obigem Element den margin.

Edit: wie kann ich umlaute in dem blog aktivieren, geht das überhaupt?

Sicher. Sollte nach erfolgreicher Installation nahezu automagisch gehen.

Verwaltungsoberfläche -> Konfiguration -> Generelle Einstellungen -> Sprache bzw. Zeichensatz-Auswahl sowie ggf. nochmal Sprache in den Eigenen Einstellungen (ebenfalls in der Verwaltungsoberfläche) prüfen.

[DeinLakai]

Was verstehst Du unter "abgetrennt"? Mehr Abstand?

gehe mal bitte auf die "Vorbildseite" die ich im meinem ersten post angegeben habe. Die haben dort im header eine Naviliste, die verschiedenen links sind jeweils mit einem weissen rahmen umzogen. So hätte ich das auch gerne. Oder habe ich es hier zusätzlich mit einem js zu tun? Wenn ja gibt es auch eine andere möglichkeit dies zu realisieren?

Was heißt "mittig"? Im Moment ist die Liste (das ist es, keine Tabelle) horizontal zentriert, zumindest in Firefox. Das würde ich unter "mittig" verstehen ..?

die links sollten in dieser leiste sowohl vertikal als auch horizontal zentriert sein.

[fwe77]

Hallo DeinLakai,

vielleicht eine blöde Frage, aber warum verwendest Du dann nicht das Template (andreas-08, Download), was auf Deiner "Vorbildseite" verwendet wurde? Ich denke mal, das dann eine Anpassung an das Vorbild relativ einfach ist!

Okay, bei dem Menü handelt es sich um einfaches CSS.

Gruß. Frank.

P.S.: Ach ja, vielen Dank, das Du Dir meine Seite als Vorbild rausgesucht hast!

[DeinLakai]

hmmmm das vereinfacht die sache enorm.....
werde es ausprobieren ob es auch sonst meinen wünschen entspricht.

@yellowled
Dank dir für die Hilfe...wieder was gelernt!!!!