[ABD] globetrotter

In diesem Forum können Style Autoren ihre Styles vorstellen, welche sich in der Entwicklung befinden. Beachtet bitte, dass solche Styles noch Fehler enthalten könnten.
Lehrling
Supporter
Supporter
Beiträge: 2922
Registriert: 15.01.2012 20:00
Kontaktdaten:

[ABD] globetrotter

Beitragvon Lehrling » 08.12.2013 12:31

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. :oops:

LG Beate
Zuletzt geändert von Lehrling am 29.12.2013 20:08, insgesamt 1-mal geändert.

SarahUV
Mitglied
Beiträge: 239
Registriert: 18.09.2011 12:20
Wohnort: Hamburg
Kontaktdaten:

Re: [DEV] globetrotter

Beitragvon SarahUV » 08.12.2013 17:57

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

Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 5493
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: [DEV] globetrotter

Beitragvon Kirk » 08.12.2013 18:22

Hallo
Was mir auffällt die Schrift im Footer geht zu weit raus.
[ externes Bild ]
Auserdem zeigt der Validator 24 Fehler an.

Lehrling
Supporter
Supporter
Beiträge: 2922
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [DEV] globetrotter

Beitragvon Lehrling » 08.12.2013 19:02

Hallo,
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


Danke. Freut mich, dass er dir gefällt. :)
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%;
}

habe ich folgenden Code eingebaut:

Code: Alles auswählen

@font-face  {
              font-family: Pacifico;
              src: url("{T_THEME_PATH}/font/Pacifico.ttf");
}


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:
forumtitle { font-family: Pacifico; }

Liebe Grüße
Beate

Lehrling
Supporter
Supporter
Beiträge: 2922
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [DEV] globetrotter

Beitragvon Lehrling » 08.12.2013 19:05

Hallo und danke für dein feedback,
Kirk hat geschrieben:Hallo
Was mir auffällt die Schrift im Footer geht zu weit raus.
[ externes Bild ]

Das ist seltsam. Bei mir wird der footer richtig angezeigt.
EDIT:Ich habe es jetzt auch gesehen und korrigiert. Ich hoffe, jetzt wird der footer richtig angezeigt.
Auserdem zeigt der Validator 24 Fehler an.

ja, ich weiß. Das sind alles Fehler, die in meinen ersten Styles noch stecken (girlie_heart und girlie_flower). :oops: Ich hatte einfach noch keine Lust, die auszubügeln.

LG Beate


Zurück zu „[3.0.x] Styles in Entwicklung“