Template

suche Plugin für HTML-Editor (Template) mit Syntax highlight

Hallo,

ich bin schon eine Weile auf der Suche nach einem Plugin, Modul o.ä. für das Admin-Backend, welches in dem HTML-Editor für die Template-Bearbeitung ein Syntax highlight anbietet.

Kennt jemand sowas oder hat hierfür einen Lösungsansatz?

Hintergrund sind Änderungen an Templates, die man auf der Schnelle (on the fly) erledigen kann, ohne jedesmal die index.php runterzuladen, bearbeiten und wieder hochladen zu müssen.

Danke für jeden Tip<!-- google_ad_section_end --><!-- / message -->

Template Versatility II umbauen

Hallo,

ich würde gerne das mit dem Buch mitgelieferte Template, das mir von der Optik her recht gut gefällt, so umbauen, daß es immer eine statische Breite von 800px hat. Ich kenne mich aber leider mit der Template-Programmierung nochnicht so gut aus. Kann mir jemand auf die Schnelle einen Tip für den Umbau geben?

 

Danke schon mal,

 

Peter

eignes Template online installieren

Hallo zusammen!

Habe nun einige Zeit mit Hilfe des sehr anschaulichen Videotrainings an meinem Template gearbeitet und lokal erfolgreich testen können. Nun habe ich das Paket mit der index.php/templateDetails.xml und Unterordnern gepackt, hochgeladen, erfolgreich installiert - nur funzt es einfach nicht!

- das html der index.php ist da, die Verknüpfung zu den entsprechenden Verzeichnissen funktioniert nicht, dort ist im Quelltext noch der Pfad wie bei meiner lokalen Installation.

Muss ich das noch was am html bearbeiten?

- wenn ich das css bearbeiten will, ist die template.css auswählbar, aber leer, sie ist aber definitiv in der Zip-Datei.

Bin langsam echt verzweifelt....

 

 

Probleme mit dem Template tmpl_bertrand

Hallo zusammen,

Ich habe mit der Video2Brain CD von Herrn Graf noch in der Beta Phase von Joomla angefangen. Inzwischen bin auf die Stable-Version von Joomla 1.5.8 umgestiegen und wollte nun das sehr schöne Template tmpl_bertrand verwenden. Habe mir auch hier das aktuelle Template runtergeladen.

Auf meiner Seite habe ich nun schon einige Texte drin nur leider werden zwischendrin immer wieder die Leerzeichen zwischen den Wörtern nicht dargestellt. Wenn ich umschalte auf das Standart-Template von Joomla dann wird der Text korrekt dargestellt.

Wenn ich den Text markiere und und in z.B ein Textdokument einfüge sind die Leeerzeichen auch da.

Hat jemand vieleicht ähnliche Probleme und schon eine Lösung dafür gefunden?

Hier ein Link zu meiner Testseite: http://www.sardia.de/joomla_stable/

 

Ich hoffe es kann mir jemand weiterhelfen.

 

Grüße

Denise

Eigenes Template, Problem mit Bildergalerie

Erstmal's ein Hallo an alle!

Vor ca. 2 Monaten habe ich mir das Buch Joomla 1.5 gekauft und habe es komplett durchgearbeitet! Jetzt habe ich mich an meinem eigenem Template versucht... bis jetzt hat alles funktioniert, bis ich eine Bildergalerie eingebunden habe!

Diese wird entweder überhaupt nicht (bei Expose4) oder in einer langen Reihe nach unten (bei Phoca) dargestellt!

Ok, da liegt der Fehler bei Dir dachte ich... und machte das nächste Tutorial von Joomla-Tipps.net durch!

Hier Habe ich das gleiche Problem, dass die Galerien nicht richtig dargestellt werden!
Was mache ich Falsch bzw. welche Joomla-Klassen muss ich über das CSS ansprechen?

Ich ich mache hier noch einen link auf meinen Forenbeitrag auf  joomlaportal.de

Sollte auch jemand interesse haben drauf zu sehen, habe ich die Möglichkeit meinen lokalen Server ans Netz zu lassen! Erfolg aber nur auf Rücksprache!

