eigener Header/Footer

[serels]

Hi

Wie kann ich mir einen eigenen Header / Footer "schnitzen"?

Über die Styles wird das offenbar nicht realisiert, denn da muss man offenbar Variablen und anderen Code verändern um eigene links oder andere Elemente (Images etc..) zu platzieren.

Welche Dateien, welche Variablen und wie macht man das um bei updates dann auch noch durchzublicken ?

Liebe Grüße
serels

[yellowled]

Wie kann ich mir einen eigenen Header / Footer "schnitzen"?

Über die Styles wird das offenbar nicht realisiert, denn da muss man offenbar Variablen und anderen Code verändern um eigene links oder andere Elemente (Images etc..) zu platzieren.

Es kommt - wie immer - darauf an[tm].

Wenn Du z.B. einfach nur in einem beliebigen Template/Theme/Style das Headerbild austauschen möchtest, geht das durchaus sehr simpel. Willst Du hingegen den ausgegebenen HTML-Code im Header/Footer verändern, musst Du an die Templatedateien ran, welche in /templates/$DEIN_TEMPLATE/ liegen, normalerweise an die index.tpl.

Konkretes kann man dazu eigentlich erst sagen, wenn man weiß, was Du konkret ändern willst. Einstweilen sei Dir die Dokumentation auf http://www.s9y.org/ empfohlen

YL

[serels]

Hi Yellowled

Unglücklicherweise habe ich das Bulletproof als Templategrundlage gewählt. Da ist die Anpassung anscheinend schwieriger als bei Anderen. (Dafür hat man Optionen )

Anyway.

Ich bin im Moment beim herumstylen und will den Blog enger an meine Homepage binden, ohne ihn direkt einbinden zu müssen.

Im Moment habe ich das so gelöst, das ich einfach die Navigationsleiste aktiviert habe und dort die HP - Links hineinsetze.

Die index.tpl ist für mich gänzlich unverständlich/n. nachvollziehbar, da dort natürlich nur Klassen und wahrscheinlich Smartybegriffe herumschwirren, die ich nicht kenne.

Als nächstes versuche ich den Header so zu verändern, daß er etwas höher wird und ein anderes Logo aufnehmen kann.
Wie ich die Schriftarten des Titels/Untertitels ändere habe ich noch nicht behirnen können.

Schön wäre es zusätzliche Links/Grafiken in den Header oder Footer aufnehmen zu können, dieses aber updatesicher.

Wünsche ohne Ende und wenig Ahnung ...
... das scheint meion Problem zu sein

Ach ja, und der Roh - Blog, inhaltsleer und Baustellig:
http://www.lustaufleben.at/serendipity/

Liebe Grüße
serels

[yellowled]

Unglücklicherweise habe ich das Bulletproof als Templategrundlage gewählt. Da ist die Anpassung anscheinend schwieriger als bei Anderen. (Dafür hat man Optionen )

Das Konzept von BP ist eher, Veränderungen über die theme options so simpel und schmerzfrei wie möglich zu ermöglichen. Den Code in den Templatedateien, speziell in der index.tpl, als "übersichtlich" zu bezeichnen, wäre vermessen. Es ist dadurch nicht unbedingt schwieriger, Anpassungen vorzunehmen - man muss nur durch sehr viel mehr Code waten, bis man die Stelle zum Ansetzen findet. Ich würde meinen, dass es für jemanden, der nicht an der Entwicklung beteiligt war, unmöglich ist, den Code "auf die Schnelle" zu durchschauen - wie gesagt, das ist letztlich auch nicht Sinn der Sache.

Die index.tpl ist für mich gänzlich unverständlich/n. nachvollziehbar, da dort natürlich nur Klassen und wahrscheinlich Smartybegriffe herumschwirren, die ich nicht kenne.

Ja, jede Menge Smarty. Die index.tpl muss schließlich 8 verschiedene Layouts mit diversen anderen Optionen generieren.

