CSS help please?

Classic
1

Hi folks, I’ve tried a web search before asking. I’m using Foundation (which doesn’t seem to have its own HTML or Markdown stack), so I’ve placed an HTML quiz in a standard markdown stack.

The problem is the buttons at the end of the quiz, which read “Get Score” and “Clear”. I need to change the colour and it doesn’t seem to do it through the Site Styles stack, nor have I managed to change it with any CSS code I’ve found on the web. Could anyone make a suggestion as to how I can get these buttons darker?

http://www.grammaraquarium.co.uk/page/page-2/

2

Try something like this:

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

Perfect - thanks Will!

4

Any idea how to get the ‘Score’ and ‘Correct Answers’ the same colour? I tried
input[type=“textarea”]
{
color: #000 !important;
line-height: 24px !important;

But it didn’t work :frowning:

5

It does not need one. Use the default HTML and/or Markdown stack that comes with Stacks. :slight_smile:

I need to change the colour and it doesn’t seem to do it through the Site Styles stack

The Button stack has many different styles that you can choose. The Style setting allows you to choose from 10 different colors that is configurable inside Site Styles. This is recommended since you can set your site’s color pallete inside Site Styles. If you ever want to change everything that uses a particular color, you only need to change Site Styles and everything else will get updated. There is also a custom option that allows you to choose whatever color that you want.

6

I just looked to the page. You hand coded your form instead of using the Foundation stacks. You would have so much more control if you did it with Foundation.

However, if you insist on hand coding the form, this is how you can get Site Styles to style the buttons… https://foundation.zurb.com/sites/docs/v/5.5.3/components/buttons.html

Add a button class to your buttons. You can also see all of the other sizing options available: tiny, medium, large, etc. You can also use the different colors from Site Styles bu using the following classes: alt, alert, success, warning

7

Try this, don’t think you need !important on the other as well.

input[type="text"], textarea {
color: #000;
line-height: 24px;
}

Edit: That won’t work.
The textarea has inline styles(with !important, bad practice) So you would need to add these to the styles= part of the HTML.

8

Hi Doug, didn’t seem to work :frowning:

@joeworkman I have Html quizzes that I want to style. I’ve pre-made them in html. Is there an easy way to put a quiz together in Foundation?

I wondered about a dedicated html stack as ‘email stacks’ has there own dedicated stacks.

9

Yeah, I updated the post above.

The HTML has an inline style statement, you will need to change it to:
style="z-index: auto; position: relative; line-height: 24px; font-size: 14px; transition: none; background: transparent !important; color: #000;"

1 Like
10

Email is a completely different beast. You should only use Email stacks inside of an email. The Email stacks are an exception that should not apply to any other product, including Foundation.

11 
form * input[type="text"],
form * textarea {
    color: #000 !important;
}
1 Like
12

Have you played with the form stacks at all in Foundation?

23%20PM
23%20PM726×646 10.4 KB

08%20PM
08%20PM3346×2278 627 KB

1 Like
13

You’ll only get very basic/limited results trying to build a quiz with a form stack / using html form elements. Check out my Quizzer Stack to see the kind of options that a dedicated quiz stack can offer.

(There’s a nice little World Cup quiz on the site just now that is a good example.)

1 Like
14

I was purely replicating the form that you built with your HTML. The Foundation Form stack was never really designed to do niche for actions… Multi-step, quizzes, etc. It’s a very powerful stack but not meant to be the end-all-be-all. If Quizzer fits the bill, then you should totally use that. :slight_smile:

2 Likes
15

Hi Stuart, I looked at your quiz stack and it looks great, but I have the quizzes already in html format.

16

Not sure where this should go Doug? No joy with that extra code @willwood :frowning:
I really appreciate everyone’s time.

17

Did you try putting it inside <style> tags at the end of the page, in an HTML stack? If you have conflicting !important declarations, then the one furthest down the page takes precedence. The CSS I gave you was working for me, when I tested it.

18

Seems to have done the trick!

Thanks Will - first class as always.

19

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