Zurb Foundation's text field have a 1em bottom margin that I want to remove.
I couldn't find custom scss in zurb foundation documents.
I'm overwriting the stylesheet by using !important option.
But if possible I don't want to use it.
Is there better way to remove the margin from foundation form text field?
I'm using foundation in a rails project.
You can override the styles without using !important option.
If there are multiple contradictory CSS file then whichever gets called LAST will override the previous one.
For example if you add below styles in your CSS file and include it after docs.css then it gets highest priority.
Have a look at the JS Fiddle
input[type="text"]{
margin: 0;
}
If you want to use the SCSS method you want to change the value for $form-spacing;
Forms | Foundation for Sites 6 docs
$form-spacing: rem-calc(16);
Related
I have the following line in my tables.less, that I do not want in my code.
th {
text-align: left;
}
Problem is, that I do not have tables.less in my website directory, so I can't remove the line - and I cannot override the text-align, as I don't want any text-align at all.
How can I edit or remove elements from the Bootstrap 3 tables.less?
To remove this you can go to http://getbootstrap.com/2.0.4/less.html and learn how to generate CSS from the Bootstrap LESS code and how to use that in your code. You can modify some things on the webpage, but I think you'll need to get the LESS files, remove this snippet you don't want and compile the CSS.
Otherwise you can download and edit the bootstrap CSS where you remove this code. Then you'll need to use your version of the bootstrap CSS
Or the simplest thing would probably be to create your own CSS rule to override the Boostrap rule and place it in your own CSS file or script
Does bootstrap define any properties on any HTML tags?
If yes, will normalize.css or reset.css remove those properties?
If you use any css code already wrote by someone that is focused on certain zones (like on margin for example) the final margin property that you will see in browser is the last one.
In other words if you set for example margin:0 auto; and then call or copy paste bootstrap code that change the global margin property, browser will take bootstrap settings for global margin.
So using bootstrap then reset.css then you'll get a page with the properties of reset.css for basic tags and bootstrap properties for defined classes by bootstrap( because reset.css doesn't select certain classes)
I already tried the custom function from the website, but keeps give me error, and tried the BASIC method too:
body {background-color:red;}
so, does anyone know?
Download all of the bootstrap files and somewhere inside the .css file add:
body {
background:red !important;
}
The correct way to change background color in Bootstrap 3 is to use bg-* classes. For red color there is bg-danger. Also available bg-primary, bg-success, bg-info and bg-warning.
http://getbootstrap.com/css/#helper-classes-backgrounds
I would not recommend changing the actual bootstrap CSS files. You can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).
SOURCE: How to change the default background color white to something else in twitter boostrap
I would strongly recommend using Sass with Bootstrap-Sass not just for making any customisations to the core Bootstrap framework but also to ensure your CSS is as DRY as possible. Then you can do something like
$red: #f00;
$body-bg: $red;
before you import your core Bootstrap CSS, and you will be good to go. Note that Sass allows you to reuse the variable ($red) you just declared anywhere else you may like in your app.
The benefits of using a CSS preprocessor like Sass or LESS don't end here. Bootstrap is based on a proportionate system of font sizes, so you can also do something like
$font-size-base: 16px;
and that will accordingly change the font sizes of all elements (p, h1..h6 etc) across the board. You may also, for example, write
$font-family-sans-serif: 'Gill Sans';
and that will replace Helvetica as the default sans-serif font for all elements.
Look here for all the customisations you can make to your code whenever you wish and not just while downloading Bootstrap if you use Sass.
In html change to
In CSS change "body {}" to ".body {}"
This is because a CLASS is more specific than a tag, and so it will take the rule over the main bootsrap.css which only classifies as a tag.
I have a boilerplate I've created that I use to create bootstrap themes, that will generate docs using the theme you've created. I've implemented this at companies that use it across multiple web teams in order to get a branded result while just using basic bootstrap components.
Check it out here: https://github.com/patrickleet/bootstrap-override-boilerplate
There are instructions in the README
For Bootstrap 3.3 Add the following BG Style.
body{
background-color: gray !important;
}
Source : from Bootstrap 3.3 Guide.
I'm developing a Wordpress theme and I am using the Bootstrap framework. One of the styles in the Bootstrap CSS file is:
input,
textarea,
.uneditable-input {
width: 206px;
}
It's affecting my search button, so in my CSS file I'm going to have to re-declare its style as width: auto;. I'm just wondering if this is a standard practice, or if there is a better way as to implement such frameworks.
Yes when you are using CSS frameworks, you will have to override unwanted styles by duplicating the styles. You can ofcourse edit the original CSS in the framework, however you'll lose those changes when upgrading to a newer version. In case of Bootstrap you can edit the LESS file and generate a new CSS
in my <head> tags, ive placed the location of bootstrap.css
if i place <div class="container"> it creates a fixed width.
what i wanted to happen is manipulate the default values of the container width by importing another set of stylesheet.
another scenario is, if i placed a span8 how do i put background colors on it without actually editing the bootstrap.css rather, customize it using a new stylesheet.
does putting 2 stylesheet possible? then inherit / manipulate all values in the bootstrap.css in a new stylesheet?
i apologize if my explanation aren't that clear. its kinda hard to express verbally what i wanted to happen. :)
When you add a second stylesheet, you can override rules of the first one. Just make sure you add them to your html page in the right order.
If you want to make sure a rule won't be overridden you can add !important to it. Example:
.example {
color: red !important;
}
Yes it is possible. That is what the "Cascading" part of CSS is. Short answer is to add your own style sheet after the bootstrap.css and before the responsive.css and your styles will be used because they are the latest definition, i.e. the rules "cascade" down.
Long answer is take a look at the docs. There's a lot to learn there if you have the time.
Also have a look at the bootstrap customization page