Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS CSS help - wedding website

Naturally

New Coder
Hi guys,

So sorry - im so new to this its not even funny! im trying to edit our wedding RSVP site - its a really simple site. I changed the body of text colour to what i'd like, but the website itself hasn't changed ALL of the text. this is the site in question RSVPify. if you input information in to the form (email address not required, name etc can be just a letter - but must select yes to RSVP) a page with questions to answer will pop up - the questions are all black font, no matter what I try! below is the code I used to change the rest of the text to the correct colour. what am I missing? if this text isn't in the "body" of the page - what is it?

any help appreciated!

CSS:
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #bba86a;
    background-color:#0C343D
}
 
Hey there, @Naturally.

I want to know if you've imported your CSS file(Assuming it's external - Living in a file of it's own), into your HTML file. If this is the case, make sure that you have imported your file. If it's already imported, then try checking to make sure it has been imported properly. Something may have not been written properly.

If other parts of the CSS are working, but the text still isn't, try changing the colour under a different CSS tag. What I mean, is this:
CSS:
p, h1, h2, h3, h4, h5, h6 {
     color: #bba86a;
}
Try that and see if that works.

Side-Note: On the line containing background-color, a semi-colon is missing. Perhaps this may be the issue. Fix the semi-colon first, before attempting any of my other methods I've listed above.
 
Hey there, @Naturally.

I want to know if you've imported your CSS file(Assuming it's external - Living in a file of it's own), into your HTML file. If this is the case, make sure that you have imported your file. If it's already imported, then try checking to make sure it has been imported properly. Something may have not been written properly.

If other parts of the CSS are working, but the text still isn't, try changing the colour under a different CSS tag. What I mean, is this:
CSS:
p, h1, h2, h3, h4, h5, h6 {
     color: #bba86a;
}
Try that and see if that works.

Side-Note: On the line containing background-color, a semi-colon is missing. Perhaps this may be the issue. Fix the semi-colon first, before attempting any of my other methods I've listed above.

Hi mathematical, thanks for that. so the code is literally popped into a little box at the bottom of a form to edit the page itself. aside from typing in and clicking save there not much else for me to do.
having typed in what you provided it still doesn't appear to change the question colour. I cannot fathom why. if they're not headers either....I have no clue! thanks, have added in the semi colon. still no dice. ive just attached an image of where I input the code.
I tried to view the source code of the page itself to try suss it out, but with my limited knowledge was struggling! I see a few !important scattered about, unsure if thats affecting things or how to over ride!

hopefully that makes sense!
 

Attachments

  • CSS.png
    CSS.png
    204.8 KB · Views: 4
Hi mathematical, thanks for that. so the code is literally popped into a little box at the bottom of a form to edit the page itself. aside from typing in and clicking save there not much else for me to do.
having typed in what you provided it still doesn't appear to change the question colour. I cannot fathom why. if they're not headers either....I have no clue! thanks, have added in the semi colon. still no dice. ive just attached an image of where I input the code.
I tried to view the source code of the page itself to try suss it out, but with my limited knowledge was struggling! I see a few !important scattered about, unsure if thats affecting things or how to over ride!

hopefully that makes sense!
Hey there.

That's quite unfortunate that you couldn't get it to work. Unfortunately, I don't know any other possible way around this issue, other than using Inline-CSS(E.g <p style="color: #colour">). If any other solution comes to me, I'll be sure to provide it. In the meantime, experiment with using Inline-CSS. Although, it may take a while to implement, depending on how many HTML elements you have(If you can even access the HTML, that is).
 
Hello! I hope you are doing well! I think I may have found your issue on line 6, to help you learn. I will not immediately point it out but take a look at line 6.
[CODE lang="css" title="CSS" highlight="6"]body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #bba86a;
background-color:#0C343D
}
[/CODE]
 
Hello! I hope you are doing well! I think I may have found your issue on line 6, to help you learn. I will not immediately point it out but take a look at line 6.
[CODE lang="css" title="CSS" highlight="6"]body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #bba86a;
background-color:#0C343D
}
[/CODE]

Hi! I have since added a semi colon, is that what you are referring to?
 
I found the CSS setting it to black here:
CSS:
.step1_form .welcome_text p, .step1_form p {
    font-family: Arial;
    color: #000;
    font-weight: 400;
    font-size: 13px;
    padding-top: 8px;
}
This is in CSS file: https://natalieandsean.app.rsvpify.com/css/form-style.css?id=8edd92062bd0d29c84d1


Now obviously you have your custom CSS injection file:
CSS:
.step1, .step2, .step3 {
    background-color: rgba( 255, 255, 255, 0.0);
}
.confirmation-page .confirmation-page-content {
     background-color: rgba( 255, 255, 255, 0.0);
}
.confirmation-page .confirmation-page-sidebar {
     background-color: rgba( 255, 255, 255, 0.0);
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #bba86a;
    background-color:#0C343D;
}
p, h1, h2, h3, h4, h5, h6 {
     color: #bba86a;
}

The last part of that code - if you change it to #bba86a !important in the p,h1,h2,h3,h4,h5,h6 part it'll override properly I believe.
 
I found the CSS setting it to black here:
CSS:
.step1_form .welcome_text p, .step1_form p {
    font-family: Arial;
    color: #000;
    font-weight: 400;
    font-size: 13px;
    padding-top: 8px;
}
This is in CSS file: https://natalieandsean.app.rsvpify.com/css/form-style.css?id=8edd92062bd0d29c84d1


Now obviously you have your custom CSS injection file:
CSS:
.step1, .step2, .step3 {
    background-color: rgba( 255, 255, 255, 0.0);
}
.confirmation-page .confirmation-page-content {
     background-color: rgba( 255, 255, 255, 0.0);
}
.confirmation-page .confirmation-page-sidebar {
     background-color: rgba( 255, 255, 255, 0.0);
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #bba86a;
    background-color:#0C343D;
}
p, h1, h2, h3, h4, h5, h6 {
     color: #bba86a;
}

The last part of that code - if you change it to #bba86a !important in the p,h1,h2,h3,h4,h5,h6 part it'll override properly I believe.
ah you're an angel! that has done the trick! I had attempted to insert "!important" earlier on but that was when I had tried this code (below) and it hadn't worked and didn't consider trying again with the code provided by mathematical. thank you both so much! and to master Yoda :) I presume line 6 was just missing the semi colon and the rest was ok?

have enjoyed using this as an excuse to get back into coding!

if anyone can offer any insight into my grave error below that meant it didn't work one bit, i'd love to understand why! :)

Code:
 h1 {
    color: #bba86a !important;
}
h2 {
    color: #bba86a !important;   
}
h3 {
    color:#bba86a !important;
}
h4 {
    color: #bba86a !important;
}
 
if anyone can offer any insight into my grave error below that meant it didn't work one bit, i'd love to understand why! :)

Code:
 h1 {
    color: #bba86a !important;
}
h2 {
    color: #bba86a !important; 
}
h3 {
    color:#bba86a !important;
}
h4 {
    color: #bba86a !important;
}

You need to also add color: #bba86a !important; to the BODY CSS. You only added it to the header CSS (h1,h2,h3,h4). maybe that's affecting it, I don't know.
My code from above:
CSS:
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #bba86a;
    background-color:#0C343D;
}
p, h1, h2, h3, h4, h5, h6 {
     color: #bba86a;
}
 
Last edited:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom