Do it yourself: CSS für Profil und Blog

@Luminita

Und die Variante Bild / Hover Text:

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; } img { width: 100%; height: 100%; object-fit: cover; margin: 0; padding: 0; } .cssbutton:hover img { display: none; } .txt1 { width: 250px; height: 150px; line-height: 100px; text-align: center; display: none; } .cssbutton:hover .txt1 { display: block; }


html

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

S_C schrieb:Ich habe deinen .cssbutton modifiziert:

Mega, ich hab deine Modifizierung noch etwas modifiziert, jetzt passts. Danke dir! Und gut zu wissen, dass es zwei Möglichkeiten gibt, danke an @Bishamon natürlich auch :)

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

Das macht aber ganz schreckliche Dinge mit meinem Profil :3 Ich verstehe, warum du das machst (habe den Code jetzt auf position: absolute und left: 60% eingestellt, aber das ist natürlich eher ein workaround). Ich werd mir das mal nehmen und dann die einzelnen Elemente wieder anpassen, heute Abend vermutlich, dann berichte ich. :)

Luminita schrieb:Das macht aber ganz schreckliche Dinge mit meinem Profil :3

😂
Das passt schon, denn dann kannst du die Elemente die du benötigst und/oder selbst einbaust positionieren wie du willst. In der Regel funzt das z.B. zentrieren dann per "margin: 0 auto;"

Elemente mit "absolute" oder "fixed" positionieren würde ich nur in ganz speziellen Fällen (z.B. beim Einsatz der Pseudoklasse :target oder einem festen Header, Footer und dergleichen). Oder wenns wegen Allmy vielleicht nicht anders geht. Setzt du ein Element per position: absolute und left: 60%, dann mag das vielleicht auf einem Monitor wirken. Beim Tablet oder gar Handy geht das dann nicht mehr ohne dem Einbau von Viewports im CSS-Code.

Luminita schrieb:Ich werd mir das mal nehmen und dann die einzelnen Elemente wieder anpassen, heute Abend vermutlich, dann berichte ich. :)

👍

Ich habe mir ja in den 16 Tagen, wo ich hier bin schon sehr viel aus diesem Thread herausgezogen und zusammengebastelt, ich finde mein Profil jetzt fast perfekt.

Nur eines möchte ich noch erreichen und zwar: in der Infoleiste möchte ich die Blöcke „Blog“ und „zufällige Diskussion“ oder auch Themenverwandt genannt, auch ausblenden. Alles andere soll weiter so stehen bleiben. Gibt es dazu einen Code? Oder geht das nicht?

@Dhara

Damit sollte es gehen:

a[href^="/blogs/"], .blog-roster, a[href^="/themen/"] { display: none !important; }

@S_C

Vielen lieben Dank an dich, ich habe den Code eingesetzt und es hat aufs erste geklappt, ohne noch mal nachzufragen, das ist sooo cool!

Ich danke dir!

.

Hi @S_C

ich hab mich erst so gefreut und es waren ja auch diese beiden Kästchen der Infoleiste ausgeblendet, nur noch die Anzahl der Beiträge, die unter dem ausgeblendeten „zufällige Diskussionen“ ist noch rum gegeistert. ... Auf den ersten Blick alles OK!

Dann hab ich aber meinen Header gesehen, den hat es komplett verhagelt, da waren keine Funktionen mehr angezeigt. Ich musste den Code wieder raus nehmen.

Vielen Dank für deine Mühe, ich lass es jetzt einfach so, oder ich blende die ganze Infoleiste aus und mache sie nicht nur transparent.

Sorry, @Dhara, hatte die Spezifizierung vergessen 😱

Jetzt aber:

.infoholder a[href^="/blogs/"], .infoholder .blog-roster, .infoholder a[href^="/themen/"] { display: none !important; }

@S_C

WOW! du kannst ja mal auf meinem Profil schauen, ich glaube es ist perfekt! :D

@Dhara

