Wechselnde Hintergrundfarbe bei der Feedanzeige

by Alex, Thursday, June 16, 2011, 11:28 (703 days ago)

Ich mal wieder. :-D

Ist es möglich bei der Feedanzeige eine wechselnde Hintergrundfarbe zu erstellen?

Beispiel:

Feeditem 1: weiss
Feeditem 2: hellgrau
Feeditem 3: weiss
Feeditem 4: hellgrau
Feeditem 5: weiss
Feeditem 6: hellgrau
Feeditem 7: weiss
Feeditem 8: hellgrau
...

Ich glaube so lässt es sich ein wenig einfacher in den Schlagzeilen lesen. ( rein subjektiver Eindruck )

Ich danke Dir Tobi.

Gruß
Alex

Post reply
985 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Tobi @, Sunday, June 19, 2011, 10:41 (700 days ago) @ Alex

Mit CSS würde sowas gehen (http://www.ich-lerne-css.de/Style/Examples/007/evenodd.html), aber glaube das unterstützen keine Browser. Evtl. könnte man das mit JavaScript lösen (jQuery ist ja mit an Bord und das stellt diese Selektoren auch zur Verfügung)!

Viele Grüße
Tobi

Post reply
943 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Alex, Monday, June 20, 2011, 08:00 (699 days ago) @ Tobi

Moin Tobi,

vielen Dank für die Hinweise und die Zeit / Geduld die Du hier aufbringst.
Jetzt brummt mein Kopf mächtig...

Für mich ist es ein wenig schwer hier ein Ansatz zu finden.
Ich habe mal ein wenig geschaut und folgendes gefunden:

tablesorter

Ich denke das wird der richtige Ansatz sein.
Könntest Du mir hier evtl. einen Tip geben, wie ich das Ganze einzubinden habe?

Oder bin ich hier auf dem falschen Weg?

Schönen Wochenanfang.

Gruß
Alex

Post reply
974 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Tobi @, Monday, June 20, 2011, 10:58 (699 days ago) @ Alex

Hi Alex,

also der tablesorter ist da viel zu viel. Das geht so:
1. du fügst in der "events.js" in der Funktion "messages" (Zeile 641) folgenden Code ein:

 
$('#messages > li').removeClass('even');
$('#messages > li:even').addClass('even');
 

2. in der style.css kannst du dann die Formatierung setzen. In Zeile 973 folgenden Code einfügen, wobei du das "red" durch deine eigene Farbe ersetzt.

 
#messages > li.even {
background-color:red;
}
 

Wichtig: nachdem du das gemacht hast, die Datei "public/javascript/all.js" und "public/stylesheets/all.css" löschen. Diese beiden werden dann automatisch neu erzeugt, mit deinem aktualisierten Programmcode/CSS Definitionen. Hab das gerade bei mir getestet, das klappt so ganz gut.

Viele Grüße
Tobi

Post reply
933 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Alex, Tuesday, June 21, 2011, 06:05 (698 days ago) @ Tobi

Moin Tobi,

ich habe wie folgt eingebunden:

event.js

    /**
     * initialize the events for the message list
     */
    messages: function() {
 
		$('#messages > li').removeClass('even');
			$('#messages > li.even').addClass('even');
 
        // hide and show item content
        $('#messages h2:not(.opened)').unbind('click').click(function () {
            var content = $(this).parent('li').children(".content");
            content.slideToggle('medium');
            rsslounge.showImages(content);
        });
 
...

style.css

/* ============ Messages ============ */
 
 
#messages {
    border:2px solid #BFBFBF;
    padding:0px;
    margin-bottom:10px;
    border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
 
    #messages > li {
        padding:6px;
        border-bottom:1px solid #ccc;
    }
 
		#messages > li.even {
			background-color:red;
		}
 
        #messages > li.unread {
            background-color:#ffffff;
        }
 
...

Aber irgendwie funktioniert das nicht.
Ich habe Dein Code wohl nicht richtig umgesetzt...
Die all.js und all.css habe ich gelöscht.

Achja... bei der events.js / li:even habe ich den Doppelpunkt in eine Punkt umgeändert...
war wohl ein Schreibfehler oder?

 
$('#messages > li').removeClass('even');
$('#messages > li:even').addClass('even');
 


in

 
$('#messages > li').removeClass('even');
$('#messages > li.even').addClass('even');

Kleiner Tip? :-D

Gruß
Alex

Post reply
890 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Tobi @, Tuesday, June 21, 2011, 09:40 (698 days ago) @ Alex

Hi Alex,

der : stimmt schon und muss auch sein, sonst funktioniert das nicht. :even bedeutet, das alle geraden Elemente ausgewählt werden. Für die wird dann die Klasse .even gesetzt (siehe auch http://api.jquery.com/even-selector/).

Wenn du was an den JavaScript/CSS Dateien änderst, musst du immer die all.js und all.css löschen. Die werden automatisch beim ersten Aufruf erzeugt und enthalten den minimierten Inhalt aller JavaScript und CSS Dateien (für ein schnelleres Laden).

Viele Grüße
Tobi

Post reply
961 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Alex, Tuesday, June 21, 2011, 10:18 (698 days ago) @ Tobi

Richtig eingebunden ist es oder?

Habe jetzt auf von li.even auf li:even geändert.

Funktioniert leider nicht...
Gibt es noch etwas worauf ich achten muss bei der Einbindung?

Gruß
Alex

Post reply
958 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Tobi @, Tuesday, June 21, 2011, 11:29 (698 days ago) @ Alex

Hi Alex,

hab mal geschaut und gesehen, dass du es auf http://alternative.mediaschau.net/ eingebunden hast. Es ist noch ein Fehler in der CSS Definition: 

 
#messages > li.unread {
 background-color: white;
}
 

überschreibt die .even Definition. Probier mal 

 
#messages > li.unread.even,
#messages > li.even {
background-color: red;
}
 

Dann sollte es funktionieren.

Viele Grüße
Tobi

Post reply
951 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by Alex, Tuesday, June 21, 2011, 12:05 (698 days ago) @ Tobi

Perfekt!

Vielen Dank. :-)

Gruß
Alex

Post reply
954 views

Wechselnde Hintergrundfarbe bei der Feedanzeige

by ezconv ⌂, Tuesday, November 29, 2011, 06:30 (537 days ago) @ Alex

cool, like it

--
best tool to rip DVD audio

Post reply
705 views
RSS Feed of thread
powered by my little forum