weitere Rubriken
PhilosophieTräumeOrteEsoterikLiteraturHelpdeskAstronomieGruppenSpieleGamingFilmeMusikClashVerbesserungenAllmysteryWillkommenEnglishGelöscht
Diskussions-Übersichten
BesuchtTeilgenommenAlleNeueGeschlossenLesenswertSchlüsselwörter
Schiebe oft benutzte Tabs in die Navigationsleiste (zurücksetzen).

Do it yourself: CSS für Profil und Blog

6.253 Beiträge, Schlüsselwörter: Allmystery, Hilfe, Welt, Bilder, Frieden, Profil, Farbe, Design, Html, Schrift, DIE + 18 weitere
Deathwing_
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

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


melden
Anzeige

Do it yourself: CSS für Profil und Blog

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


melden
Deathwing_
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

04.04.2015 um 20:17
ja :P


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


melden

Do it yourself: CSS für Profil und Blog

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


melden

Do it yourself: CSS für Profil und Blog

23.04.2015 um 21:22
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 ♥


melden
Bodo
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

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

geht das?


melden

Do it yourself: CSS für Profil und Blog

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


melden
Bodo
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

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


melden

Do it yourself: CSS für Profil und Blog

26.04.2015 um 07:11
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


melden

Do it yourself: CSS für Profil und Blog

26.04.2015 um 07:16
@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. ;)


melden

Do it yourself: CSS für Profil und Blog

27.04.2015 um 14:48
@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


melden

Do it yourself: CSS für Profil und Blog

28.04.2015 um 02:56
@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 ;)


melden
Isabell92
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

16.05.2015 um 19:17
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 :)


melden

Do it yourself: CSS für Profil und Blog

16.05.2015 um 20:13
@Isabell92
Allmystery-Wiki: Mögliche Gestaltungen

Schau mal hier rein :)


melden
Isabell92
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

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


melden

Do it yourself: CSS für Profil und Blog

16.05.2015 um 21:49
@Isabell92
Schau mal auf die erste Seite, da wird es auch erklärt.


melden
Bodo
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

18.05.2015 um 07:10
@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


melden

Do it yourself: CSS für Profil und Blog

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


melden

Do it yourself: CSS für Profil und Blog

25.05.2015 um 13:06
#evenMore .tabnav_selected


melden
Anzeige

Do it yourself: CSS für Profil und Blog

25.05.2015 um 17:58
@S_C
Dankeschön :)


melden
88 Mitglieder anwesend
Konto erstellen
Allmystery Newsletter
Alle zwei Wochen
die beliebtesten
Diskussionen per E-Mail.

Themenverwandt
Musik im Profil291 Beiträge
Anzeigen ausblenden