Zitate farblich abheben

  • Seite 1 von 2
28.03.2008 03:08
#1 Zitate farblich abheben
avatar
User

Hallo alle,

gibt es eine Möglichkeit (und wenn ja, wie und wo muß ich was eintragen?), die Zitate in einer anderen Farbe als der normalen Textfarbe erscheinen zu lassen und ihren Text bold zu setzen?

Kann ich die Linie, die sie abgrenzt ebenfalls irgendwie farblich anpassen, wenn ja, wie?

Kann ich das "Zitat von ..." ebenso farblich ändern, wenn ja, wie?

Schon mal danke im voraus für Eure Hilfe,

Grüße
Lohengrin


 Antworten

 Beitrag melden
28.03.2008 03:27
avatar  Vitalis
#2 RE: Zitate farblich abheben
avatar
Profi

Dazu müssen Sie in die CSS-Datei eingreifen, um dort bestimmte Werte zu setzten:
Admin -> Layout -> CSS -> Blockquote

Dabei gibt es viele verschiedene Möglichkeiten die Gestaltung zu ändern ;-)


 Antworten

 Beitrag melden
28.03.2008 17:45
#3 RE: Zitate farblich abheben
avatar
User

Hallo, danke, aber das funktioniert irgendwie nicht. Was mache ich falsch?

Der Eintrag lautet:
}
BLOCKQUOTE {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
background-color: FFFFFF;
color: #993300;
font-weight: bold;
border-width:1px
}

Erzielen möchte ich den Effekt, daß der Text dunkelbraun und bold erscheint und einen Rahmen hat.

Bitte nochmal um Nachhilfe.


 Antworten

 Beitrag melden
28.03.2008 17:59
avatar  Vitalis
#4 RE: Zitate farblich abheben
avatar
Profi
Zitat von Lohengrin
Hallo, danke, aber das funktioniert irgendwie nicht. Was mache ich falsch?
Der Eintrag lautet:
}
BLOCKQUOTE {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
background-color: FFFFFF;
color: #993300;
font-weight: bold;
border-width:1px
}
Erzielen möchte ich den Effekt, daß der Text dunkelbraun und bold erscheint und einen Rahmen hat.
Bitte nochmal um Nachhilfe.


Live im Firebug getestet: (siehe Screenshot)
blockquote {
background:#FFFFFF;
color:#993300;
font-family:Arial;
font-size:12px;
font-weight:bold;
margin:10px 10px 10px 20px;
}

 Antworten

 Beitrag melden
28.03.2008 18:17
#5 RE: Zitate farblich abheben
avatar
User

Ja, danke schön. Ich hatte den Fehler gemacht, das Fenster nicht einmal komplett zu schließen, sondern war für den Test direkt über "zum Forum" zurückgegangen. War wohl noch nicht eingelesen. ;-)

Jetzt noch die Frage: Wie kriege ich die Linie auch noch braun und wie wird aus der Linie a. ein Kasten b. besser noch ein gepunkteter Kasten?

Gibt es eine Möglichkeit das "Zitat von" weiter nicht bold zu haben, den Rest jedoch schon?

Wäre dankbar für weitere Unterstützung (die übrigens in aller Regel hier wirklich sehr gut ist, um das auch einmal zu sagen).


 Antworten

 Beitrag melden
28.03.2008 19:57
avatar  Vitalis
#6 RE: Zitate farblich abheben
avatar
Profi

blockquote {
background:#FFFFFF;
color:#993300;
font-family:Arial;
font-size:12px;
font-weight:bold;
margin:10px 10px 10px 20px;
}

blockquote font {
color:#993300;
font-family:Arial;
font-size:11px;
font-weight:normal;
}

blockquote hr {
color:#993300;
height:1px;
margin:2px 0px 5px 0px;
}


Die Zwei Linien, sind jeweils zwei hr-tags (Horizontale Linien), leider haben diese Tag die Angewohnheit nicht auf alle Spezifikationen via CSS anzusprechen, weshalb da nicht sonderlich viel möglich ist.

