CSS help please?


(Barrie McDermid) #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/


(Will Woodgate) #2

Try something like this:

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

(Barrie McDermid) #3

Perfect - thanks Will!


(Barrie McDermid) #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:


(Joe Workman) #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.


(Joe Workman) #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


(Doug Bennett) #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.


(Barrie McDermid) #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.


(Doug Bennett) #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;"


(Joe Workman) #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.


(Will Woodgate) #11
form * input[type="text"],
form * textarea {
    color: #000 !important;
}

(Joe Workman) #12

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



(Stuart Marshall) #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.)


(Joe Workman) #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:


(Barrie McDermid) #15

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


(Barrie McDermid) #16

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


(Will Woodgate) #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.


(Barrie McDermid) #18

Seems to have done the trick!

Thanks Will - first class as always.