Categories Plus Neuestes Layout Wie man volle Bildschirmbreite nutzt?

Entwickler
1

Ich versuche, die Ansicht Kategorien + Neueste auf dem Desktop so einzurichten, dass sie die gesamte verfügbare Bildschirmbreite nutzt.
width

Alles andere auf der Seite kann gleich bleiben – ich möchte nur, dass dieses eine Layout (Kategorien links, neueste Themen rechts) auf volle Breite erweitert wird, anstatt in einer zentrierten Spalte fester Breite zu bleiben.

Ich habe versucht, viele Container von Elementen zu überschreiben (.wrap, .container, #main-outlet usw.), aber diese spezielle Ansicht bleibt weiterhin eingeschränkt, daher glaube ich, dass ein anderer Wrapper oder ein Raster die Breite steuert.

Könnte mir jemand auf den korrekten CSS-Code hinweisen, der die Breite des Layouts „Kategorien + Neueste“ steuert?

Vielen Dank.

3

Hallo,

Sie benötigen eine Kombination aus der Änderung des grid-Spaltenlayouts auf dem main-outlet-wrapper und der Änderung der Variablen --d-max-width und --topic-body-width, um sie an Ihre Bedürfnisse anzupassen.

4

Danke. Das hat es erledigt.

.badge-category__wrapper .badge-category__name {
    font-size: 1.3em;
}
table.category-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0;
}

table.category-list thead th {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr td {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr:last-of-type td {
  border-bottom: none;
}


.latest-topic-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
}

.latest-topic-list-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.latest-topic-list-item:last-of-type {
  border-bottom: none;
}
5

Hat sich in späteren Updates von Discourse etwas geändert? Dieses CSS hat auf unserer Website nämlich keine Wirkung, abgesehen davon, dass es Rahmenlinien hinzufügt. (Ich habe eine neue Komponente erstellt, den Code in den CSS-Tab eingefügt und die Komponente aktiviert.)

So sehen Meta (und unsere eigene Website) auf meinem Monitor standardmäßig aus. Es wäre schön, wenn ein Teil dieses Platzes genutzt werden könnte.

image
image1920×835 106 KB