Do it yourself: CSS für Profil und Blog

Mal eine bescheidene Frage.

Wie identifiziere ich im CSS STYLE einzelne User? Haben die eine Idee. zb um Namen oder Bilder zuzufügen?

Was genau meinst du, @Fedaykin ?

Nun in einem thread möchte ich zb einen User ein avatar Bild oder einen Untertitel unter den Namen setzten

@Fedaykin
Sollte das nicht @Rattensohn wissen?
Er hat ja das Css für die Spelunke gemacht

Cherokeerose schrieb:Sollte das nicht @Rattensohn wissen?
Er hat ja das Css für die Spelunke gemacht

Nene, das hat @Sector7 alles geschaffen.
Ich ändere es nur für meine Bedürfnisse ab. :troll:

Rattensohn schrieb:Ich ändere es nur für meine Bedürfnisse ab

So ist das..

Hallo,

gibt es einen Code, mit dem ich alles, aber auch wirklich alles aus dem Profil entferne, sodass am Ende nur ein Foto angezeigt wird? Ich würde mein Profil nämlich gerne komplett leeren, damit es niemand mehr besuchen kann.

@Ford
Du kannst ja alle Elemente mit display:none oder visibility:hidden belegen.

@Luminita
Und wenn ich alles belegt habe, kann ich dann einfach ein Bild einfügen oder wird das dann auch ausgeblenet?

Ford schrieb:wenn ich alles belegt habe,

bis auf das Bild.
dieses bleibt übrig.

display:none entfernt ein Element
visibility:hidden macht es unsichtbar

@Bishamon
Ah verstehe. Danke dir. :)

Ich möchte im Gästebuch die Umrandung der Avas dicker haben, finde den Code aber nicht

@Cherokeerose
Ich glaub das ist .gb_post_usericon und dann border.

@Luminita
Danke, werde ich später mal versuchen

@Cherokeerose

#gb_posts li a.gb_post_img img

und dann "border".

Ich hab mein Profil überarbeitet (von Grund auf neu) und einige Fragen sind offen geblieben, ich würde die mal frech in die Runde stellen. :)

1. Wie kann ich den YT-Player zentrieren? Aktuell habe ich margin-left 700px, aber ich hätte es gerne automatisch mittig.

2. Kann man beim Hovern über einen Link die Textanzeige verändern? Ich fände es cool, wenn mein Button von "Allmystery unterstützen" zu "Allmy braucht dich!" (oder etwas vergleichbares) wechseln könnte.

Falls noch jemandem etwas auffällt, was komisch aussieht - gerne her damit. Und dann muss mir nur noch etwas einfallen, was ich da sonst noch hinschreibe. :)

Luminita schrieb:beim Hovern über einen Link die Textanzeige verändern?

den eigentlichen Text-Content kann man nicht ändern.
nur mit den Pseudo-Elementen ::before und ::after einen Text-Content vorne bzw hinten hinzufügen.
Wenn dieser Text-Content leer ist, kann man etwas basteln:

https://stackoverflow.com/questions/43845901/change-text-on-hover-css-and-html

Luminita schrieb:1. Wie kann ich den YT-Player zentrieren? Aktuell habe ich margin-left 700px, aber ich hätte es gerne automatisch mittig.

Wenn ich ein komplett neues Profil baue, setze ich zunächst Allmys Basis Elemente auf null bzw. neutral und zentriert:

html.desktop { padding-right: 0 !important; } body { padding-top: 0 !important; margin: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; word-wrap: break-word; background: #fff !important; } .page { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0; padding: 0; background: transparent; } .main { width: 100% !important; max-width: 100% !important; padding-top: 0 !important; padding-left: 0 !important; margin-right: 0 !important; margin-left: 0; text-align: center; } #profilecontent { margin: 0; padding: 0; }

Luminita schrieb:2. Kann man beim Hovern über einen Link die Textanzeige verändern? Ich fände es cool, wenn mein Button von "Allmystery unterstützen" zu "Allmy braucht dich!" (oder etwas vergleichbares) wechseln könnte.

Ich habe deinen .cssbutton modifiziert:

css
.cssbutton { color: #000; font-weight: bold; font-family: 'Bodoni MT', serif; font-size: 19px; padding: 10px; background-color: #2c3354b3 !important; box-shadow: 2px 2px 2px 2px #666; border-radius: 10px; cursor: pointer; width: 250px; height: 50px; line-height: 50%; text-align: center; display: block; float: left; } .cssbutton:hover { box-shadow: none; } p.txt2 { display: none; } .cssbutton:hover p.txt1 { display: none; } .cssbutton:hover p.txt2 { width: 250px; height: 50px; line-height: 50%; color: #fff; text-align: center; display: block; }

html
<div class="cssbutton"> <p class="txt1">Allmystery unterstützen...</p> <p class="txt2">Allmy braucht dich!</p> </div>

EDIT, @Luminita

Eine kurze Erklärung noch zu deinem cssbutton:

Anders als bei der Variante von @Bishamon (:before bzw. :after), habe ich zwei Texte innerhalb des cssbuttons (siehe html) eingefügt.

.txt1 = Haupttext = "Allmystery unterstützen..."
.txt2 = Hover Text = "Allmy braucht dich!"

.txt2 ist per display:none zunächst ausgeblendet. Hoverst du .cssbutton, wird .txt1 aus- und .txt2 eingeblendet.

Das gleiche Prinzip funktioniert z.B. auch beim Einsatz von Bildern oder Text/Hover Bild. Dazu musst du nur die Größenangaben des Buttons und des Pic synchronisieren bzw. das Bild mit

.my_img { width: 100%; height: 100%; object-fit: cover; display: block; }

an die Größe von .cssbutton anpassen.

@Luminita

.cssbutton mit Text und Hover Bild:

css

.cssbutton { color: #000; font-weight: bold; font-family: Bodoni MT; font-size: 19px; padding: 10px; background-color: #2c3354b3 !important; box-shadow: 2px 2px 2px 2px #666; border-radius: 10px; cursor: pointer; width: 250px; height: 150px; line-height: 100px; text-align: center; display: block; float: left; } .cssbutton:hover { box-shadow: none; } .cssbutton:hover p.txt1 { display: none; } img { width: 100%; height: 100%; object-fit: cover; margin: 0; padding: 0; display: none; } .cssbutton:hover img { display: block; }


html

<div class="cssbutton"> <p class="txt1">Allmystery unterstützen...</p> <img src="https://image.gala.de/22244618/t/tf/v6/w1440/r1.5/-/support.jpg" border="0" /> </div>