Hallo,
ich habe mich mal mit dem Thema "Reisen" beschäftigt. Der Style "globetrotter" ist dabei herausgekommen.
EDIT: Mittlerweile gibt es zwei Versionen dieses Styles: globetrotter und globetrotter_mod.
Für den Style globetrotter sind keinerlei Modifikationen notwendig. Der Style globetrotter_mod ist der ursprüngliche Style, für den die weiter unten ausgeführten Modifikationen notwendig sind.
Unterschiede: der Style globetrotter zeigt immer dasselbe Logo an, der Datumsstempel ist etwas anders und das Layout der Benutzerprofile (in den Beiträgen) ist von der ID des jeweiligen Autors abhängig und nicht vom Rang.
Hier ist eine Erklärung (Style: globetrotter) und wenn ihr weiter scrollt, seht ihr auch die verschiedenen Profillayouts.
http://forumstyling.de/viewtopic.php?f= ... bb03dbdb39
Den Style globetrotter_mod (der die Modifikationen erfordert) kann man sich hier anschauen:
http://www.forumstyling.de/index.php?style=30
EDIT ENDE
Besonderheiten:
- fünf Headerbilder, die sich nach dem Zufallsprinzip abwechseln (alle Bilder sind von wikimedia.commons mit der Lizenz "public domain")
- verschiedene Hintergründe für das Profilfeld, hier sind sie je nach Rang verschieden (am besten zu sehen im Strang "Infos" im Unterforum "globetrotter")
- Spoiler im Profilfeld für die Infos zum User
- Datumsstempel neben dem Beitragsfeld
- font-embedding: zwei Schriften wurden eingebunden (Quelle: fontsquirrel.com)
Ganz fertig ist er noch nicht, es gibt noch ein paar Unstimmigkeiten. Die buttons müssen auch noch ausgetauscht werden.
Ich würde mich über euer feedback freuen, vor allem natürlich, was eventuelle technische Fehler betrifft.
LG Beate
[ABD] globetrotter
[ABD] globetrotter
Zuletzt geändert von Lehrling am 29.12.2013 20:08, insgesamt 1-mal geändert.
Re: [DEV] globetrotter
Hi,
ich als Laie sag ich mal einfach ... wow ...
insbesondere die Schriftart, aber was mich beeindruckt, ist der buchstäbliche Zeitstempel, wie hast das denn gemacht ?
Lg
-S
ich als Laie sag ich mal einfach ... wow ...
insbesondere die Schriftart, aber was mich beeindruckt, ist der buchstäbliche Zeitstempel, wie hast das denn gemacht ?
Lg
-S
Re: [DEV] globetrotter
Hallo
Was mir auffällt die Schrift im Footer geht zu weit raus.
[ externes Bild ]
Auserdem zeigt der Validator 24 Fehler an.
Was mir auffällt die Schrift im Footer geht zu weit raus.
[ externes Bild ]
Auserdem zeigt der Validator 24 Fehler an.
Re: [DEV] globetrotter
Hallo,
Wie man den Stempel macht, kannst du hier nachlesen:
viewtopic.php?t=229784
Das mit der Schrift ist eigentlich total simpel. Ich habe mir im Ordner "theme" einen Unterordner namens "font" angelegt und dort Schriften hochgeladen. Kostenlose Schriften bekommt man z.B. bei fontsquirrel.com. Wichtig ist, dass die Datei die Endung .ttf hat.
Diese Handschrift heißt z.B. "Pacifico": http://www.fontsquirrel.com/fonts/pacifico
Du musst sie nun noch in die common.css einbinden. Nach
habe ich folgenden Code eingebaut:
In der ersten Zeile gibst du der Schrift einen Namen (ich hätte hier auch einfach nur "p" als Namen angeben können) und in der zweiten Zeile gibt man den Weg zur Schrift an, in meinem Fall also zum Ordner "theme", dann zum Ordner "font" und dort liegt die Datei "Pacifico.ttf".
Nun kannst du sie in den Stylesheets ganz normal angeben, beispielsweise:
Liebe Grüße
Beate
Danke. Freut mich, dass er dir gefällt.SarahUV hat geschrieben:Hi,
ich als Laie sag ich mal einfach ... wow ...
insbesondere die Schriftart, aber was mich beeindruckt, ist der buchstäbliche Zeitstempel, wie hast das denn gemacht ?
Lg
-S
Wie man den Stempel macht, kannst du hier nachlesen:
viewtopic.php?t=229784
Das mit der Schrift ist eigentlich total simpel. Ich habe mir im Ordner "theme" einen Unterordner namens "font" angelegt und dort Schriften hochgeladen. Kostenlose Schriften bekommt man z.B. bei fontsquirrel.com. Wichtig ist, dass die Datei die Endung .ttf hat.
Diese Handschrift heißt z.B. "Pacifico": http://www.fontsquirrel.com/fonts/pacifico
Du musst sie nun noch in die common.css einbinden. Nach
Code: Alles auswählen
html {
font-size: 100%;
/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
height: 101%;
}
Code: Alles auswählen
@font-face {
font-family: Pacifico;
src: url("{T_THEME_PATH}/font/Pacifico.ttf");
}
Nun kannst du sie in den Stylesheets ganz normal angeben, beispielsweise:
forumtitle { font-family: Pacifico; }
Liebe Grüße
Beate
Re: [DEV] globetrotter
Hallo und danke für dein feedback,
EDIT:Ich habe es jetzt auch gesehen und korrigiert. Ich hoffe, jetzt wird der footer richtig angezeigt.
LG Beate
Das ist seltsam. Bei mir wird der footer richtig angezeigt.Kirk hat geschrieben:Hallo
Was mir auffällt die Schrift im Footer geht zu weit raus.
[ externes Bild ]
EDIT:Ich habe es jetzt auch gesehen und korrigiert. Ich hoffe, jetzt wird der footer richtig angezeigt.
ja, ich weiß. Das sind alles Fehler, die in meinen ersten Styles noch stecken (girlie_heart und girlie_flower). Ich hatte einfach noch keine Lust, die auszubügeln.Auserdem zeigt der Validator 24 Fehler an.
LG Beate