Kann mir hier jemand weiterhelfen!

 

Gruß Alex

A.3 Template - Einschübe

Das <jdoc>-Element bietet Ihnen die Möglichkeit, dynamische Bereiche in Ihren Templates anzusprechen, ohne auch nur einen einzigen PHP-Befehl zu benutzen (siehe Tabelle A.2).

Template-Code

Wirkung

 

<jdoc:comment>
Ihr kommentar
</jdoc:comment>

Kommentarzeile

 

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php
echo $this->language; ?>" lang="<?php echo $this->language; ?>"
dir="<?php echo $this->direction; ?>" >

Dokumententyp-Deklaration (XHTML-Header)

 

HEAD

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

Angabe des korrekten Inhaltstyps

 

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/
templates/system/css/system.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/
templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/
templates/<VERZEICHNIS_DES_TEMPLATES_/css/template.css" type="text/css" />

Setzen der CSS-Datei

 

<?php if($this->direction == 'rtl') : ?>

<link href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template_rtl.css" rel="stylesheet" type="text/css" />

<?php endif; ?>

Setzen der CSS-Unterstützung für »rechts-nach-links«-Sprachen

 

BODY

<jdoc:include type="message" />

Joomla!-Systemnachrichtenanzeige

 

<jdoc:include type="modules" name="[position]" style="[Stil]" />

Laden des Moduls an der
Position [position]. [Stil]:

(siehe Kapitel 13)

 

<?php if($this->countModules('left')) : ?>

<?php endif; ?>

Bedingungsanweisung: Wenn es an der Stelle
left-Module gibt, lade sie
in das Template.

 

<jdoc:include type=component />

Anzeigen der Komponente. Der Name der Komponente ergibt sich aus der URL.

 

Tabelle A.2: <jdoc:...>-Einschübe in der index.php eines Templates

A.4 Wie tausche ich ein Bild (Logo) im Template aus?

Um ein Logo auszutauschen, müssen Sie sich zunächst den Quellcode des entsprechenden Templates ansehen. Grafiken und Bilder können in der HTML- und in der CSS-Struktur definiert werden. Grafiken haben meist eine auf das Template abgestimmte Größe.

Wenn Sie nun Bilder tauschen wollen, so können Sie das über mehrere Methoden realisieren.

Variante 1

  • Erstellen Sie sich von der Auflösung und der Dateigröße her passende Grafiken.
  • Laden Sie die Grafiken in den Mediabereich von Joomla!.
  • Klicken Sie auf die Grafik, um den Link zur Grafik zu erhalten.
  • Ändern Sie im Quellcode Ihres Templates das entsprechende <img src="">-Tag auf das neue Bild.

Variante 2

  • Erstellen Sie die neuen Grafiken unter demselben Namen wie die Grafiken in Ihrem Template.
  • Überschreiben Sie einfach die alten Grafiken mit den neuen.

 

17.2 Unternehmen

In der Wirtschaft ist ein Unternehmen eine rechtlich, wirtschaftlich und finanziell selbstständige Wirtschaftseinheit mit einer eigenen Unternehmensleitung. Mit Unter­nehmen ist das aber immer so eine Sache. Ziel des Wirtschaftens ist normalerweise die Erzielung monetärer Gewinne. Dabei wird viel Wert auf Seriösität gelegt, um Ver­trauen beim Kunden zu wecken. Abhängig vom Produkt muss die Seriösität beim Betrachten der Website in kürzester Zeit im Kopf des Kunden verankert werden. Die Umsetzung dieser Seriösität auf Websites beschäftigt tausende Agenturen täglich und sicherlich noch auf Jahrzehnte hinaus.

Einen Ansatz zur Umsetzung dieses Anspruchs finden Sie im Template von Andy Miller!

17.2.1 Andy Miller

Andy Miller ein Programmierer und Webdesigner mit mehr als 10 Jahren Erfahrung in der professionellen Webanwendungsentwicklung.

Er ist Mitglied des Joomla! Development Teams und war bereits im Mambo Team. Bei der Joomla!-Entwicklung ist er hauptsächlich verantwortlich für die Benutzerschnitt­stelle, das Design und die Barrierefreiheit.