Als nächstes versuche ich den Header so zu verändern, daß er etwas höher wird und ein anderes Logo aufnehmen kann.

Das Hintergrundbild kannst Du über die theme options austauschen: "Eigene Header-Grafik aus der Mediendatenbank verwenden" und die folgenden Optionen zur Auswahl und Positionierung der Hintergrundgrafik.

Die Höhe des Headers kannst Du etwa so einstellen:

Code: Select all

#serendipity_banner { height: 200px; }

Wo Du das am besten machst, hängt davon ab, wie Du BP anpasst - über ein eigenes Colorset oder die user.css.

Wie ich die Schriftarten des Titels/Untertitels ändere habe ich noch nicht behirnen können.

Code: Select all

a.homelink1, a.homelink1:hover, a.homelink1:link, a.homelink1:visited, #serendipity_banner h1 {
font-family:Verdana,Arial,Geneva,Helvetica,sans-serif;
}

Schön wäre es zusätzliche Links/Grafiken in den Header oder Footer aufnehmen zu können, dieses aber updatesicher.

Du kannst die Links im Navigationsmenü nahezu beliebig ausdehnen. Das ist die einzige Möglichkeit, Links in den Header einzubinden - und soweit ich das sehe, wird das auch so bleiben.

Über die theme option "Hier zusätzlichen Text, der im Seitenfuss erscheinen soll, einfügen." kannst Du nicht nur Text, sondern auch HTML und damit Links in den Footer einbinden.

Ansonsten müsstest Du mal genauer erklären, was Du mit "zusätzliche Links/Grafiken" konkret meinst.

YL

[serels]

Hi Yellowled

Erstmals vielen Dank für deine Mühe und den Versuch meine undeutlichen Fragen zu beantworten.

Ich werde deine Antwort durchackern und vielleicht kann ich was konkreteres formulieren ...

Erstmals ad hoc:

Ansonsten müsstest Du mal genauer erklären, was Du mit "zusätzliche Links/Grafiken" konkret meinst.

YL

Was mir auf die Schnell einfällt wäre die Möglichkeit das Logo im Header "clickable" zu machen - also einen Link zu verpassen und ...

... es nach links zu stellen, ohne das der Header - Text "drüberläuft" - also jenen nach rechts zu stellen ...

Im Moment passe ich die Css an.

Langfristig schwebt mir vor Varianten zur Verfügung zu stellen, daß sich Besucher in gewissen Grenzen Varbvarianten (Schrift - Hintergrund) und Schriftgrößen - Varianten selbst einstellen können.

Liebe Grüße
und nochmals Danke ...

serels

[yellowled]

Was mir auf die Schnell einfällt wäre die Möglichkeit das Logo im Header "clickable" zu machen - also einen Link zu verpassen

Das ist konzeptionell schwierig - grundsätzlich bindet BP das Banner als Hintergrundbild des Headers ein. Hintergrundbilder kann man nicht "klickbar machen".

Du könntest natürlich ein Logo in den Header einbinden und das in einen Link einwickeln, aber das wäre dann wieder nicht updatesicher.

... es nach links zu stellen, ohne das der Header - Text "drüberläuft" - also jenen nach rechts zu stellen ...

Das geht eigentlich recht simpel. Binde das Logo über die theme options ein, richte es links/oben aus und schiebe Titel und Beschreibung mittels padding-left nach rechts - padding-left müsste in dem Fall Logobreite + x sein, wobei x der Abstand von Titel/Beschreibung zum Logo ist.

Das kann allerdings schwer in die Hose gehen, wenn Titel/Beschreibung mal sehr lang werden.

YL

[serels]

Hi Yellowled

Vielen Dank für deine Erklärungen und Hinweise.

Hoffentlich komme ich baldestens dazu sie auch umzusetzen.

Ich stoße aber immer wieder auf neue Fragen und Hindernisse, die mir teilweise mysteriös erscheinen.

Ich habe beiu anderen blogs gesehen, daß die Kontaktdaten und Impressum via Navigationsleiste einbinden. Da erscheinen dann Unterverzeichnisse mit html Seiten die im Blog integriert sind.

