Trying to change font color

dev
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

Have you looked at your color palette in admin - color schemes settings?

2 Likes
4

So, just tried a new test theme and made every color white (#FFFFFF). Refreshed page and the text still never changed, nor the background of the non-main page backgrounds (when I tried black on those). So that rules out the theme colors at least, I guess…I’m doing all of this with the Landing Pages plugin, and the blog theme/blog layout that goes with it. For some reason, when I change the CSS, it only effects the text background (shown in vid) on the one main page on mobile, on the hamburger menu, but the background on the rest of the pages of the hamburger drop-down menu are all white. I’ve tried changing basically every color I can find on it…Video example:

5

Ok, so the backgrounds that won’t change are listed here:

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

ddd

And menu.scss:214 leads me to:

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

But that’s under
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page
So is it something I simply can’t change on my own that’s baked in to the Landing Pages plugin, or is there a trick to fix this color issue?

And the font color is under:

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

which is…

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

And that’s at:
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page/menu.scss
But when I change the primary color, as it’s shown as being, nothing happens. And “!important;” won’t override it, so how can I change font color here?