Und wo genau wollen Sie Ihren Rahmen haben?, um die ganze Box oder eher anstelle der zwei Linien? (Ausschließlich um den Zitierten Text, nicht zusätzlich um den Namen herum)


 Antworten

 Beitrag melden
28.03.2008 23:49
#7 RE: Zitate farblich abheben
avatar
User

Hallo,

erst einmal danke, das war schon super hilfreich.

Den Rahmen würde ich gerne statt der Linien haben und zwar, wenn dann eher gepunktet, wenn das geht.

Da ich über eine andere Background-Farbe um das ganze Gebilde ja einen Rahmen habe. :-)

Dazu noch zusätzliche Fragen:
1. Gibt es eine Möglichkeit das "Zitat von ..." in diesem farblich hinterlegten Feld eine Zeile nach unten zu rücken (so klebt das so fürchterlich am oberen Rand)?
2. Gibt es eine Möglichkeit, den Text des Zitats einzurücken? Er klebt jetzt links am Rand des hinterlegten Feldes, das sieht nicht sehr schön aus.
3. Gibt es eine Möglichkeit, die Zitatsebenen zu trennen, also beispielsweise eine gepunktete Linie für das erste Zitat, eine durchgezogene für das Zitat im Zitat? Oder eben, analog, eine gepunkteten Kasten um das erste Zitat, einen durchgezogenen um das Zitat im Zitat?

Sorry, aber es macht wahnsinnig Spaß, dieses Forum zu gestalten, und ich lerne halt noch neu. Dafür aber viel und gerne. :-)


 Antworten

 Beitrag melden
29.03.2008 00:15
avatar  Vitalis
#8 RE: Zitate farblich abheben
avatar
Profi



...jeps all dass ist möglich, und auch gar nicht mal so schwer.
Das meiste ist wie schon angegeben mit CSS möglich. Wegen dem Extra dotted Border (Gepunkteter Rand) müssen wir jedoch eine kleine Änderung in der Symbolbar vollziehen. Je mehr gewollt ist, desto kompliziert wird es am Schluss sich noch zurechtzufinden ;-)

Erstmal die CSS:

blockquote
{
background:#ffffff;
margin: 10px 10px 10px 20px;
padding:0px;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#993300;
}

blockquote div.zitat
{
margin: 10px;
padding:10px;
border: 1px dotted #000000;
}

blockquote div.zitat blockquote
{
background:#ffffff;
margin: 10px 10px 10px 20px;
padding:0px;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#993300;
}

blockquote div.zitat blockquote div.zitat
{
margin: 10px;
padding:10px;
border: 1px solid #000000;
}


blockquote font
{
margin: 10px 10px 10px 20px;
padding:0px;
font-family:Arial;
font-size:11px;
font-weight:normal;
color:#993300;
}

blockquote hr
{
display:none;
visibility:hidden;
}
Zur Erklärung:
margin 			= Außenabstand
padding = Innenabstand
border = Rahmen
"dotted" = Gepunkteter Rahmen
"solid" = Solider (Durchgehender) Rahmen
display:none = Nicht anzeigen
visibility:hidden = Verbergen
(Doppelt gemoppelt hält besser ;-)

Zweiter Teil kommt noch...


 Antworten

 Beitrag melden
29.03.2008 15:47
avatar  Vitalis
#9 RE: Zitate farblich abheben
avatar
Profi
Zweiter Teil:
Admin -> Einstellungen -> Symbol-Bar -> (entsprechend ersetzen)
<a href="javascript:insert('[quote][z]','[/z][/quote]')"><img src="https://img.homepagemodules.de/quote.gif" alt="[quote][z] Text [/z][/quote]" border="0" width="61" height="18"></a>

Admin -> Einstellungen -> Codes/Smilies
[z] ersetze mit <div class="zitat">
[/z] ersetze mit </div>


Soweit würde es nun funktionieren, jedoch wenn ein Mitglied nun vom Beitrag direkt zitiert wird noch die alte Schreibweise übernommen, und nicht diese hier, weshalb wir nun ins Template eingreifen müssen.

