Einzelne Elemente von Website verändern

  • Hallo zusammen,


    ich habe sehr wenig bis gar keine Ahnung von Programmierung und stehe gerade vor einem Problem, das ich bisher durch Googeln leider nicht lösen konnte

    Ich habe eine Website erstellt inkl. Online-Shop und nutze dafür Wordpress mit dem Theme Avada und Woocommerce für den Shop. Durch YouTube-Videos habe ich nun schon ein paar Ausflüge in CSS gemacht und habe damit auch schon ein paar Details geändert. Ich nutze dafür den Chrome Inspektor und kopiere meine Änderung dann in die CSS-Datei meines Themes.

    Nun ist es ja aber so, dass ich immer nur Klassen verändern kann, nicht einzelne Elemente. Ich würde aber gerne auch einzelne Elemente einer Klasse verändern, also zum Beispiel nur auf einer bestimmten Seite die Überschrift H1 in einer anderen Farbe oder so.

    Wie muss ich da grundsätzlich vorgehen?

    Ich wäre für Hilfe sehr dankbar!!!

  • Hey,


    in CSS gibt es Klassen und Ids. Wenn du nun nur ein Element designen willst dann kannst du diesem eine ID geben.

    Man greift auf Ids mit dem Hashtag (#) zu.


    Grüße,

    Stef

  • Ich nutze dafür den Chrome Inspektor und kopiere meine Änderung dann in die CSS-Datei meines Themes.

    Beachte bitte, dass deine Änderungen in einer separaten CSS-Datei liegen, sonst werden sie beim nächsten Update überschrieben.

  • Mh.. da finde ich leider nichts zu meinem Problem. Das habe ich alles schon gemacht. Also in meinem Theme kann man eigene CSS-Anweisungen (keine Ahnung ob das so korrekt benannt ist ;-)) eingeben aber ich habe noch nicht so recht verstanden, wie ich einzelne Elemente ändern kann. Muss ich dazu auch etwas in der HMTL ändern oder nur über CSS? Bei HTML würde es dann nämlich schon wieder schwierig werden, weil ich nicht wüsste, wie ich z.B. Zugriff auf die HTML-Dateien habe, die ich nicht selbst angelegt habe, also zum Beispiel das Menu meines Shops.


    Also wie genau finde ich die ID raus und was muss ich dann machen? Die passenden CSS-Anweisungen für meine Designänderungen kenne ich bereits, wie ich sie aber anwende bzw. wo und wie genau ich sie eintragen muss leider nicht.

  • Ja das weiß ich, so mache ich es auch. Meine Frage bezieht sich auf die Änderung an sich. Also was genau ich tun muss um einzelne Elemente zu verändern. Sorry für die ganze Fragerei aber mit allgemeinen Aussagen komme ich leider nicht aus, da ich sehr wenig Ahnung habe. Ich würde mich sehr über ein konkretes Beispiel freuen, mit dem ich dann weiterarbeiten kann.

  • Dann stelle eine gezielte Frage und gib uns einen Link zur Seite - wie sollen wir sonst wissen, was du genau genau geändert haben willst und was dazu erforderlich ist.

    Der Weg über die Identifizierung des 'Selektors' des Elementes mittels Webentwicklertool (Inspektor) ist aber schon genau richtig. Mit dem richtigen Selektor und dem gewünschten CSS Code im zusätzlichen CSS sollte es dann klappen.

  • Dann stelle eine gezielte Frage und gib uns einen Link zur Seite - wie sollen wir sonst wissen, was du genau genau geändert haben willst und was dazu erforderlich ist.

    Der Weg über die Identifizierung des 'Selektors' des Elementes mittels Webentwicklertool (Inspektor) ist aber schon genau richtig. Mit dem richtigen Selektor und dem gewünschten CSS Code im zusätzlichen CSS sollte es dann klappen.

    Ich war eigentlich der Meinung, dass meine Frage ziemlich gezielt war. Ich möchte nicht wissen, wie ich konkret Element X auf meiner Seite ändere, sondern wie es es generell anstelle einzelne Elemente zu ändern. Die Erklärung "Der Weg über die Identifizierung des 'Selektors' des Elementes mittels Webentwicklertool (Inspektor) ist aber schon genau richtig. Mit dem richtigen Selektor und dem gewünschten CSS Code im zusätzlichen CSS sollte es dann klappen." ist so allgemein, dass ich nichts damit anzufangen weiß - wie gesagt, ich bin Neuling. Bis vor zwei Wochen hatte ich noch nie was von CSS gehört.

  • Dann sollte dein erster Schritt sein, dich gezielt mit den Grundlagen... und zwar hier mit den CSS Selektoren.. zu beschäftigen...

    https://wiki.selfhtml.org/wiki/CSS/Selektoren

    oder hier

    https://www.w3schools.com/css/default.asp

    Mit diesen Selektoren kannst du jedes einzelne Element gezielt ansprechen.

    Und das Instrument, um diese Selektoren herauszufinden ist zum Einen, dass du die Seite selbst geschrieben hast und dann eben weißt, welcher Selektor richtig ist oder zum Anderen, die Nutzung des 'Inspektors', der dir die Informationen zu jedem Element anzeigt!.

  • So... Nach stundenlangem Scheitern habe ich nun ein Plugin gefunden,mit dem man im Live-Modus alle Elemente verändern kann - auch einzelne. Besser geht's nicht!!


    Danke trotzdem