Versuche, die Schriftfarbe zu ändern

Entwickler
1

Seems so simple, right? Everything I’ve tried just won’t work.
I found the exact area in Inspect Element where the text color is. I’ve tried all the classes listed there at the end of the video, I’ve tried adding !important; to them, etc etc…but the font color just won’t change. All my CSS stuff that effects font color are these:

* {
  color: #ffffff
}
  a {
    text-decoration: none;
    color: #ffffff
  }

The part that effects the background of where the text is, is at
.mobile-header .menu so I have that as:

    .mobile-header .menu {
      background-color: #4a4a4a !important;
      background-image: none !important;
      color: #ffffff !important;
    }

It will change the background color when I change that, but the font color will not change whatsoever. This only happens on mobile, so I’ve been editing my mobile.scss file. On Desktop, the text of those 2 texts is white, so I have no idea why it won’t be white on mobile devices.

My full mobile CSS file is:

body.landing-page {
  &.blog {
    > .contents {
      max-width: 100%;
      width: 100%;
      display: block;
      padding: 1em;

      .page-first {
        display: none;
      }
    }

    .mobile-header .menu {
      background-color: #4a4a4a !important;
      background-image: none !important;
      color: #ffffff !important;
    }
    
    .topic-list {
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      padding: 2em 0 0 0;

      .topic-byline {
        .bull {
          padding: .2em .5em;
        }
      }
    }
  }

  &.blog-post {
    header {
      background-color: $secondary;
    }

    .container {
      width: 100%;
    }

    .post-container {
      width: 100%;
    }
    
    .title-container {
      min-height: unset;
      margin-top: 4em;

      .title {
        width: 100%;
        text-align: center;
        margin: 0 0 1em 0;
      }

      .topic-byline {
        flex-direction: column;

        .bull {
          padding: .2em 1em;
        }
      }
    }

    img {
      max-width: 100%;
      height: auto;
    }
    
    .comment-container {
      .comment-heading h4 {
        text-align: center;
      }

      .comment-footer {
        padding: 0 2em;
        box-sizing: border-box;
        justify-content: center;
      }
    }
  }

  &.blog,
  &.blog-post {
    .btn-subscribe {
      padding: 0;

      .fixed-avatar {
        width: 60px;
        height: 60px;
      }
    }
  }
}

And my full common.scss file is:

@import "common/base/topic-post";
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
  color: #ffffff
}
/* .landing-header {
  display:none
} */
.forum-button {
display:none
} 
.login-button {
  display: flex;
  justify-content: center;
  column-gap: 0.7em;
}

header.landing-header {
  background-color: #18191a !important;
}

body.blog,
body.blog-post {
  background-color: #18191a;
  font-family: 'Montserrat', sans-serif;

  h1 {
    font-size: 3em;
  }

  a {
    text-decoration: none;
    color: #ffffff
  }

  .btn {
    border-radius: 4px;
    position: relative;
    font-size: 1em;
    z-index: 1;
    border: none;
    
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
    }

    &:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 100%;
      transition: all .3s;
      z-index: -1;
    }

    &:hover {
      &:before {
        width: 100%;
      }
    }
  }

  .btn-fixed {
    position: fixed;
    display: flex;
    align-items: center;
    bottom: 2em;
    border-radius: 2em;
    padding: 1em;
    box-shadow: shadow("card");
    cursor: pointer;
    overflow: hidden;
    z-index: 100;
    box-sizing: border-box;

    .fixed-avatar,
    .fixed-icon {
      width: 30px;
      height: 30px;
    }

    .fixed-avatar {
      border-radius: 50%;
    }

    .fixed-user {
      padding: 0.1em 0 0 0.4em
    }

    .fixed-icon {
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    .fixed-label {
      margin-left: .5em;
      font-weight: 800;
    }
  }

  .btn-blog {
    @extend .btn-fixed;
    left: 1.75em;

    .d-icon {
      fill: $secondary;
    }

    &:after {
      background-color: $primary;
    }

    &:before {
      background-color: darken($primary, 15%);
    }

    .fixed-label {
      color: $secondary;
    }

    .fixed-icon svg {
      height: 80%;
      width: 80%;
    }
  }

  .btn-subscribe {
    @extend .btn-fixed;
    color: $primary-very-low;
    right: 1.75em;

    &:after {
      background-color: $quaternary;
    }

    &:before {
      background-color: darken($quaternary, 15%);
    }

    .fixed-icon {
      svg {
        fill: $secondary;
      }
    }
  }
}

