Do it yourself: CSS für Profil und Blog

Ich hab das Problem mein last.view wandert mit jedem neuem Besucher ein Stück weiter runter kann man da was machen ?

@Deathwing_
Ich find das bei dir nicht mal mehr, ist das da links oder wo? :D

ja :P


und das ding rutscht pro besucher gefühlte 5cm nach unten

@Deathwing_
Na ja, es muss ja neue Leute anzeigen können, deshalb ist das wahrscheinlich so, denk ich.

Ich habe auf meinem Blog einen Youtube-Player eingebettet. Den Link hatte ich von dem Youtubeclip selbst. Ich habe da etwas, das geht an euch Script-Bastler!

Wie kann ich es scipten, dass der Youtube-Player automatisch abspielt und minimal skaliert ist? Also genau so, wie es auf der Profilseite schon ist. Danke an die Hilfe ♥

@canary
<iframe src="/fcgi/?m=profile&ytid=Z6ih1aKeETk" frameborder="0" height="25" width="303"></iframe>

geht das?

@Bodo
Sir, ihr habet euch wahrlich und redlich meinen tiefsten Dank verdient. Es funktioniert! :D

@canary
Jaja, schleim jetzt nicht, hab nur den Code von deinem Profil da reinkopiert. Also schwarze Magie wars wahrlich nicht jetzt :D

Guten Morgen!

Ich habe mir ein horizontales css3 Dropdown Menü mit Fade- Effekten gebastelt und dachte, der eine oder die andere kann das vielleicht gebrauchen ;)
Das tolle dabei ist, dass ihr die Allmy Links, die ihr wirklich benötigt, integrieren, frei formatieren und den Rest (z.B. .userfunction, .header etc.) mit display:none vollständig ausblenden könnt. Braucht dann niemand mehr :)

In dieser Vorlage ist der "Allmystery" Link mit Logo mit folgenden Untermenülinks eingebaut:

- Startseite
- Mein Profil (den Eintrag USERNAME durch euren ersetzen)
- Mein Blog (Dito)
- Einstellungen (im Offline Modus kommt ihr direkt auf die Allmy Startseite)
- Profil bearbeiten (Dito)
- Blog bearbeiten (Dito)
- An- und Abmeldebutton

Ein paar Spielereien wie Sonderzeichen, unterschiedlich eingefärbter background, box-shadow oder nth-child(odd) findet ihr ebenfalls, die dienen gut als Vorlage für weitere Bastel- und Styling Ideen.


CSS:
/* Horizontales und mittig zentriertes Custom Dropdown Menue mit Fade- Effekt und Allmy-Links. Viel Spass beim basteln ;) VLG, S_C */ .ctn_menu { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 400; margin: 30px auto 0px auto; padding: 0px 0px 0px 0px; text-align: center; position: relative; background: #000; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); } ul.custom_menu { text-align: left; display: inline; margin: 0px 0px 0px 0px; padding: 15px 4px 17px 0; list-style: none; } ul.custom_menu li { color: #fff; display: inline-block; margin-right: -3px; position: relative; padding: 15px 20px 15px 20px; background: #40404c; cursor: pointer; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5 sease-in-out; -ms-transition: all 0.5 sease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } ul.custom_menu li:hover { background: #404040; color: #fff; } ul.custom_menu li ul { padding: 0; position: absolute; top: 46px; /* abstand der dropdown box zum darueberliegendem button */ left: 0; width: auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; filter: Alpha(Opacity=0); visibility: hidden; -webkit-box-shadow: 4px 4px 4px -1px rgba(0,0,0,0.6); -moz-box-shadow: 4px 4px 4px -1px rgba(0,0,0,0.6); box-shadow: 4px 4px 4px -1px rgba(0,0,0,0.6); -webkit-transiton: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -transition: opacity 0.5s ease-in-out; } ul.custom_menu li ul li { background: #404040; display: block; color: #fff; border-bottom: solid 1px #000; } ul.custom_menu li ul li:nth-child(odd) { background: #40404c; } ul.custom_menu li ul li:first-child { border-top: solid 1px #000; } ul.custom_menu li ul li:hover { background: #404040; } ul.custom_menu li:hover ul { display: block; opacity: 1; filter: Alpha(Opacity=100); visibility: visible; } .custom_menu li a { color: #fff; text-decoration: none; list-style: none; } form.AsLink button { padding: 0px !important; text-transform: uppercase; }

HTML:
<!-- start container dropdow nmenue --> <ul class="custom_menu"><!-- start css3 dropdownmenue --> [li][IMG]/static/images/heartbeat2.gif" style="border:none;height:13px;width:auto;margin:0px;"/> Allmystery [ul] [li][url=https://www.allmystery.de/][/li] [li]<a href="https://www.allmystery.de/mitglieder/USERNAME" target="_self" title="">• Mein Profil[/url][/li]<!-- USERNAME aendern --> [li][url=https://www.allmystery.de/blogs/USERNAME]• Mein Blog[/url][/li]<!-- USERNAME aendern --> [li][url=https://www.allmystery.de/fcgi/?m=settings]• Einstellungen[/url][/li] [li][url=https://www.allmystery.de/fcgi/?m=settings_profile]• Profil bearbeiten[/url][/li] [li][url=https://www.allmystery.de/fcgi/?m=settings_blog]• Blog bearbeiten[/url][/li] [li]<form action="/deleteSession" method="post" class="AsLink"><button type="submit">• An-/Abmelden ➔</button></form>[/li] [/ul] [/li] [li]• 1. Hauptlink[/li]<!-- #1. hauptlink --> [li]• 2. Hauptlink[/li]<!-- #2. hauptlink --> [li]• 3. Hauptlink[/li]<!-- #3. hauptlink --> [li]Ξ 2. Hauptlink mit Untermenü<!-- #2. hauptlink mit untermenue --> [ul] [li]• 1. Untermenü link[/li]<!-- 1. untermenue link --> [li]• 2. Untermenü link[/li]<!-- 2. untermenue link --> [li]• 3. Untermenü link[/li]<!-- 3. untermenue link --> [/li] [/ul] [/ul]<!-- ende css3 dropdown menue --> <!-- ende container dropdown menue -->

Also dann... viel Spaß beim tüfteln!

VLG, S_C

@Bodo

Bodo schrieb:Also schwarze Magie wars wahrlich nicht jetzt

Doch! Da kommt nicht jede/r drauf ;)
-----
Ein Tipp: einfach mal den Quelltext lesen, da stehen 'ne Menge interessante Dinge drin. ;)

