Do it yourself: CSS für Profil und Blog

Tut mir leid falls es schon gefragt wurde, aber wie kann ich die Schrift fett machen und in eine andere Form bringen?
Danke schonmal im Vorraus

Hier kannst Du ein bisschen nachlesen, ist aber nicht ganz einfach anzuwenden.

Allmystery-Wiki: Klassen-Sammlung


Man kann Änderungen der Schrift in seinem Profil in einen style-tag setzen:

<style>body {font-size:16px;font-family:Trebuchet MS;}</style>

Das ist sinnvoll, wenn man Einstellungen nicht für jeden Satz oder jedes Wort einzeln machen will und so ist es später einfacher, wenn wieder was geändert werden soll.

Bei den Schriftarten muss man bedenken, dass sie nur angezeigt werden, wenn man auch diese Schrift auch installiert hat.


Man kann aber auch nur einzelne Sätze formatieren, z.B. so:

Text fett

[b]Text zentriert und fett[/b]

Das waren jetzt nur ein paar einfache Dinge auf die Schnelle.

@Suheila
Danke , aber bei mir funktioniert beides nicht :/ und die Klassen-Sammlung verstehe ich nicht ganz :|

@Irrelevant2.0

Ist auch nicht ganz einfach. Mit Hilfe dieser Klassen kann man die Eigenschaften entsprechender Bereiche des Profils ändern, also z.B. die Schriftfarbe der Gästebucheinträge. Diese Klassen kann man (innerhalb von "Style-Tags") in das große Feld unten setzen, das bei Einstellungen/Mein Profil unter "Weiteres (Texte, Bilder, Style, ...):"angezeigt wird.

Wenn Du Dich noch nie damit (CSS) beschäftigt haben solltest, hast Du natürlich schlechte Karten, das alleine hinzubekommen. Aber falls Du etwas bestimmtes im Profil geändert haben möchtest, kann Dir hier bestimmt geholfen werden.

@Irrelevant2.0

Wenn es sich um eigenen Text handelt, kannste es zB so machen:

Ist das Leben nicht komisch ? So viele Fragen und niemand kann sie beantworten, so viele Gedanken jedoch ohne jegliche Struktur..

...oder strukturierter zur Wiederverwendung so:

<style> .meinText { background: rgba(0,0,0,0.7); padding: 10px; font-family: "Times New Roman", Serif; font-size: 20px; font-weight: 700; color: darkred; } </style> Ist das Leben nicht komisch ? So viele Fragen und niemand kann sie beantworten, so viele Gedanken jedoch ohne jegliche Struktur..

...wenn es um Allmy-Elemente geht, dann musste halt die entsprechenden Allmy-Klassen oder IDs verwenden, wie @Suheila schon sagte...

@tAnEa

Finde Deine Code-Beispiele richtig gut. Weil daran sieht man wunderbar, dass beide Varianten funktionieren, man aber bei der strukturierten Variante später viel weniger Arbeit hat, wenn man wieder etwas verändern möchte.

Wollte ich nur mal anmerken :)

@S_C
Bin mal wieder mit deinem Cube zugange. :D Irgendwie bekomme ich das mit den integrierten Fotos in meinem Blog nicht gebacken.


Hier der Code:

"
Spoiler <style>

.cube_cnt {
width:200px;
height:200px;
margin: 150px auto 150px auto;
position: relative;
display: block;
transform: rotate(45deg);
}

.cube_cnt p {
transform: rotate(-45deg);
}

.cube {
-webkit-animation-name: cube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 9s;
animation-name: cube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 75px 75px 0;
-moz-transform-origin: 75px 75px 0;
-ms-transform-origin: 75px 75px 0;
transform-origin: 75px 75px 0;
}

.cube div {
position: absolute;
width:400px;
height:400px;
line-height: 110px;
text-align: center;
font-size: 26px;
Color:#000;


}
R
.cube .f1 {
-webkit-transform: translateZ(75px);
-moz-transform: translateZ(75px);
-ms-transform: translateZ(75px);
transform: translateZ(75px);
background:Original anzeigen (0,2 MB);
}

.cube .f2 {
-webkit-transform: rotateY(90deg) translateZ(75px);
-moz-transform: rotateY(90deg) translateZ(75px);
-ms-transform: rotateY(90deg) translateZ(75px);
transform: rotateY(90deg) translateZ(75px);
background:Original anzeigen (0,2 MB);
}