Admin -> Template -> Kopie anlegen -> Formular ausfüllen -> Speichern -> [edit] -> ganz unten " + Alle Elemente anzeigen" -> Neuen Beitrag schreiben -> Zeile 22 von unten -> vollkommen ersetzen!
<tr><td class="ntit">&nbsp;{[new_reply_title]}</td><td class="ntit" align="right"><a href='javascript:returnTag("[quote=\"{{reply_username_quote}}\"][z]" + reply_quote + "[/z][/quote]")'>{[new_reply_quote]}</a></td></tr>


Sollte nun funktionieren.

 Antworten

 Beitrag melden
29.03.2008 18:55
avatar  doku
#10 RE: Zitate farblich abheben
do
User

So kann man beispielsweise auch "Nested Quotes" in CSS konfigurieren:

blockquote blockquote {
/* Nested quotes */
background-color:#EEEEEE;
font-size:12px;
padding-left:5px;
}

blockquote blockquote blockquote {
/* Nested quotes */
font-size:11px;
background-color: #D1D1D1;
}

blockquote blockquote blockquote blockquote {
/* Nested quotes */
font-size:10px;
background-color: #CCCCCC;
}

blockquote blockquote blockquote blockquote blockquote {
/* Nested quotes */
font-size:9px;
background-color: #EEEEEE;
}


 Antworten

 Beitrag melden
31.03.2008 01:05
#11 RE: Zitate farblich abheben
avatar
User

Hallo Ihr beiden,

das macht ja richtig Spaß hier. :-)

Vitalis: Irgendwas hat da nicht funktioniert, es waren schlicht alle Linien weg. Aber: Das war/ist nicht weiter schlimm, da ich dann die Sache mit den "nested" quotes ausprobiert habe. Das gefällt mir schon sehr gut, und ich habe damit auch den Weg gefunden, für das eine Zitat eine durchgezogene Linie zu machen und für das Zitat im Zitat eine gepunktete (sogar je andersfarbig und andersfarbiger Text ging). Diesen Teil des Prinzips habe ich anscheinend begriffen. :-)

Jetzt aber noch drei Fragen:
1. Ich habe verstanden, daß Padding der Befehl ist, den ich brauche, um Text von einem Rand abzurücken. Im Zitatekasten sieht es somit jetzt so aus, wie ich es gern hätte. Im eigentlichen Beitrag aber nicht. Sprich: Da klebt der Text oben und links direkt am Rand, wie hier ja auch(sorry, der Layouter in mir erträgt das schwer ;-)).
Ich hatte nun bereits versucht über margin und/oder padding eine Änderung zu erreichen, was ich für den Editor (Beitrag schreiben) auch gefunden hatte, aber leider nicht für das Ergebnis nach dem Abspeichern. Wo in der css müßte ich das nun wieder machen?
2. Kann ich bei den Zitaten die Reihenfolge ändern? Soll heißen, derzeit sieht das aus wie im angehängten Screenshot. Was ich gern hätte wäre aber (analog zum Screenshot): Zitat 1 ohne "in Antwort auf", dann "Zitat von Schle Miel" und das entsprechende Zitat. Ist so etwas möglich?
3. Die Mozilla-Nutzer unter meinen Usern sehen Änderungen (in diesem Fall die gepunkteten Linien) nicht. Habt Ihr dafür eine Erklärung bzw. eine Idee, wie sie sie sehen können könnten?


 Antworten

 Beitrag melden
31.03.2008 03:13
avatar  Vitalis
#12 RE: Zitate farblich abheben
avatar
Profi

Zitat von Lohengrin
es waren schlicht alle Linien weg
Liegt an diesem hier:
blockquote hr
{
display:none;
visibility:hidden;
}
(Habe nur angenommen, dass Sie diese Horizontalen Linien nicht zusätzlich benötigen, weshalb ich diese mithilfe des og. CSS-Code ausgeblendet hätte.)

Zitat von Lohengrin
1. Ich habe verstanden, daß Padding der Befehl ist, den ich brauche, um Text von einem Rand abzurücken. Im Zitatekasten sieht es somit jetzt so aus, wie ich es gern hätte. Im eigentlichen Beitrag aber nicht. Sprich: Da klebt der Text oben und links direkt am Rand, wie hier ja auch(sorry, der Layouter in mir erträgt das schwer ;-)).
Ist gar nicht so schwer:
.tms2
{
margin:0px;
padding:8px 10px 8px 7px;
}
padding:		= Oben rechts unten links


 Antworten

 Beitrag melden
