I'm trying to get rid of the "border-top: 1px solid #dddddd;" for a specific table on my Bootstrap site.
Making the change using inline styling works as expected:
<td style="border-top:none; font-weight:bold;">
However, when I try to add this into the bootstrap.css file, the font-weight is applied, but the border-top is not:
<td class="notop">
CSS (have tried with '!important' as well):
.notop {
border-top:none;
font-weight:bold;
}
Any suggestions as to why this would work inline, but not via CSS?
Initially I was going to suggest that it was happening because of the cascading nature of style sheets, but you said you used !important
Just to check, your code with !important looked like this:
.notop {
border-top:none !important;
}
Sometimes CSS can be really funny with how !important is used.
Also, is the CSS sheet external, or embedded? Again, the order of sheets can often cause weird errors like this.
Edit: Also, if it's an external style sheet, make sure it's included after the bootstrap CSS.
Related
I am trying to change the color of the banner in the Jekyll leap-day theme, here https://github.com/pages-themes/leap-day/blob/master/_sass/jekyll-theme-leap-day.scss
To do that, I have added an assets/css/style.scss to my github page, with the following contents
---
---
#import "{{ site.theme }}";
#banner {
background: #a90000;
border: 1px solid #3399cc;
}
But nothing changed. How can I overwrite these values of the banner div in SCSS?
There are a number of reasons why this might not be working. Without being familiar with the output and html you are styling here are some things you should check (all of which you can check through browser developer tools. e.g. Chrome DevTools )
The element with id="banner" exists in your html and is visible.
Your additions to the SCSS are actually being included and are being applied to the element. You can check this in Chrome developer tools by inspecting the element. Under styles you should be able to see your style rules alongside the others. If you can't then it you may have a selector issue, likely caused by some earlier nested styles. (If you have also ruled that out, and your additions are not appearing anywhere in the output then something is going wrong with how you are building and fetching your SCSS).
If you can see them but they have a line through them, then they are being overruled by rules with a higher CSS specificity. You can fix this by making your selectors more specific. E.g.
div#banner {
background: #a90000;
border: 1px solid #3399cc;
}
Or perhaps
.someWrappingClass #banner{
background: #a90000;
border: 1px solid #3399cc;
}
Bearing in mind that these will change how they are selected - which could be an issue later if the HTML changed.
Really how you fix specificity issues properly will depend entirely upon your HTML, how you structure it and how you might change it in future. There really is no substitute for just learning how cascade and inheritance works.
I tried to change the fonts and styles in my joomla website, and to achieve this I installed the following plugin:
Consequently the body font was changed, however the inline styles were not.
How can i disable or remove inline styles, like the following one?
<span style="font-size: 14pt; font-family: 'arial black', 'avant garde';">Test</span>
I need a lot help :)
From the looks on the image it appears to me that this plugin of yours uses CSS selectors to choose which elements it will affect.
Given that my assumption is correct, if your span tag is not being affected its likely because there is a conflict in the CSS selection order.
My suggestion to fix your problem is to add a specific class to your span tag, like for example <span class="myNewShinySpanTag"> and then add the line span .myNewShinySpanTag to the text box of your plugin.
Hope it helps!
good way is find the inline css and remove it.
but if you can not find it you can write an high Priority css to disable this properties.
you should find an unique selector for this code:
span
{
font-size:unset !important;
font-family:unset !important;
}
I am using input-group input-group-lg classes to add styles to textarea.
The border is not being applied to the textarea.
Default value for the border is 0.
in bootstrap.css if we modify
.input-group .form-control:first-child{
border:1;
}
Then i am getting border. How can i apply this style to my_styles.css which is in my project.
I pasted above selector in my css file and used !important also and not getting border.
Thanks in advance.
You defined border: 1, what 1? One apple, one meter, one pixel?
Complete border definition is border: 1px solid #000 (width type color), if you only want to change border width, use border-width: 1px;.
Do not use !important unless you really really have to.
To override the existing styles, make sure you load your CSS files after the bootstrap one. Then, make sure your rules are at least as specific as those in the original CSS file, only like that you can override them.
Here is a nice tool for comparing specificity: http://specificity.keegan.st/
Also, make sure you follow the proper syntax for each CSS rule. The example you've shown is not valid CSS therefore it should not work, ever. Look at #panther's answer for detailed explanation.
I am having trouble getting my CSS to look right. I want alternating colors in my table, but it doesn't seem to be working. Here is my CSS:
table.className tbody tr:nth-child(even){
background-color: white;
}
table.className tbody tr:nth-child(odd){
background-color: grey;
}
Your code looks good. Could be two things, your version of IE that you are using is to old (IE8 and below I believe doesn't support this), or you have these styles being set elsewhere with a !important attached to them.
Without seeing the HTML, there are a couple of possibilities:
The class name doesn't match
The tbody tag is missing (either way, tbody isn't needed in the CSS selector)
There are a couple of reason as to why this may not be working for you. First the CSS code that you are using is CSS3 and may not be supported in the browser you are using: http://www.impressivewebs.com/css3-browser-support/
Another reason this may not be working is that you have included the "tbody" tag in the CSS which indicates that your html table is setup as such. This is actually a tag that some developers forego, if you html table does not have a "" tag then you must remove it from the CSS in order for this to work.
Given that its been established that you are using IE8 which doesn't support :nth-child in CSS, you can achieve the same thing using jQuery for better cross-browser support:
$(function() {
$("table.className tr:nth-child(even)").css('background-color','white');
$("table.className tr:nth-child(odd)").css('background-color','grey');
});
Have a look at this picture
alt text http://www.abbeylegal.com/downloads/2009-04-01/web%20part%20top%20line.jpg
Does anyone know what css style is used for the line/border highlighted in red? I'm trying to over ride it in my custom style sheet but I’m not having any luck, so far I’ve tried overiding these different styles...
.ms-viewheadertr
.ms-vh2
.ms-vb
.ms-vb2
.ms-unselectedtitle
.ms-summarystandardbody
which is changing the display but not the border, it's enough to make you go mad!
Update:
.ms-WPHeader is indeed one of the css classes, however if you set the border-style to none there is still a line that appears; just a little thinner. I can use .ms-viewheadertr to completely remove the header but just can't seem remove this one line.
Why don't you use firefox & the firebug addon to work out which classes to override?
Are you using !importance to override the css classes?
I work intensively on customising sharepoint UI. So i know for sure that the class you should be looking at is the following:
*.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-image:url("/_layouts/images/viewheadergrad.gif");
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
background-color:#f2f2f2;
}*
You should remove the image reference in the background-image property like so:
*background-image:url("");*
That will remove the dark greyish line on top.
Happy Customising!!!
Chrome seems to suggest that it's the iframe (id Filterlframe1) that's the culprit:
border-bottom-style: inset;
border-bottom-width: 2px;
Clarification: the Sharepoint list view uses an iframe for the menu bar at the top - that's where the border is being rendered.
Well, after playing in the IE8 dev toolbar, I came up with:
<tr class="ms-WPHeader">
CSS props:
border-bottom:#4e7cb7 1px solid;
border-collapse:collapse;
Check out Heather Solomom's SharePoint CSS reference at http://www.heathersolomon.com/content/sp07cssreference.htm.
Browsing through the webpart specific section at http://www.heathersolomon.com/content/sp07cssreference.htm#WebParts, it looks like this might be ms-WPBorder perhaps?
Hope this helps.
I reviewed each of the responses and none of them was successful. The key is the color of the line "#4E7CB7". I then searched the root CSS files on the server and at line 2683 of the CORE.css I changed the
.ms-WPHeader TD {
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
to
.ms-WPHeader TD {
border-bottom:0px solid #4e7cb7;
border-collapse:collapse;
}