.cube .f3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
background:Original anzeigen (0,2 MB);
}

.cube .f4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
background:Original anzeigen (0,2 MB);
}

.cube .f5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
background:Original anzeigen (0,2 MB);
}

.cube .f6 {
-webkit-transform: rotateX(-90deg) translateZ(75px);
-moz-transform: rotateX(-90deg) translateZ(75px);
-ms-transform: rotateX(-90deg) translateZ(75px);
transform: rotateX(-90deg) translateZ(75px);
background:Original anzeigen (0,2 MB);
}

@-webkit-keyframes cube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}

@keyframes cube {
from,to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

16% {
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}

33% {
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}

50% {
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}

66% {
-moz-transform: rotateY(-270deg) rotateX(90deg);
-ms-transform: rotateY(-270deg) rotateX(90deg);
transform: rotateY(-270deg) rotateX(90deg);
}

83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}

</style>









Original anzeigen (0,5 MB)





Original anzeigen (0,6 MB)






"

Wenn du mal on bist, kannste da mal drüber schauen? Passt alles irgendwie nicht und ist zu groß, bewegt sich über das Feld hinaus. Ich bekomme das einfach nicht hin.

@S_C, hat sich erledigt. @Anevay hat mir den cube genau so gemacht wie ich in mir vorgestellt habe. Danke, an euch Beide noch mal!

Das Teil ist einfach gigantomantischgroßartig. :D

Mal ne Frage.
Wenn ich mit dem Handy auf mein Profil gehe, geht die Youtubemusik nicht automatisch an, beim Laptop aber wohl.

WORAN LIEGT DAS?

Fehler!

Huhu!

Kann mir jemand sagen wie ich hier einen code so einstelle, dass er beim anklicken....Code anzeigen....auch als code erscheint?

nodoc schrieb:Kann mir jemand sagen wie ich hier einen code so einstelle, dass er beim anklicken....Code anzeigen....auch als code erscheint?

Ja, mach einfach wie zitieren und ersetze zwischen den eckigen Klammern jeweils das Wort "ZITAT" durch das Wort "code"

Zu deinem Problem: (vor body kommt kein Punkt und bei background fehlt das url() )

body { background: url(https://www.allmystery.de/static/upics/b2c972_carl_burton_2.gif); background-color: #000000; background-attachment: fixed; }

@tAnEa
Erst mal Dank für die Hilfe...

...keine Ahnung was ich falsch mache. Auf meinem Profil habe ich keine Probleme damit. Kann es sein das es an dem animierten Hintergrund liegt? Oder ich einen style tag davor setzen muss? *haare rauf*


body { background:https://www.allmystery.de/static/upics/b2c972_carl_burton_2.gif; background-color: #000000; background-attachment: fixed; } <style type="text/css"> .infoleiste, .sound { display: none !important; } #blog-entries { width: 100%; max-width: 720px; } #sidebar { width: 310px; position: absolute; right: 0; top: 140px; border: 1px solid #40404C; background: #2B2B2B; text-align: left; box-sizing: border-box; z-index: 999; }..............uswusw.

@nodoc

ja, natürlich, das muss in einen eigenen Style-Tag oder in deinen bereits vorhandenen...

<style> body { background: url(https://www.allmystery.de/static/upics/b2c972_carl_burton_2.gif); background-color: #000000; background-attachment: fixed; } </style>

@tAnEa


Ahhh....danke dir! Werde ich gleich mal testen. Habe schon alle möglichen Varianten durch, aber...Versuch macht kluch. ;)


Juchhhuuu....hat gefunzt!

Hallo weiß jemand wie man die Avatare der User im Gästebuch anstatt rechteckig als Kreis anzeigen lassen kann?

@kiru

.gb_post_img img, .user_view_pic { border-radius: 50%; }

@tAnEa
hey super dank dir :)

@tAnEa
oh da fällt mir noch was ein vielleicht kannste mir da ja auch helfen.. würde gerne die umrahmung der avatare verändern als breiter machen :)

Huhu, könnte mir jemand von euch verraten, wie man interaktive Schaltflächen erstellt? Also, ich habe ein Bild, das füge ich an einer beliebigen Stelle ein und wenn man darauf klickt, soll ein Text erscheinen (und bei einem erneuten Klick auf das Bild auch wieder ausgeblendet werden). Ich probiere schon eine Zeitlang rum, aber meine bisherigen Versuche waren leider nicht von Erfolg gekrönt. :3