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.

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:

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?

Trying to change font color

Development

Lilly (Lillian ) April 1, 2024, 6:46pm 2

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

Topic		Replies	Views
How do I change text color in my Header? Product Support css	3	1144	January 4, 2023
How do I force the text color on a colored background Development	2	1193	April 27, 2020
New Welcome Banner Font Colour will not change? Product Support	2	141	December 1, 2025
Can't change font colour of 'log in' and 'sign up' buttons in theme? Development	4	655	March 9, 2023
Change hover background color for nav class buttons Development	21	784	August 9, 2024

Trying to change font color

Related topics