body.blog {
  padding-top: 8em;

  .blog-title {
    text-align: center;
    padding: 0 1em;

    h3 {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }
  }

  > .contents {
    min-height: 100vh;
    width: 100%;
    max-width: 87.5em;
    padding: 2em 5em 4em;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  .topic-list {
    position: relative;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    padding: 0;
  }

  .topic-list-item {
    position: relative;
    display: flex;
    flex-direction: column;

    .contents {
      border: 1px solid $primary-low;
      border-radius: 0.25em;
      padding: 1.3em;
      background-color: $secondary;
  
      &:hover {
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
      }
    }
  }

  .topic-image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.18em;
    height: 200px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .topic-link {
    position: relative;
    display: block;
    padding: 0;
    color: $primary;

    &:hover {
      text-decoration: none;
    }
  }

  .header {
    margin: 1.3em 0 0;
  }

  .topic-title {
    font-size: 1.6rem;
    margin: 0 0 0.4em;
    transition: color 0.2s ease-in-out;
  }

  .topic-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .topic-excerpt {
    max-width: 56em;
    color: $primary-high;

    p {
      margin-bottom: 1em;
      display: -webkit-box;
      overflow-y: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
  }

  .topic-meta {
    display: flex;
    align-items: center;
    padding: 0;
  }

  @media (min-width: 1000px) {
    .topic-list article:first-of-type {
      grid-column: 1 / span 3;
      min-height: 17.5em;

      .contents {
        display: grid;
        grid-gap: 4vmin;
        grid-template-columns: 1fr 1fr;
      }

      .topic-title {
        margin-top: 0;
        font-size: 3.2rem;
      }

      .topic-excerpt p {
        margin-bottom: 1.5em;
        font-size: 1.7rem;
        line-height: 1.55em;
        -webkit-line-clamp: 8;
      }

      .topic-details {
        justify-content: center;
      }

      .topic-image {
        position: relative;
        margin-bottom: 0;
        height: 100%;
        min-height: 23.75em;

        img {
          position: absolute;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  @media (max-width: 500px) {
    .topic-title {
      font-size: 1.9rem;
    }

    .topic-excerpt {
      font-size: 1.2rem;
    }
  }
}

body.blog-post {

  .canvas {
    background: $secondary;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .10);
    padding: 2em;
    box-sizing: border-box;
  }

  .title-container {
    background: no-repeat center/cover fixed;
    display: flex;
    flex-direction: column;
    min-height: 530px;
    max-height: 40%;
    justify-content: flex-end;
    align-items: center;

    .contents {
      width: 900px;
      max-width: 100vw; 
      box-sizing: border-box;
    } 

    .title {
      color: $primary;
      font-size: 2.5em;
      font-weight: 700;
      margin: 0 0 .5em 0;
    }
  }

  .post {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  li {
    line-height: 1.6em;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 900px;
    max-width: 100vw;
  }

  .comment-container {
    display: flex;
    flex-direction: column;
    width: 100%;

    .comment-user {
      color: $primary-high;
      text-transform: capitalize;
      font-size: $font-down-1;
      margin: 6px 0 10px 0;
    }

    div.comment {
      padding: 10px 0;
      margin-left: 1em;
      word-wrap: break-word;
      word-break: break-word;
      border-bottom: 1px solid $primary-low;

      .comment-content {
        margin-left: 50px;
      }

      &:first-of-type {
        padding-top: 0;
      }

      &:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
      }
    }

    .comment-avatar {
      float: left;
    }

    .img-avatar {
      border-radius: 50%;
    }

    .comment-heading {
      color: $primary-high;
      display: flex;
      flex-direction: column;

      h4 {
        margin: 2.5em 0 1em 0;
      }
    }

    .comments {
      width: 100%;
      border-top: 1px solid $primary-very-low;
    }
  }

  h1, h2, h3, h4 {
    margin: .75em 0 .15em;
  }

  blockquote {
    width: 100%;
    padding: 12px;
    margin-left: 0;
    box-sizing: border-box;
    font-style: italic;
    border-left: 5px solid $primary-low;
    background-color: $blend-primary-secondary-5;
  }

  code, pre {
    color: $primary-very-high;
    background: $primary-very-low;
  }

  img.emoji {
    width: 1.3em;
    height: 1.3em;
    vertical-align: middle;
  }

  .canvas {
    display: flex;
    flex-direction: column;
    align-self: center;

    .lightbox-wrapper {
      align-self: center;
    }
  }

  .post-content {
    border-top: 1px solid $primary-low;
    padding-top: 1em;
    min-width: 100%;
    word-spacing: 0.25em;
    display: flex;
    flex-direction: column;

    p:last-of-type {
      margin-bottom: 0;
    }
  }
}

.comment-footer {
  margin: 3em 0;
  width: 100%;
  display: flex;

  a.btn.btn-primary {
    cursor: pointer;
    font-weight: bold;
    padding: 12px 18px;
    font-size: 1.1em;
  }
}

.modal {
  display: none;

  &.active {
    visibility: visible;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: fixed;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-container {
    background: $primary-very-low;
    padding: 2em;
    position: relative;
    margin: auto;
    box-shadow: shadow("modal");
    border-radius: 0.3em;
    width: 30em;
    max-width: 90%;
    height: auto;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .modal-close {
      cursor: pointer;
      fill: $primary-low-mid;

      svg {
        height: 1.2em;
        width: 1.2em;

        &:hover,
        &:focus {
          text-decoration: none;
          cursor: pointer;
          fill: $primary-high;
        }
      }
    }

    .modal-header {
      border-bottom: 1px solid $primary-low;
      padding-bottom: 0.5em;
      margin-bottom: 1em;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .modal-title {
        margin: 0;
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  .modal .modal-container {
    padding: 1em;
  }
}

Please help.

2

Haben Sie Ihre Farbpalette unter Admin - Farbschemata-Einstellungen überprüft?

2 „Gefällt mir“
4

Ich habe gerade ein neues Testthema ausprobiert und alle Farben auf Weiß (#FFFFFF) gesetzt. Seite aktualisiert und der Text hat sich immer noch nicht geändert, ebenso wenig wie der Hintergrund der nicht-Hauptseiten (als ich dort Schwarz ausprobiert habe). Das schließt zumindest die Themensfarben aus, schätze ich… Ich mache das alles mit dem Landing Pages Plugin und dem dazugehörigen Blog-Theme/Blog-Layout. Aus irgendeinem Grund wirkt sich die Änderung des CSS nur auf den Text-Hintergrund (im Video gezeigt) auf der einen Hauptseite auf dem Handy, im Hamburger-Menü, aus, aber der Hintergrund auf den restlichen Seiten des Hamburger-Dropdown-Menüs ist komplett weiß. Ich habe versucht, praktisch jede Farbe zu ändern, die ich darauf finden kann…Video-Beispiel:

5

Ok, die Hintergründe, die sich nicht ändern, sind hier aufgelistet:

@media only screen and (max-width: 480px)
body.landing-page .mobile-header .menu {

ddd
ddd310×219 5.78 KB

Und menu.scss:214 führt mich zu:

    .mobile-header .menu {
      position: fixed;
      overflow: scroll;
      top: 6em;
      bottom: 0;
      right: 0;
      left: 0;
      visibility: hidden;
      padding: 20px;
      background-color: white;
      flex-direction: column;
      align-items: flex-start;

Aber das ist unter
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page
Kann ich das also nicht einfach selbst ändern, weil es im Landing Pages Plugin fest eingebaut ist, oder gibt es einen Trick, um dieses Farbproblem zu beheben?

Und die Schriftfarbe ist unter:

@media only screen and (max-width: 480px)
body.landing-page.menu-visible

was…

          label {
            display: inline-block;
            background-image: linear-gradient(
              180deg,
              transparent 90%,
              $tertiary 0
            );
            background-size: 100% 100%;
            background-repeat: no-repeat;
            text-decoration: none;
            font-size: 1.5rem;
            color: $primary;
            transition: background-size 0.4s ease;
            cursor: pointer;
          }

Und das ist unter:
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page/menu.scss
Aber wenn ich die Primärfarbe ändere, wie sie angezeigt wird, passiert nichts. Und „!important;“ überschreibt es nicht, also wie kann ich hier die Schriftfarbe ändern?