Ob's perfekt ist musst du wissen :) Jedenfalls funzt der Code :Y: ;)

und die Beiträge von den ausgeblendeten „zufällige Diskussionen“ stören nicht wirklich. :D

@S_C

Ich finde das ist jetzt für mich super toll, so wollte ich das haben, ich danke dir sehr!

Dhara schrieb:Und die Beiträge von den ausgeblendeten „zufällige Diskussionen“ stören nicht wirklich. :D

Die bekomme ich auch nicht weg, ohne den Rest der Infoleiste ebenfalls abzuschalten. Tüftle aber noch daran.

Dhara schrieb:Ich finde das ist jetzt für mich super toll, so wollte ich das haben, ich danke dir sehr!

Na denn... immer gern :Y:

@Dhara


Ich hab's:

.infoholder a[href^="/blogs/"], .infoholder .blog-roster, .infoholder a[href^="/themen/"], .mcell_inhalt:last-child { display: none !important; }

@Dhara

Da du die Pics in deinem GB abgeschaltet hast:

.icon-extlink { left: 0 !important; min-width: 18em; width: 100% !important; }

So sehen deine Besucher leichter, dass da welche vorhanden sind ;)

Und jetzt störe ich dich nicht mehr 🤫 👋

@S_C

hahaha ... das ist ja auch cool, Danke!

I need help. Schaut euch mal die zwei Texte auf meinem Profil an. Ich hab ja die "Quellen" in schwarzer Schrift. Und ich hätte gerne, dass die schwarze Schrift weiß-transparent hinterlegt ist, und nicht schwarz.
So, d. h. ich müsste diese beiden Texte mit einer separaten Kennzeichnung versehen, denn aktuell heißt dieses gesamte Ding "font".

Wie mache ich das? Alles, was ich versucht habe, hat nicht funktioniert.

Luminita schrieb:So, d. h. ich müsste diese beiden Texte mit einer separaten Kennzeichnung versehen, denn aktuell heißt dieses gesamte Ding "font".

Trenne Styling und Inhalt, denn dazu wurde ja CSS geschaffen ;) Tags wie "font" usw. brauchst du dann nicht mehr.

Ich würde so vorgehen:

Du hast zwei Textblöcke mit jeweils einen weißen Text plus die Quellen in schwarz. Baue dir also zunächst einen Rahmen, der 1x den weißen und 1x den schwarzen Text beinhalten wird:
<div class="box"> </div>


In diese Box baust du einen weiteren Rahmen für den weißen Text (Du kannst natürlich auch den p- Tag nutzen und mit einer Klasse beschriften, aber dann musst du den p- Tag von Allmy überschreiben.):
<div class="box"> <div class="text">Dein weißer Text</div> </div>


Das gleiche machst du für den schwarzen Text:
<div class="box"> <div class="text">Dein weißer Text</div> <div class="quelle">Dein schwarzer Text</div> </div>

Das war der Html-Teil. Jetzt das css dazu:
.box { float: left } .text { color: #ffffff; position: relative; display: block; } .quelle { color: #000000; position: relative; display: block; background: #ffffff; }

Jetzt kannst du die Klassen .box, .text und .quelle gestalten wie immer du möchtest. Also Hintergründe, Abstände (margin/padding), Text Style, Größen uvm.

Da du aktuell zwei Boxen hast:
<!-- text box 1 --> <div class="box"> <div class="text">Dein weißer Text</div> <div class="quelle">Dein schwarzer Text</div> </div> <!-- text box 2 --> <div class="box"> <div class="text">Dein weißer Text</div> <div class="quelle">Dein schwarzer Text</div> </div>
Usw. usf.

Möchtest du z.B. den Hintergrund für jede Box anders gestalten, musst du die einfach nur in z.B. .box1 umbenennen und das css dazu schreiben. Das gleiche geht natürlich auch mit den Klassen für die Texte bzw. Quellen.

Liebe Leut´, könnt ihr mir helfen, wie in meinem GB keine Bilder rein gestellt werden können?