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
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:22
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.


melden
Anzeige

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:23
@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?


melden

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:24
@Dr.BT
Es geht um Grundlagen. Das von mirror war doch richtig.


melden

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:24
@Dr.BT
Ist das nicht ein BISSCHEN zu kompliziert, dafür, dass es auch so geht, wie ich es beschrieben habe? :D


melden

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:28
@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


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:29
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?


melden

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:30
@Dr.BT
in den Augen eines Profis ist das natürlich nicht kompliziert ;)


melden

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:31
@Dr.BT
Ich den Augen eines Anfängers ist das einfach nur verwirrend :D


melden

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:32
@mirror6

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


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:32
CSS ist auch für Anfänger nicht kompliziert. Auf den ersten Blick vll.


melden

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:35
@Dr.BT
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


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:41
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>


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

06.08.2012 um 23:44
@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.


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

07.08.2012 um 01:07
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:
bild2
bild1


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;
}
}


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

07.08.2012 um 15:57
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 ..


melden

Do it yourself: CSS für Profil und Blog

07.08.2012 um 16:12
@tic

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


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

07.08.2012 um 16:18
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?


melden

Do it yourself: CSS für Profil und Blog

07.08.2012 um 16:21
@tic

probier es aus ^^


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

07.08.2012 um 16:23
ja wäre wohl das sinnvollste @Prof.nixblick ^^


melden
Anzeige

Do it yourself: CSS für Profil und Blog

07.08.2012 um 16:30
@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.


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

Themenverwandt
Anzeigen ausblenden