CSS Help anyone?

Classic
1

Hi, a while ago, I asked for help in formatting an html quiz.

https://www.grammaraquarium.co.uk/Terms/full-stops/

The problem I was having was that the text in the white boxes had the same colour as the other text on the page (green) and consequently, wasn’t easy to read.

@willwood gave me this CSS which worked a treat on that page.

input[type=“button”],
input[type=“reset”] {
color: #000 !important;
line-height: 24px !important;
}

The problem I now have is that the other pages don’t seem to respond to the same code https://www.grammaraquarium.co.uk/Terms/exclamation_marks/

Does anyone know what I’m doing wrong? I know about the Quizzer stack, but I really don’t want to redo every single quiz as it will take forever.

2

In your published page, you are missing the closing brace after the final line of CSS. Screen grab:

48
48791×215 19 KB

Before that closing style tag on line 70, you should have a

}

Check where you are entering the CSS, to make sure it is correct. Republish the page. Clear your browser cache (if using Safari or Chrome).

Without that closing brace, your markup is corrupt and most browsers will ignore it.

3 Likes
3

Hi Will and thanks for your reply.

In the links you looked at, I had the code pasted into the SCC section of each individual page.

I did what you suggested, but it didn’t make any difference, so I deleted all of the code and deleted the site from the server. I republished the site with the code in the general code section of the project. Still the same :frowning:

4

For some reason, the code isn’t being applied to that page?

37
373908×532 374 KB

5

If I go to the file via my channel and add the code, then it works, but any time I republish, the Rapidweaver file will overwrite it? @bon @dan Any way to edit the page’s code directly in Rapidweaver when the code section doesn’t seem to be working?

6

Assuming you mean CSS section. I’m not at a Mac, so having a hard time seeing your screen shots, but if you place code in the CSS section on a page it should be placed in a CSS file. The screen shots above look to be the body section of web inspector.
I’ll take a look later today (when I get to office) if you don’t get it worked out before.

1 Like
7

Hi Doug, yes I meant the CSS section (typo)

I’ve managed to get it working by pasting directly into the page file in my cpanel but Rapidweaver will overwrite that code the next time I publish it.

8

Barrie,
Now at my Mac, looking at the page link above (the page that is not working), I see the following code at the bottom of the consolidated (minified) CSS file:

input[type="button"],input[type="reset"] {
    color: #000 !important;
    line-height: 24px !important;
}

I doubt thats where you pasted?

It looks as if the code Will gave you is already in place?

This is the same code that is in the consolidated (minified) CSS file for the page that you said above is working:

 input[type="button"],input[type="reset"] {
    color: #000 !important;
    line-height: 24px !important;
}

Maybe I’m missunderstanding the issue you are having?

9

Hi Doug, the problem is that it’s working on this page only: https://www.grammaraquarium.co.uk/Terms/full-stops/

All of the other pages have the quiz answer writing in green so you can’t really read it - https://www.grammaraquarium.co.uk/Terms/commands/

I went into the files through cPanel ad added the Will’s code and it worked fine, but Rapidweaver will probably overwrite it when I republish https://www.grammaraquarium.co.uk/Terms/active_passive/

I’ve tried adding the code on individual pages in the CSS section and also the general site CSS section, but it only works on the Full Stops page.

I hope I’m explaining things properly.

10

RapidWeaver will definitely overwrite them as soon as you publish.
I suggest you; Re-Publish all files from the file menu and then report back what is still wrong and which page(s). That way someone can see it not working and what code is in RW and get you an answer.

11

Okay,
This is the code you are hand coding:

<style>
form * input[type="text"],
form * textarea {
    color: #000 !important;
}
</style>

The code you listed in the original post is:

input[type=“button”],
input[type=“reset”] {
color: #000 !important;
line-height: 24px !important;
}

These are different selectors.
When you put the code into the CSS section of a page what are you putting exactly?

You are removing the <style> and the </style> tags?

You could just try adding this to the CSS section:

input[type="text"] {
    color: #000 !important;
}
12

Sorted. There must have been bits of code causing conflict elsewhere as I did a clearcut and republished with that code in the main site CSS section, which sets to have done the trick.

Thanks @teefers.

2 Likes
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.