Wie geht das ?
Wenn ich ein Unterverzeichnis selber erstelle ist die darin befindliche html - Seite ja noch nicht im blog integriert.

Wenn ich in der Administration in der Verzeichnisverwaltung ein Verzeichnis erstelle, habe ich in "uploads" ein neues leeres Unterverzeichnis ... und was dann ?

Offenbar ist die Intuitivität von SP nicht Meine

Bitte um Führung

Liebe Grüße
serels

[yellowled]

Ich habe beiu anderen blogs gesehen, daß die Kontaktdaten und Impressum via Navigationsleiste einbinden. Da erscheinen dann Unterverzeichnisse mit html Seiten die im Blog integriert sind.

Wie geht das ?

Ich schreib das nicht alles zweimal. http://board.s9y.org/viewtopic.php?t=14511

Bitte um Führung

Nur mal so am Rande: Man könnte auch mal in die Dokumentation auf http://www.s9y.org gucken, sich Garvins Buch zulegen, im fragmentarischen Handbuch stöbern oder das Forum durchsuchen, ob vielleicht schon mal jemand dieselben Probleme hatte

YL

[serels]

Hi YL

Bitte um Vergebung ...

Du hast natürlich recht, DAS hätte ich selber finden können.

Offenbar ist bei SP fast alles via Plugins geregelt.
Ich bin's gewohnt so Sachen zu schreiben (html/php .. mit bescheidenen Kenntnissen)

Naja, das nächste mal schau ich vorher genauer ...


Liebe Grüße
Serels x

[serels]

Hi Yellowled

Weils hier zum topic passt und ich wirklich nichts erhellendes gefunden habe:

Ich habe dein Tutorial zum Fahrner image replacement gelesen und dazu vorerst mal 2 Fragen:

1.
Am Anfang deine Erklärung soll man die Invisible Klassen

Code: Select all

<h1><span class="invisible"><a …</a></span></h1>
<h2><span class="invisible"><a …</a></span></h2>

in den div des Banners einbinden.

Leider ist der Satz:"Der restliche Code bleibt wie im ersten Codeblock." mehrdeutig.

Wird obiger code nur innerhalb des div's angehängt, oder ersetzt der anderen code ?

2.

Wie verhält sich so ein header dann in unterschiedlichen Viewports/Monitorauflösungen ? Wenn ich das banner.jpg auf mein System zuschnitze, also z.b. 1024x100, siehts bei mir gut aus. Was aber wenn ein user mit anderer Auflösung herangeht. Wird das Banner dann verzerrt/abgeschnitten, angepasst oder sonstwas ?

Wenn ich jetzt ein banner mit 1920x100 fabriziere und die relevanten Inhalte auf die zentralen 800px oder 1024px setze, den Rest der Grafik farbig auslaufen lasse ....
Wie könnte ich das pic so zentrieren, dass bei einem kleineren Viewport die Grafik einfach links und rechts abgeschnitten wird ...

Ich hoffe das ist nicht zu unklar formuliert.

lg
serels

[yellowled]

Wird obiger code nur innerhalb des div's angehängt, oder ersetzt der anderen code ?

Letzteres, er ersetzt den Code. Aber die erste und letzte Zeile des Codeschnipsels ("der restliche Code") bleibt natürlich.

Wie verhält sich so ein header dann in unterschiedlichen Viewports/Monitorauflösungen ? Wenn ich das banner.jpg auf mein System zuschnitze, also z.b. 1024x100, siehts bei mir gut aus. Was aber wenn ein user mit anderer Auflösung herangeht. Wird das Banner dann verzerrt/abgeschnitten, angepasst oder sonstwas ?

Das kann man so pauschal nicht beantworten. Es kommt darauf an, wie das Layout sonst aussieht. Wenn Du das Ganze ansonsten in einen 1024 Pixel breites Container-div verpackst, das gesamte Layout in der Breite also auf 1024 Pixel festzurrst, dann natürlich nicht. Verwendest Du ein fluides oder elastisches Layout, ist das natürlich schwieriger. Also: Konkret?