Andy hat sehr tiefgehende Erfahrungen mit Joomla!, besonders im Bereich der Tem­­plate-Entwicklung. Alle standardmäßig in Mambo und Joomla! ausgelieferten Admi­nistrator- und Frontend-Templates waren und sind von ihm (Benutzername rhuk)4.

Andy ist außerdem Gründer der Firma RocketTheme5. RocketTheme bietet in einem Abo-Modell monatliche neue Templates und eine Community zur Pflege und Weiter­entwicklung der vorhandenen Templates an. Die Foren dort können auch von »Nicht-Abonnenten« gelesen werden.

Versatility II von Andy Miller
Abbildung 17.2: Versatility II von Andy Miller

Das Versatility II Template ist eine Weiterentwicklung des Versatility-Templates und technisch sehr ausgereift. Es bietet beispielsweise 15 Modulpositionen an, die alle natürlich nur dann auf der Website erscheinen, wenn die entsprechenden Module vorhanden sind. Durch diese Aufteilung ist das Template extrem flexibel.

Das Template hat vier verschiedene Menü-Optionen:

  • SplitMenu,
  • SuckerFish,
  • drop-down menu,
  • SuperSucker menu.

Außerdem können eigene oder Third Party-Menüsysteme über den Mechanismus eingebunden werden. In Abbildung 17.3 sehen Sie ein Beispiel mit dem Standard Joomla!-Menüsystem.

Menüsystem in Versatility II
Abbildung 17.3: Menüsystem in Versatility II

Die Breite von Versatility II Template lässt sich in drei Stufen dynamisch von den Gäs­ten der Website verändern.

Die Schriftgröße von Versatility II Template lässt sich ebenfalls in drei Stufen dyna­misch von den Gästen der Website verändern.

17.1 Das World Knowledge-Template

»Die Idee war, ein schlichtes Template zu entwickeln, welches den wechselhaften Informationsständen und vielseitigen Informationsquellen einer NGO gerecht wird.

World Knowledge-Template
Abbildung 17.1: World Knowledge-Template

Hierzu wurde exemplarisch die imaginäre NGO World Knowledge erdacht, die sich dem Erhalt kultureller Wissensschätze und ihrer Verwahrung verschrieben hat.

17.1.2 Gestalterischer Ansatz

»Grau, teurer Freund, ist alle Theorie«. Mit diesem Goethe-Zitat im Rücken wurde ein freundliches Farbschema entwickelt, welches an Pergament erinnert und mit Biblio­theken, also Wissen assoziiert werden soll. Für wichtige Elemente und Orientierungs­hilfen wurde ein helles Türkis der Palette hinzugefügt. Diese im Layout heraus­­ragende Farbe symbolisiert das Wissen als solches und wird symbolisch in der Buchfarbe der jungen Frau im Headerbereich aufgegriffen.

Da NGOs häufig interkulturell agieren, ist das Layout nüchtern und übersichtlich gehal­ten. So bleibt gewährleistet, dass sich Menschen verschiedener Länder schnell zurecht­finden.

Als Schriftart wurde die Helvetica-Familie gewählt, welche nicht nur seit dem Web2.0-Hype wieder sehr populär ist, sondern auch für Kompetenz und Klarheit steht und auf fast allen Systemen vorhanden ist.

17.1.3 Struktureller Ansatz

Das Layout der Website gliedert sich in vier Teile. Den Headerbereich, die Naviga­­tionsleiste und den zweigeteilten Content-Bereich. Dieser beinhaltet neben den Arti­keln einen Bereich, in dem Bilder und kontextbezogene Informationen bzw. relevante Links enthalten sind.

Die linke Navigation enthält keine zweite Navigationsebene. Sie kann jedoch aus mehre­ren Navigationsbereichen zusammengesetzt sein (im Beispiel Present und Future). Um das Anliegen der Organisation direkt zu kommunizieren, wird direkt auf eine Seite ver­wiesen, welche den Menüpunkt als Artikel bzw. Blog vertieft. Alle tiefergehenden Informationen werden über kontextabhängige Links neben den Artikeln dargestellt bzw. direkt im Artikel verlinkt. So bleibt gewährleistet, dass die Navigation eine bestän­dige Struktur vorweist, während einzelne Artikel einer starken Dynamik ausgesetzt sein können.«