@S_C

du solltest das html nochmals umstellen

[li][IMG]/static/images/heartbeat2.gif" style="border:none;height:13px;width:auto;margin:0px;"/> Allmystery [ul] [li]<a href="https://www.allmystery.de/" target="_self" title="[/IMG]• Startseite[/li]

macht so wenig sinn :D

auch der macht mit dem wort "anmelden" wenig sinn da das form NUR zum abmelden da ist

[li]<form action="/deleteSession" method="post" class="AsLink"><button type="submit">• An-/Abmelden ➔</button></form>[/li]

"USERNAME" kann durch die interne funktion $mbesucher ersetzt werden da diese links immer auf das eigene profil/blog verweisen.

target="_self" ist unnötig weil default. ein title-attr. ohne inhalt? nett :D

@unhold
Was das img im Titel betrifft... das war ein Einfügefehler. Ganz klar! Sorry... kann passieren nach einer durchgemachten Nacht mit php & Co. :(

Was den An/Abmeldelink betrifft... mein Profil ist "Sichtbar" geschaltet, denn darüber gehe ich zu Allmy.
Über diesen Link komme ich dann auf die Startseite zum Anmeldeformular. Auch den Logout mache ich über meine Profilseite. Insofern macht dieser Link wieder Sinn.

$mbesucher wäre dann okay, wenn ich als Profilinhaber meinen Besucher eine Möglichkeit bieten will, auf SEIN Profil/ Blog zu gelangen. Das muss jeder selbst entscheiden und kann demnach einfügen bzw. zur Verfügung stellen was er meint.

unhold schrieb:target="_self" ist unnötig weil default. ein title-attr. ohne inhalt

beantworte ich mit

S_C schrieb:Ein paar Spielereien wie Sonderzeichen, unterschiedlich eingefärbter background, box-shadow oder nth-child(odd) findet ihr ebenfalls, die dienen gut als Vorlage für weitere Bastel- und Styling Ideen.

und

S_C schrieb:... viel Spaß beim tüfteln!

Es ging mir darum, den nicht so versierten Bastlern eine gute Plattform für eigene Tüfteleien zu geben.
Jemand, der sich dafür interessiert, kommt z.B. auch auf _blank, _new usw. und wird auch bald herausfinden, was title="" oder alt="" bedeutet und was man damit auszeichnet bzw. beschreibt.
Auch die style- Anweisung im heartbeat2.gif ist nur ein Beispiel, wie man was gestalten kann. Ich hätte auch jeden Link eine eigene Klasse zuweisen und somit mehr Möglichkeiten aufzeigen können. Aber nicht jeder ist so fit in css/html wie du und ein bisschen Lernfreude und Eigeninitiative soll schon noch vorhanden bleiben ;)

Hallo :)
Die Frage wurde hier schon sicher oft gestellt, doch wie kann ich die Schriftfarbe und Schriftart auf meinem Profil ändern?
Wenn euch das Thema bereits zu lästig ist, könnt ihr auch über PN antworten. Danke im voraus :)

@Isabell92
Allmystery-Wiki: Mögliche Gestaltungen

Schau mal hier rein :)

@Ciela
Damit kann ich irgendwie nichts anfangen :/
Wie stelle ich damit die Farbe und Art ein?

@Isabell92
Schau mal auf die erste Seite, da wird es auch erklärt.

@Isabell92
Im ersten Post wird das einfachste Beispiel gezeigt:

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

Der normale Text im body wird mit der ersten Zeile auf gelb gestellt.
a ist für die Hyperlinks - diese werden auf rot gestellt.
a:hover - damit spricht man an, dass beim drüberfahren mit der Maus der Hyperlink grün angezeigt wird.

Cielas Link + Allmystery-Wiki: Klassen-Sammlung zeigen die Klassen an, die man verändern kann.

Um an die gewünschten Farben zu kommen kann man sich zb hier: http://html-color-codes.info/webfarben_hexcodes/ orientieren.

Wenns ned klappt schreib PN :D

Wie spricht man das + oben an? Wo früher mal "weiteres" stand? Irgedwie reagiert das nicht mehr auf a.a_more

#evenMore .tabnav_selected

@S_C
Dankeschön :)