Wie könnte ich das pic so zentrieren, dass bei einem kleineren Viewport die Grafik einfach links und rechts abgeschnitten wird ...

Code: Select all

background-image: url({TEMPLATE_PATH}img/background.png) center center no-repeat;

YL

[serels]

Hi YLed

Wird obiger code nur innerhalb des div's angehängt, oder ersetzt der anderen code ?

Letzteres, er ersetzt den Code. Aber die erste und letzte Zeile des Codeschnipsels ("der restliche Code") bleibt natürlich.
YL

Also ich bekomm's beim bulletproof - template nicht wirklich hin.

Der Erste Teil, also die index.tpl sieht bei mir, analog zu deinem Beispiel so aus:

Code: Select all

        <!-- #serendipity_banner: this is the header area. it holds the blog title and   -->
        <!--                      description headlines                                  -->
        <div id="serendipity_banner">
            <h1><span class="invisible"><span class="{if $template_option.firbtitle == 'false'}in{/if}visible"><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle|truncate:80:" ..."}</a></span></span></h1>
            <h2><span class="invisible"><span class="{if $template_option.firbdescr == 'false'}in{/if}visible"><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></span></span></h2>
        </div>

Und die style.css (ich hab den code in die user.css geschrieben und die widersprechenden/doppelten codestellen aus default,style,blank,base herausgenommen )

sieht so aus:

Code: Select all

#serendipity_banner {
/* without this, the navbar wipes out part of the banner */
/* if the navbar is located above the banner             */
clear: both;
margin: auto;
width: 100%;
height: 100px;
}

a.homelink1, a.homelink1:hover,
a.homelink1:link, a.homelink1:visited,
#serendipity_banner h1 {

color: #fff;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size : 130%;
padding-left:15px;
padding-top: 20px;
margin: 0px;
text-decoration: none;
background: url(img/lwrbanner.png) no-repeat;
}


a.homelink2, a.homelink2:hover,
a.homelink2:link, a.homelink2:visited,
#serendipity_banner h2 {
    color: #0000ff;
    font-size: 110%;
    text-decoration: none;
    padding: 5px 0 15px 0;
}

/* Fahrner Image Replacement for the header */
.invisible {
    margin-left: -5000px;
}
.visible { /* just a placeholder - don't use this class */
           /* unless you know what you're doing         */ }

Mein h1 - Banner wird aber horizontal zur Hälfte vom "h2" - Bereich verdeckt und der hält sich hartnäckig ...


... wenn ich dem h1 - Bereich ein festes "height" verpasse funktioniert das, aber was hat das für Auswirkungen z.b. auf andere Darstellungen:

Code: Select all

a.homelink1, a.homelink1:hover,
a.homelink1:link, a.homelink1:visited,
#serendipity_banner h1 {
height:100px;

lg
serels

[yellowled]

Also ich bekomm's beim bulletproof - template nicht wirklich hin.

Äh ... da brauchst Du es auch nicht.

In BP ist diese Funktionalität über die theme options längst integriert. Du kannst ein beliebliges Bild aus der Mediendatenbank von s9y in den Header einbinden, es dort ausrichten und die beiden Überschriften im Banner-Bereich (sogar unabhängig voneinenander) ausblenden. Über haargenau die im Blogeintrag beschriebene Technik, aber ohne eine einzige Zeile Code anfassen zu müssen, einfach nur über ein paar Klicks in den theme options von BP ...

(ich hab den code in die user.css geschrieben und die widersprechenden/doppelten codestellen aus default,style,blank,base herausgenommen )

Herzlichen Glückwunsch, Du hast damit deine Installation des Bulletproof-Templates teilweise von seiner kugelsicheren Weste befreit.

Es ist niemals notwendig, in BP Code aus einem der mitgelieferten Stylesheets zu löschen! Im Gegenteil, man richtet durch das Löschen von Code eher Schaden an.