Tom Bohaček (http://www.bohacek.de)

16.6 Design

Der nächste Morgen ist da, das Weinfest ist vorbei, Didier und Marlene haben viel fotografiert. Herr Bertrand hat die Website zu seiner Zufriedenheit fertig gestellt und auch schon die PDFs eingebunden.

Die PayPal-Anbindung funktioniert.

Man trifft sich zum Frühstück, und Ruth ist mittlerweile fertig mit dem Template. Sie bringt die fertige Komponente auf einem USB-Stick mit und erzählt eine Stunde lang über ihre Erlebnisse mit dem Template.

16.6.1 Installation des Templates

Herr Bertrand überträgt die Template-Dateien per FTP in das Verzeichnis /httpddocs/ templates/tmpl_bertrand und /httpddocs/templates/tmpl_bertrand_shop. Im Menü Erweiterungen - Templates macht er das neue Template tmpl_bertrand zum Standard (Abbildung 16.60).

Neues Template im Template-Manager


Abbildung 16.60: Neues Template im Template-Manager

Das Template tmpl_bertrand_shop ordnet er im Bearbeitungsmodus den Weinseiten zu. Damit ist sichergestellt, dass der Kunde bemerkt, dass er jetzt im Shop-Bereich ist (Abbildung 16.61).

Spezielles Template für den Shop-Bereich
Abbildung 16.61: Spezielles Template für den Shop-Bereich

16.6.2 Das Template

Das Template ist von Ruth nach folgenden Gesichtspunkten gestaltet worden:

Pflege

Da Herr Bertrand die Seite weiter pflegen will, hat sie ein möglichst einfaches und übersichtliches Gestaltungsraster zu Grunde gelegt. Herr Bertrand kann die Bilder im oberen Bereich später leicht durch neue ersetzen.

Layout

Ruth erklärt ihre Arbeit so:

Es gibt viele Wege, eine Website gestalterisch umzusetzen.
Herr Bertrand will Wein verkaufen.
Das bedeutet, sein Template braucht die optische Ausstattung eines traditionellen, qualitätsbewussten Winzers, bei dem man gern guten Wein einkaufen möchte.
Eine High-Tech-Ausstattung im Metallic-Look wäre einfach unpassend, auch wenn sie gerade modern ist.
Nein, in diesem Fall geben Wein, Trauben und Erde der Seite das Look and Feel. Getragen wird dies durch die Farbeinstellungen wie durch das Fotomaterial.
Ein optisches Erscheinungsbild setzt sich aus mehreren wichtigen Elementen zusammen. Zu ihnen gehören: Logo, Farben, Foto- und Grafikstil (mit Grafiken sind alle Bildelemente gemeint, die nicht Fotografien sind, beispielsweise Buttons und Symbole), Schriftarten.
Zusätzlich wirken Raumaufteilung und Proportion.
All das muss auf einer Website zueinander passen, wenn der optische Eindruck stimmig sein soll. Am besten sollte nur eine Schriftart verwendet werden. Mit fetten und kursiven Schnitten der gleichen Schrift kann man sehr gut Unterschiede hervorheben.
Im Bertrand-Template habe ich für die Überschriften nicht eine besonders originelle, sondern eine sehr klassische Schrift gewählt, die einen seriösen Eindruck hinterlässt. Es ist die klassische Times, ähnlich den Überschriften überregionaler Zeitungen. Gestaltung muss nicht immer besonders originell sein, es ist ausreichend, wenn es einfach gut passt.

Ein Porträt

Während des Frühstücks und beim Telefongespräch, als Ruth Herrn Bertrand die CSS-Technik erklärte, hat sie nebenbei ein wenig gezeichnet. Sie schickt ihr Werk per E-Mail an Herrn Bertrand, und der baut es gleich mit in die Bildergalerie ein.

Herr Bertrand
Abbildung 16.62: Herr Bertrand

Inhalt abgleichen