Das Forum zu Nutzerseiten.

Hilfe für CSS/Nutzerseiten-Er...

#998442 von Spectral
03.09.2013, 23:43
Hi,

wie schon im Betreff erwähnt, ich will mir eine Nutzerseite basteln und weiß nicht wie. CSS hatten wir zwar letztes Jahr in Informatik, ich war aber leider manchmal etwas "abgelenkt" (hab mir die News von Pokemon X/Y angeschaut :P ) Ich habe schon einige Tutorials hier gelesen, verstehe aber einiges nicht. Diese Fragen möchte ich hier mal stellen:

1. Mal eine ganz blöde Frage: Klick. Ich scrolle nach unten und sehe ein leeres Textfeld mit der Aufschrift:
Die Seite, auf der man seine Nutzerseite bearbeiten kann, hat geschrieben:Hier kannst du ein CSS-Stylesheet für deine Nutzerseite anlegen.
Nutze diese Option nur, wenn du dich mit CSS auskennst. Erlaubt sind nur Formatierungen des Inhalts von #userpage, das Design von Pokefans darf nicht verändert werden.
Wie fange ich da an? Schreibe ich gleich irgendwas von font-size und margin-top oder was weiß ich oder muss ich davor noch irgendwas dazuschreiben? Und was bedeutet das, dass ich nur Inhalte von #userpage bearbeiten darf?

2. Wie kann ich da den Text einbinden? Schreibe ich das wie beim BB-Code dazwischen, also quasi
Code: Alles auswählen{font-size: 10pt; color: #FF000}Text{/font-size}{/color}
Ich denke nicht. Wie dann?

Hoffe, dass mir jemand das mal beantworten kann. Danke schonmal im Voraus.
MfG Smeagol
-0
+0

Werbung

Registriere dich kostenlos und beteilige dich aktiv in diesem Forum, um diese Werbung auszublenden.

Re: Einfach zu verstehendes Tu...

#998443 von LukeSkywalker
03.09.2013, 23:54
Ja, in dieses Feld kannst du gültigen CSS-Code eintragen. Wenn dort steht, dass nur Inhalte von #userpage bearbeitet werden können, heißt das, dass du nicht die CSS-Elemente vom Pokefans-Stylesheet verändern darfst (z.B. ein anderes Menü). Ein Beispiel dafür wäre:

Code: Alles auswählen#userpage
{
    font-family: "Lato", sans-serif;
}


Damit setzt du die Schriftart in deiner Benutzerseite auf "Lato".

Der Text hat mit CSS dann nicht mehr so viel zu tun. Eintragen kannst du ihn entweder mit HTML (mehr Möglichkeiten) oder über den Editor, der sich über dem CSS-Feld befindet (weniger Möglichkeiten, aber einfacher). Beachte, dass du dafür aber Javascript aktiviert haben musst.

Bild

Ein paar Informationen findest du auch hier: pokefans-organisation/topic65622.html
-0
+1

Re: Hilfe für CSS/Nutzerseite...

#998474 von Fiffyen
04.09.2013, 11:15
Dazu hätte ich noch eine kleine Frage: Luke, du verwendest eine Schriftart, die bei mir in Windows nicht existiert. Gibt es eine Möglichkeit, Schriftarten, von bsw. Google Fonts oder eigenen URL's einzubinden?
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998567 von LukeSkywalker
04.09.2013, 15:52
Über @import via CSS konnte ich die Schriftart nicht einbinden. Funktioniert hat es, indem ich das <link>-Tag direkt an den Anfang der Nutzerseite gestellt habe. Das ist zwar ungültiges HTML, aber in Google Chrome und Firefox funktioniert es.
Eine Fallback-Schriftart solltest du aber auch angeben, falls es in älteren Browsern so nicht funktioniert, oder falls das <link>-Tag irgendwann eingeschränkt wird.

Code: Alles auswählen<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
-0
+1

Re: Hilfe für CSS/Nutzerseite...

#998580 von Spectral
04.09.2013, 16:15
@ Luke Skywalker: Danke für die Antwort, jetzt verstehe ich es (einigermaßen :tja: )
Ich habe nur noch eine klitzekleine Frage: Wie binde ich Icons/Sprites ein? Geht das überhaupt?
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998583 von LukeSkywalker
04.09.2013, 16:18
Klar, das kannst du mit speziellen Codes machen :) . Ersetze dafür einfach die Zahl durch die Nationale#ID des Pokémon.

Code: Alles auswählen{sprite: 25;}

Für ein Pikachu-Sprite.

Code: Alles auswählen{icon: 25;}

Für ein Pikachu-Icon.
-0
+1

Re: Hilfe für CSS/Nutzerseite...

#998584 von Spectral
04.09.2013, 16:19
Schreibe ich das im oberen Fenster unter Quellcode oder im CSS-Fenster?
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998585 von Birne94
04.09.2013, 16:20
Das gehört in den Quellcode an die gewünschte Stelle.
-0
+1

Re: Hilfe für CSS/Nutzerseite...

