Anpassungen CSS latest articles

BlueChip · 17. April 2016

Hallo zusammen,
Ich habe auf meiner Seite das Modul letzte Nachrichten aktiv.Leider ist das Layout mit dem Temple et was ich benutze recht bescheiden. Ich möchte daher das Aussehen dieses Moduls anpassen.
Was mir vorschwebt ist zum Beispiel ein unterschiedlicher Hintergrund pro neuen Artikel. Oder halt eine grafische Hinterlegung pro Artikel.Google und Co. hatten leider keine entsprechenden Antworten für mich.
Ich hoffe ihr könnt mir helfen.Vielen Dank.GrußThorsten
P. S. Bei Bedarf kann ich euch auch gerne die URL zukommen lassen damit ihr euch ein Bild machen könnt.

P. P. S. Rechtschreibfehler darf Siri gerne behalten.

astrid · 17. April 2016

Hallo,
ein Link zur Seite ist immer gut

Für die Layoutänderung hilft dir vielleicht dieser Link: Was sind Overrides und wie erstellt man diese

BlueChip · 17. April 2016

test.ssv-luetzenkirchen.de

Unter dem linken Menue geht es mit um die letzten neuen Artikel. Die sollten sich halt ein wenig von einander abheben, da es so ein wenig doof ausschaut.
Ob nun 2 Hintergrundfarben abwechselnd je Artikel oder so ne Art "button" drum - wie bei dem Menü drüber" ist mir eigentlich egal.

Nur leider sind meine Kenntnisse begrenzt.

Danke schon ein mal Astrid

DirtyWorld · 17. April 2016

Hi,
schonmal die CSS-Pseudoklasse :nth-child ausprobiert?
Hier kann man mittels even/odd zwischen den Zeilen unterscheiden.

https://www.w3.org/Style/Examples/007/evenodd.en.html

Grüße

BlueChip · 17. April 2016

Hallo,

hab ich noch nicht, da ich eigentlich berufswegen admin bin, hab ich von programmierung keinen blassen schimmer.
Daher danke ich euch für jedwigen input.

Thx.

Indigo66 · 18. April 2016

Zitat von BlueChip

da ich eigentlich berufswegen admin bin, hab ich von programmierung keinen blassen schimmer

Na, dann hast Du jetzt einen Grund gefunden damit anzufangen.

Wenn es z.B. wie die Buttons vom Menü aussehen soll, könntest Du es so machen:

Code

.dd-blockcontent .latestnewsneustebeitraege > li {
    background: #f5f5f5 none repeat scroll 0 0;
    border-color: -moz-use-text-color #e3dad1 #e3dad1;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    margin: 0 11px;
    padding: 7px;
}

BlueChip · 18. April 2016

Super!!!! Vielen lieben Dank. Genauso wie ich es haben wollte.

Nur noch eine Kleinigkeit:
Ich habe das über ein separates Modul "Custom CSS" gemacht. Das würde ich jedoch gerne wieder los werden.

Wo muss ich den Code dann unter bringen? Template.css und custom.css funktionieren nicht...

Nochmal herzlichen Dank vom Änfänger...

Indigo66 · 18. April 2016

Zitat von BlueChip

Wo muss ich den Code dann unter bringen? Template.css und custom.css funktionieren nicht...

Doch das geht, Du musst dem Modul nur den selben Modulklassensuffix geben wie dem vorherigen, "neustebeitraege".
Oder Deine CSS ändern von .latestnewsneustebeitraege in .latestnews.

BlueChip · 18. April 2016

Zitat von Indigo66

Doch das geht, Du musst dem Modul nur den selben Modulklassensuffix geben wie dem vorherigen, "neustebeitraege".
Oder Deine CSS ändern von .latestnewsneustebeitraege in .latestnews.

So, ich habe jetzt Modulklassensuffix gelöscht. Somit heisst das Ding jetzt nur noch .latestnews.

In meiner Custom.css steht nun:

/* Begin Additional CSS Styles */
.dd-blockcontent .latestnews > li {
background: #f5f5f5 none repeat scroll 0 0;
border-color: -moz-use-text-color #e3dad1 #e3dad1;
border-style: none solid solid;
border-width: 0 1px 1px;
margin: 0 11px;
padding: 7px;
}
/* End Additional CSS Styles */

Tut sich aber leider nix...

Indigo66 · 18. April 2016

Zitat von BlueChip

Tut sich aber leider nix...

Ist mir klar, Du hast es auch aus Deiner CSS gelöscht. Ich sehe nur:

Zitat

/* Begin Additional CSS Styles */

/* End Additional CSS Styles */

BlueChip · 18. April 2016

Hmmm, war aber gerade noch drin. Hab extra nochmal geschaut....

Egal, habs jetzt auch nochmal in die template.css gepackt. Und siehe da, es ist wieder da..

Nochmals vielen lieben Dank.

BlueChip · 18. April 2016

Und nun als letztes:

Habe versucht im Entwicklermodus vom Firefox herauszu bekommen wie ich das selbe "mouse-over" wie im menp hinbekomme.
Aber leider nicht gefunden. Wie macht ihr soetwas?

Indigo66 · 18. April 2016

Zitat von BlueChip

Habe versucht im Entwicklermodus vom Firefox herauszu bekommen wie ich das selbe "mouse-over" wie im menp hinbekomme

Code

.latestnews > li:hover {
    background: #dbdbdb;}

christine2 · 18. April 2016

Hallo,

seh schon die nächste Frage

Du hast beim Code vom Tom: color: #000000; reingegeben (das greift nicht). Nimm das raus und schieb das nach:

Code

.latestnews a:hover {
color: #000;}

Liebe Grüße, Christine

BlueChip · 18. April 2016

Ihr kriegt aber auch alles mit - selbst wenn ein blöder Admin versucht zu programmieren....

*Chapeaux*
Hier könnte ich mich wohl fühlen.

Auch wenn ich noch soooooooooooooooo viel zu lernen habe....

Gruß
Torsten