Do it yourself: CSS für Profil und Blog

Hi mirror,

mit den links ist das nicht ganz korrekt. Müsste so aussehen:

a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

Angeblich ist die Reihenfolge wichtig.

@Initan
Jap :D
Aber das mit den Klassen verstehst du?
Dass jedes Element anders angesprochen wird und danach in {} Klammern kommt, wie es aussehen soll?

@----
Es geht um Grundlagen. Das von mirror war doch richtig.

@----
Ist das nicht ein BISSCHEN zu kompliziert, dafür, dass es auch so geht, wie ich es beschrieben habe? :D

@Initan
@Kona-chan

div.infoleiste, div.tabnav.clearfix {
display: none;
}

Wohin damit weißt Du jetzt?

Hier ist die Klassensammlung: Allmystery-Wiki: Klassen-Sammlung (wenn Du bspw. auf .head klickst siehst Du ein bild was Du damit ansprichst)

und hier die Möglichkeiten Allmystery-Wiki: Mögliche Gestaltungen

Links gibts halt in verschiedenen Formen. Wenn du auf nen Link klickst gilt er als visited und nimmt die entsprechende Farbe an.

Kompliziert ist da doch nix?

@----
in den Augen eines Profis ist das natürlich nicht kompliziert ;)

@----
Ich den Augen eines Anfängers ist das einfach nur verwirrend :D

@mirror6

ja falsch ge@tet :D ich bin leicht durch den wind... -.-

CSS ist auch für Anfänger nicht kompliziert. Auf den ersten Blick vll.

@----
Doch, denn ein einziges Zeichen kann bewirken, dass das Ganze nict funktioniert. Und diese "Ratte" zu finden ist für einen Anfänger fast unmöglich :D

Du hast html Elemente. Dies können z.B. sein:
<span>
etc.

Denen kann man eine unique ID geben die nur für das eine Element vergeben werden kann oder man ordnet sie einer Klasse zu welche man für mehrere Elemente nutzen kann.

ID werden wie folgt vergeben:


Um das Element einer Klasse zuzuordnen nimmt man "class":


Ein Element kann auch beides besitzen:



Anpsrechen kannst du über die ID oder die Klasse. Der Unterschied ist das "Präfix" innerhalb des Styletags. Styletag ist das hier: <style></style>


Wird das Element über die ID angesprochen ist das präfix das hier "#". Wird die Klasse genutzt ist es ein einfacher Punkt.


Element über die Klasse ansprechen:

.klassenbezeichnung {}

Über die ID ansprechen:

#ID {}

