[GastForen Web allgemein HTML und CSS / Stylesheets per css eine zusätzliche Klasse zuweisen

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

per css eine zusätzliche Klasse zuweisen

Graciosa
Beiträge gesamt: 156

11. Jan 2015, 10:17
Beitrag # 1 von 5
Bewertung:
(5257 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
... klingt erst einmal sinnlos - es geht aber darum, in Contao allen Artikeln, die auf einer bestimmten Seite erscheinen, automatisch eine Klasse zuzuweisen, so dass man die Klasse nicht bei jedem Artikel eintragen muss.

Geht das per CSS oder brauche ich dafür JavaScript? Oder gibt es noch andere Möglichkeiten?
X

per css eine zusätzliche Klasse zuweisen

FSt
  
Beiträge gesamt: 1965

11. Jan 2015, 12:56
Beitrag # 2 von 5
Beitrag ID: #535784
Bewertung:
(5223 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Bettina

Ohne die Seite zu kennen kann diese Frage nicht präzise beantwortet werden. Aber im Allgemeinen kann ich versuchen mein Vorgehen zu beschreiben, das ich bei so was wählen würde.

Du musst zuerst den Quellcode der Seite, bzw. mehrerer Seiten anschauen, auf denen Du gerne diese Artikel mit einem eigenen Style auszeichnen willst. Es geht darum im Code einen eineindeutigen "Weg" zu diesen Artikeln zu finden. Mit Weg meine ich, die Verschachtelung, die Cascade, von <hmtl> bis zum (vermuteten) <li>. Wenn Du nun irgendwo ein tag findest, dass zum beispiel alle diese <li>--Artikeltags enthält und sich zum Beispiel <div id="articels"> nennt, dann hättest Du einen guten Anwärter für Deine Formatierung gefunden. Du könntest dann zum Beispiel Deine spezielle Formartierung so auszeichnen

#articels li {color: red;}

Nun musst Du aber noch kontrollieren, ob diese Kombination auf keiner anderen Seite auftritt. Bei CMS hast Du das Problem, dass Du die Styles nicht selber angelegt hast und also auch nicht weiss, wo überall Du die gleichen Styles verwendet hast. In guten CMS sollten im Grunde die Styles immer nur an einer Stelle verwendet werden. Wenn Du also feststellen kannst, dass Deine Änderung, wie gewünscht, nur an den Artikeln Änderungen verursacht haben ... dann bist Du "schon" am Ziel.

Das Ganze klingt jetzt etwas einfach ... der hacken ist aber, diese Eineindeutigkeit bei einem fremden Code zu finden. Da bleibt nur stures Code lesen und verstehen ...


als Antwort auf: [#535779]

per css eine zusätzliche Klasse zuweisen

Graciosa
Beiträge gesamt: 156

11. Jan 2015, 13:09
Beitrag # 3 von 5
Beitrag ID: #535786
Bewertung:
(5219 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Die Eindeutigkeit ist nicht das Problem.

Es wäre #aktuelles .mod_article

nur ist mein Ziel, dass ich eine Formatierung für mehrere Artikel auf verschiedenen Seiten anwenden kann und den Code nicht doppelt schreiben muss:

Ich könnte z.B. in .artikel-schmal definieren, wie diese Art von Artikeln aussehen soll und das dann den Artikeln auf den Seiten zuweisen, auf denen die Artikel so aussehen sollen. Wenn es eine Änderung gibt, bräuchte ich das nur in .artikel-schmal ändern.

Zusätzlich könnte ich noch Klassen für die Weite zuweisen .large6 .small2 zum beispiel. Die Prozentzahlen dafür stehen in den entsprechenden Klassen. Bei breitem Bildschirm greift large und per Mediaquerie bei kleinen Bildschirmen small.

Ich hoffe, es wird klar, was meine Absicht ist. Das Ganze ist eigentlich unabhängig von einem bestimmten Layout.


als Antwort auf: [#535784]
(Dieser Beitrag wurde von Graciosa am 11. Jan 2015, 13:10 geändert)

per css eine zusätzliche Klasse zuweisen

FSt
  
Beiträge gesamt: 1965

11. Jan 2015, 14:17
Beitrag # 4 von 5
Beitrag ID: #535790
Bewertung:
(5189 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Bettina

Wieso .artikel-schmal und nicht gleich bei #aktuelles .mod_article Deine Styles eingeben? Wenn Du eine zusätzliche Klasse einbauen willst, musst Du vermutlich an den Code des CMS ran, ansonsten nur an die Stylesheets.

Auch die Klassen .large6 und .small2 sollten sich doch eigentlich über #aktuelles .mod_article relisieren lassen, oder? Oder wie willst Du diese Bildschrimbreite denn genau abfragen/realisieren?

Gruss
Martin


als Antwort auf: [#535786]

per css eine zusätzliche Klasse zuweisen

Graciosa
Beiträge gesamt: 156

11. Jan 2015, 15:26
Beitrag # 5 von 5
Beitrag ID: #535795
Bewertung:
(5157 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Martin,

ja klar geht das so, wie du sagst.

Nur habe ich zum Beispiel für die Breite ein Spaltensystem hinterlegt, das ich nicht nur für Artikel sondern auch für alle anderen divs benutze. Die Idee habe ich übrigens aus "Modernes Webdesign" von Jonas Hellwig, was ich sehr empfehlen kann:

@media screen and (max-width:499px) {
/* 2 Spalten */
.small1 {width: 50%;}
.small2 {width: 100%;}
}

@media screen and (min-width:500px) {
/* 12 Spalten */

.large1 {width: 8.333333%;}
.large2 {width: 16.666666%;}
.large3 {width: 25%;}
.large4 {width: 33.333333%;}
.large5 {width: 41.666666%;}
.large6 {width: 50%;}
.large7 {width: 58.333333%;}
.large8 {width: 66.666666%;}
.large9 {width: 75%;}
.large10 {width: 83.333333%;}
.large11 {width: 91.666666%;}
.large12 {width: 100%;}
}

Natürlich kann ich für #aktuelles .mod_article {width: 50%} notieren. Im Mediaquerie ändere ich das dann auf width: 100%. Wenn ich aber gleich den Artikeln .large6 und .small2 zuordnen könnte, bräuchte ich das nicht für alle Artikel auf jeder Seite neu bestimmen.

Der Vorteil von .artikel-schmal (oder wie immer ich das dann nenne) wäre, dass ich auf der Seite "Über uns" die gleiche Formatierung verwenden könnte. Wenn es dann mehr Artikel auf einer Seite werden und es soll 3spaltig werden, ändere ich dann nur in .artikel-schmal .large6 auf .large4

Aber vielleicht ist das in der Praxis gar nicht so sinnvoll und ich würde mich total verzetteln - du hast schon recht.


als Antwort auf: [#535790]
X

Aktuell

InDesign / Illustrator
MTT_300x300_11_2022

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
18.06.2024

Online
Dienstag, 18. Juni 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow
Veranstaltungen
02.07.2024

Online
Dienstag, 02. Juli 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

Kontaktinformation: E-Mailschulungen AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow