# CSS help please?

**URL:** <https://forums.realmacsoftware.com/t/css-help-please/20971>\
**Category:** RapidWeaver Classic\
**Created:** [July 10, 2018, 4:21pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971 "2018-07-10T16:21:23Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bazza](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bazza/32/2104_2.png) [@Bazza](https://forums.realmacsoftware.com/u/Bazza)\
**Post date:** [July 10, 2018, 4:21pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/1 "2018-07-10T16:21:24Z")

</div>

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/](http://www.grammaraquarium.co.uk/page/page-2/)

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [July 10, 2018, 4:28pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/2 "2018-07-10T16:28:30Z")

</div>

Try something like this:

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

---

<div class="post-metadata">

**Author:** ![Bazza](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bazza/32/2104_2.png) [@Bazza](https://forums.realmacsoftware.com/u/Bazza)\
**Post date:** [July 10, 2018, 4:42pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/3 "2018-07-10T16:42:46Z")

</div>

Perfect - thanks Will!

---

<div class="post-metadata">

**Author:** ![Bazza](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bazza/32/2104_2.png) [@Bazza](https://forums.realmacsoftware.com/u/Bazza)\
**Post date:** [July 10, 2018, 4:58pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/4 "2018-07-10T16:58:10Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [July 10, 2018, 5:05pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/5 "2018-07-10T17:05:38Z")

</div>

> [@Bazza](#):
>
> I’m using Foundation (which doesn’t seem to have its own HTML or Markdown stack)

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

> 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.

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [July 10, 2018, 5:11pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/6 "2018-07-10T17:11:35Z")

</div>

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](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`

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [July 10, 2018, 5:33pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/7 "2018-07-10T17:33:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Bazza](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bazza/32/2104_2.png) [@Bazza](https://forums.realmacsoftware.com/u/Bazza)\
**Post date:** [July 10, 2018, 6:19pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/8 "2018-07-10T18:19:47Z")

</div>

> [@teefers](#):
>
> input[type=“text”], textarea { color: #000; line-height: 24px; }

Hi Doug, didn’t seem to work ☹

@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.

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [July 10, 2018, 6:31pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/9 "2018-07-10T18:31:41Z")

</div>

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;"`

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [July 10, 2018, 6:40pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/10 "2018-07-10T18:40:34Z")

</div>

> [@Bazza](#):
>
> I wondered about a dedicated html stack as ‘email stacks’ has there own dedicated stacks.

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.

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [July 10, 2018, 6:52pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/11 "2018-07-10T18:52:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [July 10, 2018, 7:00pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/12 "2018-07-10T19:00:50Z")

</div>

> [@Bazza](#):
>
> Is there an easy way to put a quiz together in Foundation?

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

 ![23%20PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/3/320b9d3da72f1c719e8a33a4327b15fc8e085900.png)  
 ![08%20PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/a/a6fff7ce76624c8d1b4a040894ae1c75cc390ce5.jpg)

---

<div class="post-metadata">

**Author:** ![habitualshaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/habitualshaker/32/10762_2.png) [@habitualshaker](https://forums.realmacsoftware.com/u/habitualshaker)\
**Post date:** [July 10, 2018, 7:12pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/13 "2018-07-10T19:12:30Z")

</div>

> [@Bazza](#):
>
> Is there an easy way to put a quiz together in Foundation?

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](https://shakingthehabitual.com/stacks/quizzer/) 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.)

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [July 10, 2018, 7:24pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/14 "2018-07-10T19:24:26Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![Bazza](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bazza/32/2104_2.png) [@Bazza](https://forums.realmacsoftware.com/u/Bazza)\
**Post date:** [July 11, 2018, 7:16am UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/15 "2018-07-11T07:16:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bazza](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bazza/32/2104_2.png) [@Bazza](https://forums.realmacsoftware.com/u/Bazza)\
**Post date:** [July 11, 2018, 7:17am UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/16 "2018-07-11T07:17:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [July 11, 2018, 7:26am UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/17 "2018-07-11T07:26:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Bazza](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bazza/32/2104_2.png) [@Bazza](https://forums.realmacsoftware.com/u/Bazza)\
**Post date:** [July 11, 2018, 8:23am UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/18 "2018-07-11T08:23:42Z")

</div>

Seems to have done the trick!

Thanks Will - first class as always.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [August 10, 2018, 6:27pm UTC](https://forums.realmacsoftware.com/t/css-help-please/20971/19 "2018-08-10T18:27:00Z")

</div>

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