Zwischen die geschweiften Klammern kommen die Styleangaben welche mit einem semicolon getrennt werden.
<style> .klassenbezeichnung { background:#000000; border;1px solid #ffffff; } #ID { background:#000000; border;1px solid #ffffff; } </style>

@mirror6

mirror6 schrieb:Doch, denn ein einziges Zeichen kann bewirken, dass das Ganze nict funktioniert. Und diese "Ratte" zu finden ist für einen Anfänger fast unmöglich :D

Ist zwar nicht CSS bezogen aber die Kernaussage passt auch hier:

Irgendwer sagte mal das man die Bezeichnung "Programmieren" eigentlich Debugging nennen müsste.

Das ist kein Anfängerproblem sondern ist eben so. Hier ein Zeichen vergessen da ein Tippfehler hier ne Klammer nicht gesetzt etc. Ist halt so so. Da müssen wir eben durch.


Wer mit Firebug arbeitet kann per Copy&paste die ganzen Blocks übernehmen. Da schleichen sich dann auch nicht so schnell Fehler ein.

Hier ein CSS Style für das Stylish Addon mit Firefox:

Ausgangsbasis war das hier: http://userstyles.org/styles/58380/allmystery-mr-mystery-style-firefox


Pictures:
Original anzeigen (0,4 MB)
Original anzeigen (0,5 MB)


Einfach das hier rein kopieren:

@-moz-document domain(allmystery.de) { body{ background-image:url("http://www.abload.de/img/back2zd84.jpg"); background-color: #000000; background-attachment:fixed; } .mcell_inhalt, .mcell_inhalt2, .mcell_inhalt3 { -webkit-border-bottom-left-radius: 10px !important; -webkit-border-bottom-right-radius: 10px !important; -moz-border-radius: 0 0 10px 10px !important; background: rgba(00,00,00,0.5)!important; -webkit-box-shadow: 2px 2px 15px #000; -moz-box-shadow: 2px 2px 15px #000; } .mcell, .mcell_status, .mcell2, .mcell3 { -webkit-border-top-left-radius: 10px !important; -webkit-border-top-right-radius: 10px !important; -moz-border-radius: 10px 10px 0 0 !important; opacity: 0.8; } #threads { border: 1px solid #00ccff; border-radius: 20px; padding: 10px; } .postbox1 { background-color: #000000 !important; border-bottom: 1px dotted #00CCFF; border-top: 1px dotted #00CCFF !important; } .postbox2, .fd, .fh { background-color: #000000; } .fm td, .fh td, .fd td { background: none repeat scroll 0 0 #000000 !important; padding-left: 4px; } .sufu { background-color: #FFFFFF; border: 1px solid black; color: black; font-size: 11px; height: 19px; padding-left: 4px; padding-top: 5px; width: 126px; border-radius: 10px; } #se { background: none repeat scroll 0 0 #000000; border-left: 1px solid black; border-radius: 0 0 10px 10px; border-right: 1px solid black; display: none; margin-top: -9px; opacity: 0.7; text-align: left; width: 435px; } #se_content { background: none repeat scroll 0 0 #000000; border: 1px solid #000000; border-radius: 0 0 10px 10px; margin-top: 50px; padding-bottom: 20px; } .quick_item_selected { background: none repeat scroll 0 0 #000000; } .quick_item_header { background: none repeat scroll 0 0 #000000; border-bottom: 1px solid black; border-top: 1px solid black; font-size: 11px; margin-bottom: 5px; margin-top: 8px; padding: 7px; } .quick_tags { background: none repeat scroll 0 0 #000000; padding-left: 6px; padding-right: 6px; text-align: center; width: 423px; } #se_content {background:#000000;background-image:none;} .quick_item_header quick_item_selected {background:#000000;background-image:none;} .header { background-color: transparent !important; background-image: none !important; clear: left; font-size: 12px; height: 65px; position: relative; width: 900px; } .tabnav { border: 1px solid #000000; position: relative; white-space: nowrap; width: 888px; background: none; z-index: 30000; } .tabnav a { background-color: #000000 !important; border-bottom: 1px dotted #00ccff; border-top: 1px dotted #00ccff; color: #ffffff; display: block; float: left; font-size: 11px; margin-right: 0; outline-style: none; padding: 5px 0; text-align: center; text-decoration: none; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .tabnav a:hover { box-shadow: 1px 1px 30px #9900cc, 0px 0px 20px #00ccff, 0px 0px 10px #00ff00; -moz-box-shadow: 1px 1px 30px #9900cc, 0px 0px 20px #00ccff, 0px 0px 10px #00ff00; -webkit-box-shadow: 1px 1px 30px #9900cc, 0px 0px 20px #00ccff, 0px 0px 10px #00ff00; -o-box-shadow: 1px 1px 30px #9900cc, 0px 0px 20px #00ccff, 0px 0px 10px #00ff00; -ms-box-shadow: 1px 1px 30px #9900cc, 0px 0px 20px #00ccff, 0px 0px 10px #00ff00; transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s; -ms-transition: 1s; border-bottom: 1px solid #00CCFF; color: #000000; } .main { clear: both; height: 100%; margin-top: 70px; padding-left: 9px; padding-right: 10px; padding-top: 16px; width: 730px; } .infoleiste { left: auto; position: absolute; top: 200px !important; width: 150px; z-index: 999; right:100px; } .userfunction a, .remove_on_search center a, .remove_on_search, .footer a, center a, .artikelmain_wrap a, #blogs-functions a, small a, span a, #se_content a, a.at { color: #58B1EA !important; } #chat_list a, #fl a u, #fl ua { color: #fff !important; } table, tbody, #overview_content { border-radius: 10px !important; } td a, a, .fh a { -webkit-transition-property: color; -webkit-transition-duration: 1s; -moz-transition-property: color, text-shadow; -moz-transition-duration: 0.5s; } a:hover { -webkit-transition-property: color; -webkit-transition-duration: 1s; -moz-transition-property: color, text-shadow; -moz-transition-duration: 0.5s; } #moreMenu { background-color: rgba(00,00,00,0.85) !important; box-shadow: 2px 2px 10px #000 !important; -webkit-border-bottom-left-radius: 5px !important; -webkit-border-bottom-right-radius: 5px !important; -moz-border-radius: 0 0 5px 5px !important; } #moreMenu a { background: transparent !important; } .paginator { opacity: 0.8; -webkit-border-top-left-radius: 5px !important; -webkit-border-top-right-radius: 5px !important; -moz-border-radius: 5px 5px 0 0 !important; } table { opacity: 0.95; } .userfunction a:hover, .remove_on_search center a:hover, .remove_on_search:hover, .footer a:hover, center a:hover, .artikelmain_wrap a:hover, #blogs-functions a:hover, small a:hover, span a:hover, #se_content a:hover, a.at:hover { color: #ACDEF9 !important; text-shadow: 0 0 10px #fff !important; } #chat_messages { background: rgba(00,00,00,0.7); } td { border: 1px solid #404040; padding: 5px; } #se_content, #se { z-index: 9999 !important; opacity: 1.0 !important; } .post { opacity: 0.8; } }

Hy,
ich bräuchte nen Code wo man das "Zuletzt hier" umbenennen kann, das geht ja auch mit zb "Neuen Eintrag verfassen" im GB ... danke im Vorraus, wenn denn was kommt ..

@tic

Geht nicht ohne dass es auch vor der Überschrift "Gästebuch" steht. Sind beides h2-Überschriften

bei meim gb hab ich ja den Code ...

h2 {
display: none;
}
#show_gb_post_wrap {
color:transparent;
}
#show_gb_post_wrap:before {
content:" hier ";
color: #363434;
text-shadow: 1px 1px 30px #C20404;

hm, ich frag ja für Plop ... @Prof.nixblick

also würd dann bei beidem das gleiche stehen?

und wenn man das _gb_post_ durch user_view ersetzt?

@tic

probier es aus ^^

ja wäre wohl das sinnvollste @Prof.nixblick ^^

@tic

Das Problem ist, dass "Gästebuch" und "zuletzt hier" beide über div.main.clearfix h2 abzusprechen sind.

Was Du dem einem zukommen lässt bekommt das Andere auch.