I am using Bootstrap 3.x with a table definition like this
<table class="table table-hover table-condensed table-striped table-bordered">
Pretty standard stuff
I want to reduce the default vertical padding on the cells - want to reduce the padding on cells further. I know that table-condensed reduces the vertical padding by 50%. I want to reduce it to just 1px.
Where do I make the change? I have tried going through bootstrap.min.css but can't find anything to modify there - nothing I understand
Many thanks in advance
Best wishes
Iyer
It's pretty easy if you know how to use inspector tool of your browser (Right click->Inspect Element). If you want to learn CSS this would be a very important tool.
So find this property:
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
padding: 5px;
}
which has padding: 5px;, change it to 1px.
Here's how it looks when changed.
Note - Instead of modifying the .table-condensed class which will all tables which use this bootstrap class, it could be more advantageous to make another class (say table_morecondensed ) as below...
.table_morecondensed>thead>tr>th,
.table_morecondensed>tbody>tr>th,
.table_morecondensed>tfoot>tr>th,
.table_morecondensed>thead>tr>td,
.table_morecondensed>tbody>tr>td,
.table_morecondensed>tfoot>tr>td{ padding: 2px; }
+1 "Inspect Element" ... tells you exactly what the settings are per element and where they are coming from. Invaluable tool for working with the layout.
As for customizing Bootstrap (v3 at least), I believe Site.css is the local site-level override file ... so DO NOT change the core bootstrap css files ... instead just add override styles into Site.css and make that your personal file. If the style overrides don't appear to take, add the !important tag to them. And if you ever update your bootstrap package be sure to save a copy of your Site.css so you can reapply your customizations.
Related
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I am sorry beforehand if question is stupid, but this is my first project.
I got html.css layouts from HTML/CSS-coder, and for each view they made separate html and separate CSS file.
But I am developing SPA, so there will be one page as an entry-point. Obviously, it should contain all CSS files for all views. The problem is that some of the CSS files contain classes with the same name, but different content. So if I just put list of CSS files in the entry html, some views become a mess, because they use wrong classes.
Thanks a lot.
As I see that my question is not being understood, I decided to give example:
File1.css, used in view1:
.class1 {
cursor: default;
}
File2.css, used in view2:
.class1 {
cursor: pointer;
}
Obviously, I need both as is and cannot use !important; as this will make a browser to use only one of them in both view1 and view2.
What is correct approach to solve this? Ask html coder to re-name classes, or do it myself? Or is there some tool that can somehow consolidate CSS files automatically?
Also, how usually html/css layouts should be coded for SPA to avoid this situation?
UPDATE 1
I appreciate efforts the SO community made to help me though question is indeed could seem vague. I've already learned a lot from all answers.
The situation is much clearer for me now.
The problem in many projects such as yours is that developers do Not do what they are supposed to be doing in standard manner. The correct approach to manage CSS Files in more than 500 lines of CSS Code is to follow Modular, Structured Patterns such as BEM. These Standards guid you through the right choice for the naming conventions and writing Css Components.
For example in Twitter Bootstrap they use components and utilities to manage large projects and avoid such collisions.
Your way to get out of it
You have always the chance to write your styles inline inside the html code. This would bring a high specificity and will override Clas Based CSS of the files included.
You could provide a .css file of your own and include it after all that developre's css and !important all the mess or with the help of high specificity like ids make your CSS win!
Forget about the whole CSS They provided you and start using a framework like Twitter Bootstrap or Zurb Foundation.
Yes you are going to have to go in by hand and re-code the classes. Additionally You can add id's or an extra class to whatever section you are currently styling.
For example: <div class="CSS-coder" id="myExtraStyles"> or <div class="CSS-coder myExtraStyles">
!important will override most styles. But it would be better to edit the current classes that wont be sharing style attributes.
Additionally remember that "Cascading" means from top to bottom. So any styles loaded after the default styles will override the styles loaded before it.
I agree with the other poster in that a "framework" is the way to go.
Good luck with your project.
If I understand correctly, it seems as though you need to use parent / child selectors depending on which view it is:
file1.css:
.view1 .class1 {
// Styles
}
file2.css:
.view2 .class1 {
// Styles
}
To achieve this, look at each view and see if there's a top-level element you can append a class to, such as the <body> tag:
<body class="view1">
<div class="class1">
AND
<body class="view2">
<div class="class1">
This removes any need for !important (stay away from that as much as you can!)
EDIT
Re-reading your question I think I have a better idea now as to what your actual problem is.
What you can do is to find or add a parent element that you can use to filter out the styles.
Let's say you link to those 2 CSS files and both of them define a style like so:
/* First CSS file */
.sub-div {
background-color: red;
}
/* Second CSS file */
.sub-div {
background-color: blue;
}
On your HTML, look for a parent element that you can use.
<div class='red-only'>
<div class="sub-div"><p>View 1</p></div>
</div>
<div class='blue-only'>
<div class="sub-div"><p>View 2</p></div>
</div>
Create a custom CSS (you should link to the file last).
.blue-only .sub-div {
background-color: blue;
}
.red-only .sub-div {
background-color: red;
}
When working with css, the order is important.
The file that is declared last will have the highest precedence.Now with that in mind if you have
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
Then the code specified in file2 will override the code in file1, only if they have the same specificity. Meaning that the more specific declaration will trump even if it is declared in file1. So if you want to override a rule in file1 you will need the exact same declaration in file2.
When working with files created by others like bootstrap or similar it is preferable to create a new file.
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
<link href="myStyle.css" rel="stylesheet" type="text/css">
This will help you avoid trouble that might arise from modifying the originals.
The code inspector in chrome and firefox will be helpful when you need to check wich classes are applied to a certain element.
It might be that your element is applying a class that overrides the one you are trying to apply to the element. For example:
<div class="class1 class2 class3" ></div>
Class3 might override parts of class1 and class2, because it is the class applied last. Like i said, in CSS order is very important.
Do not use !important if possible. You might want to override values later on, and with !important will become difficult to do so. Verify if there are !important declarations in file1, because these might be the ones causing you trouble.
Are you using a programming language? Or just CSS/HTML markup? If you use a programming language (what I suppose, as you got one entry point) you could simply make a big switch statement, check the current view and then inject accordingly the appropriate css file.
I have a wordpress site and all tables seem to be borderless as far as I can see.
When I check it with Firebug I can disable css initialization for <table> element and design seems to be OK. Firebug tells me the CSS code is set in theme's style.css file. I open the file and check the content but there is no such line.
After this I choose a worse way to manually set the style attribute of my <table> HRTML element as follows. I also apply !important directive to override anything.
As far as I can know the style attribute of an HTML element overrides all CSS and previous (inherited or not inherited) style declarations. Also the !important also makes it undestructable. I have used both I still can not make it work.
What am I possibly doing wrong and how can I fix it?
Regards.
P.S. : You can check the faulty content # http://pmiturkey.org/hakkimizda/uyelik/
The table as the bottom of the content.
OK, I played a little with firebug in your website here and had to do a few things:
1) Remove border="1" in that same table
2) Change from style="1 border #000 !important;" to style="1px border #000;"
These changes solve your problem.
EDIT
In order to draw borders around each cell of the table instead, proceed as follows:
1) Remove the table's style attribute
2) In your css file, add the following:
th, td {
border: 1px solid #000;
}
This should add borders around each table cell of yours. Hope it helps!
Well for starters you aren't adding a color to your border border: 1px solid red;. The borders are probably being removed in a css reset. You can add css to the bottom of your styles.css file and that should override any reset.
Also.. are you wanting a border around the table, or a border between the table rows? You might want to specify what exactly you want.
I am currently developing a website for a school task. I am quite new to HTML and CSS, so I don't know much about how I would do this.
I would like to change the default colour of the twitter-bootstrap UI on my div class="well" that located on the center of the page to #BA935A.
My website can be found here. So I just need an idea of how I could do it.
I'm not sure which color you're referring to by "default color", but this page shows the less values you can override in your stylesheet with the color you want to use. So if you wanted to change the background color, you could add an entry in your less stylesheet for #bodyBackground that is set to #BA935A.
Open your source code, find following Snippet:
<style type="text/css">
html,
body {
background-color:#20437D;
}
</style>
Change the #20437D to #BA935A.
You would get what you want.
I just went through the answers, since I had an almost similar question. This is how I solved my problem (Based on the answers) to override default bootstrap properties.
<div class="well well-lg text-center" style="background-color:#EC031E; !important">
This well has a Dark Red Background!
</div>
PS: I know its pretty late to answer this question, but I just hope this helps somebody wanting similar customization!
Actually your question are not so clearly, but I'll share how to forcing our class on bootstrap class that I done.
If you want to change color, you can just change on the html directly manually like:
<div class="well" style="background-color:#88B5C2;">abc</div>
But if you want to use your own class. You can add !important. I give you an example how I forcing my style to my bootstrap class:
css part
.mystyle
{
background-color:#88B5C2 !important;
}
html part
<div class="well mystyle">abc</div>
If you're not using !important the style still can be applied, but for more secure please using it, so your style would be prioritize than Boostrap's style.
I've got an embedded widget from The Weather Channel and everything is working fine except that they've got a <tr> with a 1px height image that is expanding to a height equal to the other rows.
It's shifting the rest of the content down. Because it's just an embed, there is only so much of the styling I can control. But I figured it must be inheriting something from my stylesheet since it had inherited some line-height that I had to correct.
If you visit http://www.scwd.com and scroll to the bottom you'll see the weather widget. The row with the grey td below #weather.com is the issue. It should only be 1px in height. I've used multiple debuggers to see if I could find the inherit and I cannot. Any help would be great.
-- UPDATE --
Not the most elegant solution considering variable within the widget and out of my control may change in the future. But as David suggested, I solved it with the following.
<script type="text/javascript">
var x = $("img[src$='blank.gif']");
$(x).closest('tr').css('display', 'none');
</script>
Best I can find is:
Inherited from div#wx_module_6107.wow_container
.wow_container {
line-height: 14px;
}
Are you hosting this or pulling the HTML from a foreign source? I suspect you can't control the HTML that's being rendered or the CSS that it's using?
I'm no CSS expert, so thus far nothing I've tried in FireBug have made a difference without affecting the rest of the table elements in the widget.
Unless someone can give a CSS solution, maybe some JavaScript can get the job done? You should be able to, on document ready, find that img element (maybe by its src?) and from there (using something like .closest() in jQuery) find its parent td and parent tr and with those element references explicitly set their styles.
The image is in a td which has a line height of 14 according to your css:
.wow_container { line-height: 14px; }
I would give it a line-height of 1px and set the background-color to transparent. That makes things look nice for me. Is this widget coming from a wordpress plugin? If so which plugin? You may be able to edit the plugin code yourself.
I think the problem occurs because the font-size of the body. My suggestion is to add font:1px Verdana,Arial,Helvetica,sans-serif for the td that is the grey row.