#998590 von Spectral
04.09.2013, 16:30
Danke, der Icon funktioniert jetzt, aber aus irgendeinem Grund ist er hochgestellt (so)
Bild.
Kann ich das irgendwie ändern?
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998599 von Fiffyen
04.09.2013, 16:48
Wenn du den Icon-Code zwischen einen <span>-Tag setzt, könntest du es über CSS nochmal formatieren. Du könntest dem Tag auch einen Klasse zufügen und diese dann in dem CSS-Feld an deinen Text anpassen.
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998603 von Spectral
04.09.2013, 16:59
Danke, aber das versteh ich irgendwie nicht :tja:
Was ist ein Span-Tag? Wie mache ich den und was bringt der? Wie kann ich dem Tag eine Klasse hinzufügen? So?
Code: Alles auswählen<span class="icon_panflam" style="???">{icon: 390;}</span>
Und sollte der unwahrscheinliche Fall eintreten, dass das stimmt, was füge ich bei "???" ein?
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998615 von Fiffyen
04.09.2013, 17:40
Das ist schon richtig :)
Die Klasse, die du dort eingefügt hast, kannst du in dem CSS-Textfeld wieder aufgreifen und damit alle <span>-Tags, die diese Klasse tragen richtig ausrichten.
Du solltest allerdings darauf achten, dass du eine Klassen für alle Icons verwendest. Die Klassen sind unter anderem dafür da, dass du Styles die du öfter verwendest, einfacher ändern kannst und nicht das Template nach genau diesen Inline-Styles durchsuchen musst. Deshalb ist für die Icons beispielsweise eine einheitliche Klasse von Vorteil, wie beispielsweise .pkmnicon, die du dann für alle Icons verwendest. Die Klasse .icon solltest du nicht verwenden, denn die wurde bereits von Pokefans aus definiert - da müsstest du alle deklarierten Eigenschaften überschreiben.

CSS-Code:
Code: Alles auswählen.pkmnicon
{
     /* Hier folgen einige CSS-Eigenschaften, die dir das Icon richtig ausrichten. */
}


Ich kann dich hier auch auf unsere HTML und CSS-Guides verweisen, die dir vielleicht etwas helfen können, besser mit der Materie klar zukommen:
-0
+3

Re: Hilfe für CSS/Nutzerseite...

#998618 von Spectral
04.09.2013, 17:50
Danke, langsam beginne ich, es zu verstehen. :) Hab bloß noch eine Frage:
Fiffyen hat geschrieben:
Code: Alles auswählen.pkmnicon
{
     /* Hier folgen einige CSS-Eigenschaften, die dir das Icon richtig ausrichten. */
}

Was für Eigenschaften wären das? In KingDDDs Guide hab ich keine gefunden...
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998621 von Fiffyen
04.09.2013, 17:54
In deinem Fall wird wahrscheinlich die Eigenschaft margin-bottom voll ausreichen. Dort setzt du einen negativen Wert in Pixeln, der angibt, wie weit das Icon nach unten verschoben wird.
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998627 von Spectral
04.09.2013, 18:20
Funktioniert irgendwie nicht :?
Ich habe das hier probiert
Code: Alles auswählen.pkmnicon {margin-bottom:-8px;}
das hier
Code: Alles auswählen#pkmnicon {margin-bottom:-8px;}
und das hier.
Code: Alles auswählenpkmnicon {margin-bottom:-8px;}
Keins davon funktioniert... Was mache ich falsch?

E: Funktioniert auch nicht, wenn ich davor
Code: Alles auswählen#pokefans
schreibe.
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998628 von LukeSkywalker
04.09.2013, 18:26
Verwende diesen CSS-Code, ähnlich dem von Fiffyen:
Code: Alles auswählen.pkmnicon > img { margin-bottom: -8px; }


Danach formatierst du das Bild wieder mit <span>:
Code: Alles auswählen<span class="pkmnicon">{icon: 25;}</span>
-0
+2

Re: Hilfe für CSS/Nutzerseite...

#998629 von Spectral
04.09.2013, 18:31
Endlich funktioniert es! Danke an euch zwei, hat alles sehr geholfen! :)
-0
+0

Re: Hilfe für CSS/Nutzerseite...

#998630 von Fiffyen
04.09.2013, 18:32
Bitte entschuldige, da habe ich nicht weitergedacht. Du musst dem Unterelement img von span.pkmnicon die Eigenschaften zuweisen, nicht dem eigentlichen <span>-Tag.

Also so:
Code: Alles auswählen.pkmnicon > img
{
     /** Deine gewünschten Eigenschaften */
}

Ich habe das übrigens mal auf meiner Benutzerseite ausprobiert und bemerkt, dass -8px nach unten etwas viel sind - mag vielleicht nicht wirklich auffallen, aber -6px passen in dem Fall besser.

PS.: Die letzten beiden Codes, die du in deinem Beitrag hattest, sind übrigens eine ID (das mit der Raute) und ein HTML-Element (das ohne Vorzeichen).

PPS.: Too late....
-0
+1

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast