CODEWITHSUNDEEP
csszurb-foundation
Yada
Yada

Reputation: 31225

zurb foundation 4.0 custom Button color without SASS

http://foundation.zurb.com/docs/components/buttons.html

From the doc it is possible to get Custom Color using Mixin. I don't know much about SCSS and trying to get by without using it.

I want Black color buttons instead of the default Blue. It is possible to create some CSS class .black { ... } which will make the button black?

Upvotes: 1

Views: 2045

Answers (2)

Hive7
Hive7

Reputation: 3675

I think that your error might be that it is being overridden and one of the only ways of doing it even though it is frowned upon is to use !important so you would need to use:

.black {
    background-color: #000 !important;
}

Also as you have used !important just for the regular one you also need to add it to your hover method so like this:

.black:hover {
    background-color: #ccc !important;
}

Edit

Just found out that you don't even need important though if it starts to misbehave then that is what to do

Here is a fiddle:

http://jsfiddle.net/Hive7/p868s/

Upvotes: 1

joydesigner
joydesigner

Reputation: 813

Yes. You can override the css by your own class if you do not know SCSS, though it is recommended to change the SCSS variable value in _variables.scss.

The way for css override is:

create a new css file for example. mystyle.css

And then call the css in the html head after

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />

  <link rel="stylesheet" href="css/mystyle.css">

  <script src="js/vendor/custom.modernizr.js"></script>

</head>

<a href="#" class="small button black">.small black colour button</a>
<body>

Then your css will override the foundation.css class.

add your css class into the button element in html file.

Please see in the above code.

Upvotes: 2

Related Questions