Do it yourself: CSS für Profil und Blog RSS

   Do it yourself: CSS für Profil und Blog 12.11.2010 um 17:11



Da der letzte Profil-Hilfe Thread schon so ausgeartet ist, dass niemand mehr Lust hat etwas zu suchen und der angegebene Style-Tag im Eingangspost auch nicht so das wahre ist eröffne ich hiermit einen neuen Thread.

Dann wollen wir mal..

Der Style des Profils wird durch einen Style-Tag bestimmt, dieser beginnt immer mit einem <style> und endet mit einem </style>
Darin werden alle Angaben in CSS gemacht.
Geschrieben wird das in das große Einstellungsfeld in den Profileinstellungen:
http://www.allmystery.de/am/settings_profile/
bzw für den Blog:
http://www.allmystery.de/am/settings_blog/

Die Hauptschirft des Profils kann ganz einfach mit body angesprochen werden, alle links mit a.
Ich denke mal das ist so am wichtigsten.
Ich bin mal so frei und bedien mich an RaccoOn Bildern usw, dann muss ich das selbst nicht machen^^'
also in dem Beispiel:

würde das ganze so aussehen:

<style>
body {color: #FFFF00;}
a {color: #FF0000;}
a:hover {color: #00FF00;}
</style>

Der hover gibt immer an was das Objekt machen soll, wenn man mit der Maus drüber fährt (hovert).
Dh in dem Fall hätten wir die Hauptschrift in gelb, Links in rot und hover in grün (auf dem Bild 'Gästebuch').

Es empfiehlt sich außerdem die Einstellungen auf 'HTML' zu stellen:


Farben können natürlich beliebig ausgetauscht werden.
Dazu sucht man sich die gewünschte Farbe am besten bei colorpicker.com:
http://www.colorpicker.com/
Einfach Farbe aussuchen und die Hexadezimal Angabe oben kopieren.
WICHTIG: Vor dem Farbcode muss immer ein # stehen!

Weil schon häufiger danach gefragt wurde hab ich beschlossen auch den header, die Rubriken und die Freundesliste hier mit rein zu packen.
Zu aller erst:
header = der große Block über den Rubriken mit 'Allmystery', Schlüsselwörtern, Echtzeit und so..
Rubriken = oder auch tabnav - die Leiste der Links zu den verschiedenen Rubriken
Freundesliste = oder auch kurz fl - der Block rechts, in dem die Freunde und Verwaltung und so stehen.

Weil schon häufiger die Frage kam wie man die transparent bekommt:

<style>
.header {background: none; background-color: transparent;}
.tabnav a, .tabnav a:hover {background-color: transparent;}
.mcell, .mcell_status, .mcell2, .mcell_inhalt, .mcell_inhalt2 {background-color: transparent;}
</style>

Das transparent kann auch beliebig durch einen Farbcode ausgetauscht werden.
(siehe colorpicker)

Wer beides drin haben will, kann auch einfach beide Blöcke in einen Style-Tag schreiben, das würde dann so aussehen:

<style>
body {color: #FFFF00;}
a {color: #FF0000;}
a:hover {color: #00FF00;}

.header {background: none; background-color: transparent;}
.tabnav a, .tabnav a:hover {background-color: transparent;}
.mcell, .mcell_status, .mcell2, .mcell_inhalt, .mcell_inhalt2 {background-color: transparent;}
</style>

damit wäre alles transparent und die Farben so wie auf dem Bild oben ^.^

Zum hochladen von Bildern kann btw jeder auch den Allmy Uploader nutzen:
http://www.allmystery.de/am/uploader

Außerdem sollte dazu erwähnt werden, dass im Blog die Umstellung auf HTML "noch" nicht möglich ist. Dort muss alles in einem Zug geschrieben werden (ohne Absätze im Style-Tag)

Sooo..
das is mal granz grob das wichtigste
alles weitere sollte bitte im Thread erfragt werden.

Wer keine Lust auf fragen hat kann hier auch selbst blättern:
Diskussion: Tipps für die Gestaltung des Profils

Danke

   Do it yourself: CSS für Profil und Blog 12.11.2010 um 17:21

den allmystery-eigenen uploader für eure bilder findet ihr auf jeder seite unten in der fußzeile



hochgeladene bilder werden zusammen mit eurem konto in verbindung gespeichert, ihr habt dort zugriff auf all eure hochgeladenen bilder und könnt diese dort auch verwalten

die bilder können dann überall im forum eingesetzt werden.. also auch auf eurem profil :)

   Do it yourself: CSS für Profil und Blog 12.11.2010 um 17:23

Btw
Hier können auch allgemeine HTML Fragen gestellt werden, muss sich nicht nur auf CSS bschränken, das wär jetzt nur zuviel Schreibkram geworden^^'

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:01

Und ich hätt ne kleine Frage zum Blog ;)

Ich würde gerne dies schwarzen Rahmen..


anders machen... Das heißt, entweder eine andere Farbe oder etwas durchsichtiger...
Ich hoffe, ihr versteht, was ich meine...

Des mein Blog ^^
Blog von dog

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:11

@dog

Nur den Rahmen oder den ganzen Kasten?

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:12

Den ganzen Kasten :)

@YaaCool

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:14

@YaaCool
schöner eingangspost. kompliment. nun seid ihr den »lime-code« endlich los ;)

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:14

@dog

Versuch mal

.in {background-color: #FARBE;}

und setz statt #FARBE die Farbe ein, die dir am liebsten wär.

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:15

@richie1st

Ja, das war wohl der Hauptsinn :D
danke^^'

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:16

@YaaCool

Kann man von dem Kästchen im Blog die Ecken abrunden?

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:22

@Keysibuna

Klar, mit den border-radius Befehlen.
Allesdings musst du dabei beachten, dass es verschiedene Angaben für die verschiedenen Browser gibt.

Bei den Kasten im Blog würde das dann so aussehen:

.in {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

border-radius macht die Angabe für Opera, -webkit- für Safari und Chrome und -moz- für FireFox.

Man kann auch einzelne Ecken abrunden wenn du das möchtest (?)
Nur das wär dann wieder etwas aufwendiger zu erklären^^'
Also bei Bedarf nachfragen..

(ich hab jetzt mal 10px genommen, kannst du natürlich auch ändern wie du Lust hast)

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:23

@YaaCool

Danke Schön :D

   Do it yourself: CSS für Profil und Blog 13.11.2010 um 00:57

EDIT: Wenn man die Ecken so abrundet, ich denke mal im Blog sieht man das noch am deutlichsten, kann es passieren, dass der Inhalt etwas gequetscht aussieht bzw so, als würde er zu weit am Rand stehen.
Um dem vorzubeugen sollte man am besten das Padding erhöhen ^.^
im Beispiel Blog würde das dann so aussehen:

.in {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 7px;}
(müsste man dann sehen welche px-Zahl sich am besten eignet)
Das Padding gibt den Abstand an, den der Inhalt des Blocks (in dem Fall wohl der Text) zum Rand hält.

Bei den runden Ecken gibt eine einfache Zahl btw eine gleich mässige Abrundung an.
Man kann die Ecken aber auch verzerrt abrunden ^.^
Dazu benutzt man zwei Angaben wobei die eine für horizontal und die andere für vertikal steht.

Am besten erklärt sich das wohl hier mit:


@Keysibuna
@dog

   Do it yourself: CSS für Profil und Blog 14.11.2010 um 20:33

also, da ich derzeit mein komplettes profil verändere, hab ich auch eine frage:
wie bekomme ich es hin, meiner (transparenten) f-liste nen farbigen rand zu geben (am liebsten, mit kleinen abgerundeten ecken)?

   Do it yourself: CSS für Profil und Blog 14.11.2010 um 20:51

@Mr-Chaos

Einen farbigen Rand kannst du ihr mit der border Angabe geben.
Dabei musst du allerdings beachten, dass die fl gespalten is. D.h. der kleine Block oben in den du deinen Status schreibst und der große Teil in dem deine Freunde stehen.
Du könntest es auch unter .infoleiste zusammenfassen, dann ist aber der kleine Kasten unten auch mit drin (siehe wie bei mir).
Den kannst du aber auch ausblenden wenn du willst^^'

Wie willst du das am liebsten anstellen? Den kleinen Kasten unten ausblenden und den Rahmen dann zusammengefasst über .infoleiste machen oder die beiden teilen?

   Do it yourself: CSS für Profil und Blog 14.11.2010 um 20:55

beide zusammenfassen, denke würde besser aussehen ;)
bin mir aber nich sicher

ps: dein profil, hat echt stil. echt schick ;)

   Do it yourself: CSS für Profil und Blog 14.11.2010 um 21:09

@Mr-Chaos

Gut, dann müssten wir aber den Block unten ausblenden, sonst würd das komisch aussehen^^'
Ka ob dich das dann stören würde

Versuch mal

.mcell2, .mcell_inhalt2 {display: none;}
.infoleiste {border: 1px solid #FARBE;}

In deinen style-tag
Die px-Zahl kannst du anpassen wie du willst, die Farbe solltest du dir auch selbst aussuchen

Zu den runden Ecken siehe oben.
Für die Klassen machst du am besten:

.mcell, .mcell_status {
border-top-left-radius: 10px 10px;
border-top-righ-radiust: 10px 10px;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px 10px;
-webkit-border-top-righ-radiust: 10px 10px;
}
.mcell_inhalt {
border-bottom-left-radius: 10px 10px;
border-bottom-righ-radiust: 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-bottom-left-radius: 10px 10px;
-webkit-border-bottom-righ-radiust: 10px 10px;
}

Vergiss nicht auf HTML zu stellen^^'

(Ich hab mal 10px genommen, kannst du natürlich ändern)

   Do it yourself: CSS für Profil und Blog 14.11.2010 um 21:22

Um das Problem btw mal besser zu veranschaulichen ^.^

   Do it yourself: CSS für Profil und Blog 15.11.2010 um 18:20

hmm, mit dem rahmen, hat bestens geklappt, aber irgendwie, mit dem runden rand noch nicht. :(

   Do it yourself: CSS für Profil und Blog 15.11.2010 um 18:33

@Mr-Chaos

Welchen Browser nutzt du?
Ich hab da überall bei 'right' ein t hinter vergessen, sry^^'
Das hängt stattdessen bei radius o_0
Komische Sache
Mach das mal bei radius weg und häng es bei right ran.