Allmystery
Menschen Wissenschaft Politik Mystery Kriminalfälle Spiritualität Verschwörungen Technologie Ufologie Natur Umfragen Unterhaltung
weitere Rubriken
PhilosophieTräumeOrteEsoterikLiteraturAstronomieHelpdeskGruppenGamingFilmeMusikClashVerbesserungenAllmysteryEnglish
Diskussions-Übersichten
BesuchtTeilgenommenAlleNeueGeschlossenLesenswertSchlüsselwörter
Schiebe oft benutzte Tabs in die Navigationsleiste (zurücksetzen).

Do it yourself: CSS für Profil und Blog

6.741 Beiträge ▪ Schlüsselwörter: Allmystery, Hilfe, Welt ▪ Abonnieren: Feed E-Mail

Do it yourself: CSS für Profil und Blog

21.10.2020 um 22:35
@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>


melden

Do it yourself: CSS für Profil und Blog

22.10.2020 um 09:33
Zitat von S_CS_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 @Kybela natürlich auch :)
Zitat von S_CS_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. :)


1x zitiertmelden

Do it yourself: CSS für Profil und Blog

22.10.2020 um 19:15
Zitat von LuminitaLuminita 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.
Zitat von LuminitaLuminita schrieb:Ich werd mir das mal nehmen und dann die einzelnen Elemente wieder anpassen, heute Abend vermutlich, dann berichte ich. :)
👍


melden

Do it yourself: CSS für Profil und Blog

26.10.2020 um 16:56
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?


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 00:38
@Dhara

Damit sollte es gehen:

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


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 09:02
@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!


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 09:28
.


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 09:58
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.


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 20:30
Sorry, @Dhara, hatte die Spezifizierung vergessen 😱

Jetzt aber:

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


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 20:34
@S_C

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


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 20:37
@Dhara

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


melden

Do it yourself: CSS für Profil und Blog

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


1x zitiertmelden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 20:41
@S_C

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


1x zitiertmelden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 20:43
Zitat von DharaDhara 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.
Zitat von DharaDhara 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:


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 20:49
@Dhara


Ich hab's:

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


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 21:20
@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 🤫 👋


melden

Do it yourself: CSS für Profil und Blog

27.10.2020 um 21:28
@S_C

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


melden

Do it yourself: CSS für Profil und Blog

02.12.2020 um 20:23
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.


1x zitiertmelden

Do it yourself: CSS für Profil und Blog

04.12.2020 um 16:15
Zitat von LuminitaLuminita 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.


melden

Do it yourself: CSS für Profil und Blog

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


melden