Problem mit dem Hintergrund

Zitat von Micky12

Das ist so weit gut. Aber dadurch werden die Boxen im Contentbereich ohne Hintergrund angezeigt.

Den Hintergrund im Content, sprich den mittleren Bereich auf welchen Du ansprichst, kannst Du wie folgt abändern:

.content { background: #XYZ; } für den Hintergrund bzw. .content > .section { background: #XYZ; } für die einzelne Sektion. Zudem ließen sich einzelne Elemente auch u.a. mit z.B. [data-box-identifier="XYZ"] { background: #XYZ; } abändern. Je nach dem was genau verändert werden soll.

Zitat von Micky12

Aber jetzt sind auch Boxen an anderer Stelle im Stil verändert und das wollte ich eigentlich nicht.

...

Das sind die veränderten Boxen, aber eben im Footerbereich, wo das nicht so sein sollte.

Dazu könntest Du z.B. mit footer > . boxesFooter { background: none; } bzw. footer > .boxContainer { background: none; } die Hintergrundfarbe wieder entfernen. Anstatt background: none; kann auch background: transparent; genutzt werden. Das kommt aber auf den Stil an und ob bereits die Footer per CSS angesprochen wurden. Wenn dem so ist, so sollte von !important gebrauch gemacht werden (Beispiel: footer > .boxContainer { background: none !important; }).

Gruss,
Andreas

Zitat von Micky12

Weder .content noch .content>.section funktioniert, um einen Hintergrund um die Boxen + einen Rahmen zu bekommen

Das ist auch verständlich, dass dies nicht funktionieren wird, da Du zuvor vom Content geredet hast und nicht explizit nur von den Seitlichen Boxen.

Zitat von Micky12

Und sorry, data-box-identifier finde ich ziemlich beschissen, weil es dann ein ewig langer Code wird, wenn ich jede einzelne Box eintragen muss.

Wenn es nur ums vermeiden eines langen Quellcodes geht, so lässt sich dieser auch kommentieren, um diesen im späteren schneller wieder zu finden. Nur weil es ein langer Quellcode werden könnte ist es immer noch kein Grund darauf zu verzichten, wenn etwas gewünscht wird. Denn gleichermaßen wie und was auch immer bewerkstelligt werden möchte, wird dadurch so oder so der Quellcode größer. Entsprechend dem kann ich dies nicht nachvollziehen, warum Du nicht auf data-box-identifier zurückgreifen möchtest. Gleiches tat ich persönlich u.a. auch. Aber das soll Deine Entscheidung sein / bleiben, ob Du diesen nachkommen möchtest oder nicht.

Zitat von Micky12

Ich weiß nicht ob es so sinnvoll ist, erst so einen Code zu verwenden der alle Boxen verändert und dann zu sagen, aber diese Boxen nicht.

Warum sollte es nicht Sinnvoll sein. Laut CSS-Deklarationen weißt Du zuerst 1001 Box einen Hintergrund zu und anschließend eben eine ungewünschte ab. Andererseits kann natürlich auch 1001 Box einzeln angesprochen werden, welches aber den Ellenlangen Quellcode widersprechen würde, welches Du nicht möchtest.

Zitat von Micky12

Ich versteh sowieso nicht, warum die Boxen plötzlich transparent werden, nur weil man bei body einen Hintergrund einstellt. Völlig egal ob nun eine Grafik oder eine bestimmte Hintergrundfarbe oder halt einen Farbverlauf.

Das liegt doch klar auf der Hand. Wenn der Standard-Hintergrund des Stils als Beispiel eine weiße Hintergrundfarbe hat und die Boxen transparent dargestellt werden, so würden diese natürlich auch weiß erscheinen. Wenn Du hingegen nun den Hintergrund ein Bild oder einen Farbverlauf zuweist, dann ist es selbstverständlich, dass sich dadurch auch der Hintergrund der transparenten Boxen ändert. Entsprechend dem könntest Du die transparenz aus dem originalen Quellcode des Stils entfernen oder aber eben überschreiben. Bei letzteren müsstest Du dann die Boxen mit z.B. aside .box { ... } oder eben mit den ungewünschten [data-box-identifier] { ... } ansprechen um den Hintergrund der Box bzw. der Boxen zu ändern.

Für weiteres wäre es natürlich praktisch wenn Du erwähnst um welchen Stil es sich handelt und wie Du die Boxen explizit geändert haben möchtest. Damit wäre es u.a. Möglich sich auch selbst ein Bild davon zu machen

Gruss,
Andreas

Micky12

vorab der Verständlichkeit halber die z.T. verkürzten Quellcodes der Sidebar (Boxen links / rechts) und derer vom Content (Boxen mittig):

<!-- ::::: Sidebar / Boxen links ::::: -->
<aside class="sidebar boxesSidebarLeft">
  <div class="boxContainer">
    <div class="box" data-box-identifier="com.woltlab.wcf.XXX">
    ...
    </div>
  </div>
</aside>

<!-- ::::: Sidebar / Boxen rechts ::::: -->
<aside class="sidebar boxesSidebarRight">
  <div class="boxContainer">
    <div class="box" data-box-identifier="com.woltlab.wcf.XXX">
    ...
    </div>
  </div>
</aside>

<!-- ::::: Content / Boxen mittig ::::: -->
<section id="main" class="main" role="main">
  <div class="layoutBoundary">
    <div id="content" class="content">
      ...
      <div class="boxContainer">
        <section class="box" data-box-identifier="com.woltlab.wcf.XXX">
          <div class="boxContent">
          ...
          </div>
        </section>
      </div>
      ...
    </div>
  </div>          
</section>  

<!-- ::::: Footer Boxen  ::::: -->
<footer id="pageFooter" class="pageFooter">
  <div class="boxesFooter">
    <div class="layoutBoundary">
      <div class="boxContainer">
        <div class="box" data-box-identifier="com.woltlab.wcf.FooterMenu">
        ...
        </div>
      </div>
    </div>
  </div>
</footer>

Wie zu erkennen sind allen Boxen, gleichermaßen ob nun links, rechts oder mittig die Klasse .box zugewiesen. Dies bedeutet, dass wenn Du Beispielsweise die Boxen mit .box { background: url(meinBild.jpg);} ansprichst, dass Du damit sämtliche Boxen deklarierst. Wenn jedoch nur gewisse Boxen angesprochen werden sollen, so führt kein Weg dran vorbei, diese direkter anzusprechen. Anderes Beispiel: Wenn Du Anna suchst, aber vor Dir 100te Anna's stehen, Du jedoch eine bestimmte suchst, bringt das rufen nach Anna alleine auch nichts. Es muss also konkreter sein und das ist in diesem Fall nichts anderes. Beispiele dazu wie einzelne oder mehrere Boxen in diversen Positionen angesprochen werden können:

/* Alle Boxen (oben, links, mitte, rechts, unten) */
section.box {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}

/* ---------- Boxen im Content ---------- */
/* Alle Boxen */
.content .boxesContentBottom .box {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}
/* Einzelne Box */
.content [data-box-identifier="com.woltlab.wcf.genericBoxXXX"] {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}

/* ---------- Alle Boxen in der Sidebar ---------- */
/* Links */
.boxesSidebarLeft section.box {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}
/* Rechts */
.boxesSidebarRight section.box {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}

/* ---------- Einzelne Boxen in der Sidebar ---------- */
/* Links */
.boxesSidebarLeft [data-box-identifier="com.woltlab.wcf.genericBoxXXX"].box {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}
/* Rechts */
.boxesSidebarRight [data-box-identifier="com.woltlab.wcf.genericBoxXXX"].box {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}

/* ---------- Boxen im Footer ---------- */
/* Alle Boxen */
.pageFooter .box {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}
/* Einzelne Box */
.box [data-identifier="com.woltlab.wcf.genericXXX"] {
    background: url(Pfad/Zum/Bild.jpg) no-repeat;
    background-size: cover;
}

Zitat von Micky12

Allerdings versteh ich immer noch nicht, warum .content und .content>.section einfach gar keine Auswirkungen haben.

Aus dem einfachen Grunde, da Du wohl möglich die Boxen nicht explizit angesprochen hast und somit die Wirkung auslässt.

Zitat von Micky12

Und auch nicht, warum die Boxen grundsätzlich transparent sind.

Das ist nicht unbedingt "Grundsätzlich" da dieses viel mehr an den von Dir genutzten Stil liegt. Stil A mag transparente Boxen einsetzen und Stil B nicht, so dass dies nicht verallgemeinert werden kann. Die Frage warum gewisse Stile die Transparenz nutzen ist einfach erklärt. Wenn der Stil grundsätzlich hell dargestellt werden soll, so würde es reichen dem body mit body { background: #fff; } die Farbe weiß zuzuweisen und den Boxen die Transparenz, um die Hintergrundfarbe des body's in den Boxen zu übernehmen.

Zitat von Micky12

Der Stil ist ein ganz neuer Stil über Stil hinzufügen. Also da war vorher kein Code und nichts drin.

Ob neuer oder alter Stil und gleichermaßen ob dieser als Stil oder Paket hinzugefügt wurde, spielt in dem Sinne keine Rolle. Der einzige Unterschied obliegt darin, dass importierte Stile eben nur Stil-basierende Komponenten (CSS / Templates / Bilder) enthalten, wo hingegen ein Stil der als Paket installiert wurde u.a. mehrere Farbkombinationen eines Stils beinhaltet oder aber anderwertige Komponenten, welche per Stil nicht implementiert werden können. Aber das nur soweit dazu. Das, so wie Du geschrieben hast, kein Code darin enthalten war, ist so nicht korrekt, denn ohne dessen kann es kein Stil sein. Lediglich wird der originale Quellcode des Stils ausgeblendet und kann mittels "Schutz aufheben" aufgehoben werden. Damit wäre es möglich den Stil Grundlegend zu verändern. Um jedoch Änderungen an dem Stil vorzunehmen bzw. CSS-Deklarationen des originalen Stils zu verändern reicht es aber auch vollkommen aus eigene CSS-Deklarationen anzulegen (ggfls. wäre u.U. nur ein !important notwendig).

Gruss,
Andreas