Essayer de changer la couleur de la police

Dev
1

Ça semble si simple, non ? Tout ce que j’ai essayé ne fonctionne tout simplement pas.
J’ai trouvé l’endroit exact dans l’Inspecteur d’éléments où se trouve la couleur du texte. J’ai essayé toutes les classes listées là à la fin de la vidéo, j’ai essayé d’ajouter !important; à celles-ci, etc., etc. … mais la couleur de la police ne change tout simplement pas. Tous mes éléments CSS qui affectent la couleur de la police sont les suivants :

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

La partie qui affecte l’arrière-plan là où se trouve le texte est dans .mobile-header .menu, donc je l’ai définie ainsi :

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

L’arrière-plan change de couleur lorsque je modifie cela, mais la couleur de la police ne change absolument pas. Cela ne se produit que sur mobile, donc j’ai été modifier mon fichier mobile.scss. Sur le bureau, le texte de ces deux éléments est blanc, donc je ne sais pas pourquoi il ne serait pas blanc sur les appareils mobiles.

Mon fichier CSS mobile complet est :

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;
      }
    }
  }
}

Et mon fichier common.scss complet est :

@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;
  }
}

Veuillez m’aider.

2

Avez-vous regardé votre palette de couleurs dans les paramètres des thèmes de couleurs de l’administrateur ?

4

J’ai donc essayé un nouveau thème de test et j’ai mis toutes les couleurs en blanc (#FFFFFF). J’ai actualisé la page et le texte n’a toujours pas changé, ni l’arrière-plan des pages non principales (quand j’ai essayé le noir sur celles-ci). Cela exclut donc les couleurs du thème au moins, je suppose… Je fais tout cela avec le plugin Landing Pages, et le thème/la mise en page du blog qui l’accompagne. Pour une raison quelconque, lorsque je modifie le CSS, cela n’affecte que l’arrière-plan du texte (montré dans la vidéo) sur la seule page principale sur mobile, sur le menu hamburger, mais l’arrière-plan du reste des pages du menu déroulant hamburger est tout blanc. J’ai essayé de changer pratiquement toutes les couleurs que je pouvais trouver… Exemple vidéo :

5

Ok, donc les arrière-plans qui ne changeront pas sont listés ici :

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

ddd
ddd310×219 5.78 KB

Et menu.scss:214 mène à :

    .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;

Mais c’est sous
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page
Est-ce donc quelque chose que je ne peux tout simplement pas changer moi-même, qui est intégré au plugin Landing Pages, ou y a-t-il une astuce pour résoudre ce problème de couleur ?

Et la couleur de la police se trouve sous :

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

ce qui est…

          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;
          }

Et c’est à :
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page/menu.scss
Mais quand je change la couleur primaire, comme elle est indiquée, rien ne se passe. Et « !important; » ne la remplace pas, alors comment puis-je changer la couleur de la police ici ?