Durch die CSS-Kaskade hat man nahezu immer die Möglichkeit, Styles aus den mitgelieferten Stylesheets mittels eines eigenen Colorsets und/oder die Datei user.css zu überschreiben, in beiden Fällen sind die Änderungen sogar updatesicher. Wenn Styles auf diese Weise nicht überschrieben werden können, kannst Du davon ausgehen, dass es wesentliche Dinge für das Layout von BP sind.

Spiele bitte die Originaldateien von BP wieder ein und mache Dich erstmal damit vertraut, was man in BP auch erreichen kann ohne im Code rumzumurksen. Das ist eine ganze Menge, was wesentliche Eigenschaft des ganzen Konzepts von BP ist.

YL

[serels]

Hi YLed

Also ich bekomm's beim bulletproof - template nicht wirklich hin.

Äh ... da brauchst Du es auch nicht.

Umwege erhöhen die Ortskenntnis - Ich habs gerollbackt

Herzlichen Glückwunsch, Du hast damit deine Installation des Bulletproof-Templates teilweise von seiner kugelsicheren Weste befreit.

OOoops

Es ist niemals notwendig, in BP Code aus einem der mitgelieferten Stylesheets zu löschen! Im Gegenteil, man richtet durch das Löschen von Code eher Schaden an.

Durch die CSS-Kaskade hat man nahezu immer die Möglichkeit, Styles aus den mitgelieferten Stylesheets mittels eines eigenen Colorsets und/oder die Datei user.css zu überschreiben, in beiden Fällen sind die Änderungen sogar updatesicher. Wenn Styles auf diese Weise nicht überschrieben werden können, kannst Du davon ausgehen, dass es wesentliche Dinge für das Layout von BP sind.

Spiele bitte die Originaldateien von BP wieder ein und mache Dich erstmal damit vertraut, was man in BP auch erreichen kann ohne im Code rumzumurksen. Das ist eine ganze Menge, was wesentliche Eigenschaft des ganzen Konzepts von BP ist.

YL

Der Schaden ist insoferne gering gewesen, als ich ja bulletproof komplett in ein eigenes Verzeichnis mit eigenem Namen kopiert haben und dort zu einem eigenen Style gemacht habe.
Trotzdem habe ich dort jetzt die originalen css - Dateien wieder eingespielt, die Änderungen in der index - Datei wieder zurückgenommen und nur die user.css bearbeitet

Den eigenen Style habe ich lalstyle genannt und via adminpage eingebunden.

Die bisher erfolgten stylisierereien sehen so aus:
http://www.lustaufleben.at/serendipity/

Vielen Dank für deine Mühen und
lg
serels

[serels]

... allerdings ergibt sich jetzt der unangenehme Effekt das meine Static - Pages nicht mehr funktionieren (Impressum).
Genauer gesagt, der header verschwindet bei den static pages ...


So wirklich "funktionieren tut's nur, wenn ich die Header - Grafik nicht über die template - options einbinde, sondern:

In der user.css folgendes einbinde:

Code: Select all

a.homelink1, a.homelink1:hover,
a.homelink1:link, a.homelink1:visited,
#serendipity_banner h1 {
    background: url(img/lwrbanner.png)top center no-repeat;
    height:100px
}

und in der default_style.css

folgendes auskommentiere:

Code: Select all

/*#serendipity_banner {
    background: #578cb0 url(img/default_banner.jpg) left top repeat-x;
}*/

In allen anderen von mir probierten Varianten legt sich irgendetwas quer ...


... Verdammter Mist - in meiner Variante funktionierts im Firefox - Im Internet - Explorer ist das banner dann wieder weg ...

Wenn ich die Header Grafik via Options einblende und beides lasse, sieht man den Header in beiden browsern (obwohl im FF leicht versetzt) aber bei den Static - Pages im IE ist das Banner trotzdem nicht zu sehen ...

Aaaaaargghhh

lg serels