01.04.2008 02:27
#13 RE: Zitate farblich abheben
avatar
User
Aaaaah, danke, ja, jetzt gefällt mir das besser.

Haben Sie auf Fragen 2 und 3 auch noch Antworten? :-)

 Antworten

 Beitrag melden
01.04.2008 09:33
avatar  Vitalis
#14 RE: Zitate farblich abheben
avatar
Profi

Zitat von Lohengrin
2. Kann ich bei den Zitaten die Reihenfolge ändern? Soll heißen, derzeit sieht das aus wie im angehängten Screenshot. Was ich gern hätte wäre aber (analog zum Screenshot): Zitat 1 ohne "in Antwort auf", dann "Zitat von Schle Miel" und das entsprechende Zitat. Ist so etwas möglich?
Wäre Super wenn Sie ein Screenshot bzgl. dieser Frage hätten. Dann ist es möglicherweise lösbar ;-)

Zitat von Lohengrin
3. Die Mozilla-Nutzer unter meinen Usern sehen Änderungen (in diesem Fall die gepunkteten Linien) nicht. Habt Ihr dafür eine Erklärung bzw. eine Idee, wie sie sie sehen können könnten?
Könnten Sie die Adresse der Seite nennen, bei dem ein Beispiel steht. Und ist Mozilla Browser oder eher FireFox gemeint ;-)


 Antworten

 Beitrag melden
02.04.2008 01:46
#15 RE: Zitate farblich abheben
avatar
User

1. Jetzt isser aber angehängt bzw. sogar ein paar mehr.

Bild 1 und 2 dokumentieren, wie die Verschachtelungen jetzt aussehen. Was ich besser fände wäre Zitat von 1, Text Zitat 1, Zitat von 2, Text Zitat 2 - untereinander und in verschieden farbigen Kästen.

Zur Problematik Mozilla (Firefox) vs. IE gibt es noch mehr als nur, daß die Mozilla-User die gepunkteten Linien nicht sehen.

In Bild 1 abgebildet wie ein IE User einen Thread sieht. Er sieht die definierten Farben für Admin-User etc. nicht (alles schwarz), während man in Bild 2 sieht, wie es eigentlich sein sollte, admin weiß, User orange.

Zudem sind die nicht gepunkteten Linien deutlich dicker (ich weiß nicht, ob man das auf dem Screenshot sieht, die Seite, die ich abgebildet habe ist: http://www.aggressionshund-forum.de/t580...-erkennbar.html, zum selber Angucken. :-)

Bild 3 und 4 dokumentieren eine weitere Problematik: Ich habe im Template über text-decoration: none definiert, daß man die Unterstreichungen der Links nicht sehen soll. Im IE (Bild 3) sind sie tatsächlich nicht da. Im Mozilla (Bild 4) jedoch trotzdem.

Ich hatte zudem vor einiger Zeit mal erfragt, wie man per css hinbekommen könnte, daß Links (hover) highlighted werden, visited-Seiten statt bold nur noch in normaler Schriftstärke angezeigt werden. Im IE (Bild 3) sieht man von diesem Effekten nichts, ich dachte die ganze Zeit "tja, dann haste wohl was falsch gemacht". Bis ich vorgestern die Chance hatte, mit Mozilla auf mein Forum zu gucken. Und siehe da: Die Effekte funktionieren ganz prächtig. Leider NUR in Mozilla/Firefox. Ich habe den jetzt zu Testzwecken bei mir auch mal installiert: Tatsache, dieser Teil sieht so aus, wie ich es gewollt hatte.

Stand der Dinge ist nun: Teilweise ist es im IE so, wie ich es will, aber im Mozilla nicht, teilweise genau umgekehrt.

Kriegt man es auch hin, daß es wenigstens in einem alles so ist, wie man es will? ;-)

Jetzt bin ich echt gespannt. :-)

Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!