Hi I'm using blueprint and for some reason I can't override some of their built-in styling (screen.css). So far I've tried:
#asset-index-desc .container
div
li
:border dashed !important
...and this does nothing. I'd appreciate any help.
Does your SASS-created CSS come before or after screen.css? The one that comes after should override the one that comes before.
Look at the styles with Firebug for Firefox -- it has a really good UI to see what styles are active and which have been overridden further down the chain.
hmm I can think of a few things:
1) try adding color and thickness: i.e.
#asset-index-desc .container
div
li
:border 1px dashed red !important
2) I presume that the code you provided is not as it appears in your document as otherwise you would get a Sass error about the div tag being too deeply nested.... :)
3) the following does NOT work in my own app,
#sidebar
div
li
border: 1px dashed red !important
BUT if I remove the div tag, then it's all good:
#sidebar
li
border: 1px dashed red !important
Hope this helps.....
I LOVE Sass and blueprint.... Especially with compass gem. It takes all of the pain out of styling....
Don't know exactly what you are trying to override, but you may need to get more specific in your selector. Maybe add an additional class to the markup and reference the additional class in your style sheet
Related
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'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.
I'm trying to achieve this:
But the best I can get is this:
You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.
I could just add a css line in like this:
.ui-tabs-vertical > .ui-tabs-nav li {
border-bottom-color: #C5DBEC !important;
}
But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.
Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:
.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }
And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.
What I've done to attempt to revert this css line is this:
.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }
Note that again, I'm not touching the border-bottom-color here.
The result of this, at least in firefox, is this taken from firebug:
For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.
Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.
Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?
Use #hexblot's answer and get the color dynamically.
To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.
+1 for trying to find a clean solution, without hardcoded stuff.
just add
.ui-state-active { color: #2E6E9E !important; }
and you should be ok. updated the fiddle with this line in the CSS (last line).
My browser extension embeds a div item to webpages opened by browser on the fly. div contains several children items such as buttons, spans, input boxes etc.
Problem is when div is inserted to page, page's css affects the div and it's contents.
For example if the page has a css such as :
span {
text-shadow: 1px 1px 1px blue;
}
then the spans in my on the fly added div have blue text shadows. What i'm doing to fix this is to set any possible directive that might affect my div's content with !important, like
mydiv span {
text-shadow: none !important;
}
and it's rubbish.
Is there any sane way to override css for a given item, that'll take it back to browser (google-chrome) defaults?
Thanks.
Is there any sane way to reset the css to browser defaults for only a single item?
Sadly, no. The auto value will act as the default under some conditions, but not always, and you still have to specify it for every possible property. This is something about CSS that really sucks.
One idea comes to mind, though. Seeing as you're asking specifically about Chrome, if you control all the CSS classes and don't mind some clutter, you might be able to work with CSS3's not like so:
span:not(.default) {
text-shadow: 1px 1px 1px blue;
}
If you use not(.default) in every CSS rule, you can have elements that have the default behaviour if you give them the default class:
<div class="default">
I have no personal experience with CSS 3, but this should work. It will not work in older browsers, so it's not (yet) really mainstream compatible.
You cannot "reset" css rules, you have to override them (text-shadow:none;)
I need to change all the CSS into SASS... and find that
margin:10px
working in CSS and failing in SASS somewhat disturbing...
It is easy to miss one and you don't what you are missing (what is not working in the final CSS but you don't know)
Pretty much I am grep for /:\S/ (colon by followed by a non-whitespace) to see if there are such cases, using TextMate (a Mac text editor)... but those a:hover also shows up as well.
In Sass you can define nested selectors, and these can have pseudoclasses such as :hover. It doesn't see your margin as an attribute but as another element with a pseudoclass.
.stylin
display: block
margin:10px
a:hover
color: red
The above will recognize display: block correctly, but it will see margin:10px and a:hover as the same kind of pattern.
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;
}