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.
Related
I have 4 pages with iframes that are coming back with the following error 2.4.7 Focus Visible - Highlighting elements. While it does not specifically say anything about the iframe, the only pages with this issue have iframes. I have attached the only CSS associated with iframes and the iframe itself.
Hoping someone has some insight on what exactly WCAG does not like.
<style>
.yt-frame {height: 270px;width: 100%;}
iframe {border: 1px solid black;}
</style>
<iframe src="https://www.youtube.com/embed/VIDEOID?html5=1&rel=0" title="Video From YouTube" class="yt-frame"></iframe>
Based on your follow-up comment, it sounds like SiteImprove is considering the style on the <iframe> itself to be the error. WCAG 2.4.7 is a general message for anything that can receive focus.
SiteImprove may be seeing the <iframe> as something a user can tab to. As a result of that assumption, SiteImprove is noting that there are no styles for a focused <iframe>.
I am suspect of the heuristics SiteImprove is using here. For example, Firefox will use an <iframe> as a tab-stop, but Chrome won't.
Regardless, try adding a style to give it (and everything else) an outline on focus (though Firefox won't apply it to the <iframe>):
:focus { outline: 2px solid #f00; }
See if that satisfies SiteImprove. If it does, then you can be more specific with the style and satisfy the automated test (if that is your goal) without leaving the style on every other element that can be focused:
iframe:focus { outline: 2px solid #f00; }
Siteimprove had a bug in how they were flagging those. In the past few days, their devs have fixed it and my errors are cleared now. Check yours again!
When I add bootstrap on my html link it changes some of my css code.
Pre-bootstrap:
After-bootstrap:
Bootstrap link:
Css code changed:
#bannerRodap{
background-color: black;
position: fixed;
width: 100%;
height:80px;
top: 88%;
}
#bannerRodap p{
position: relative;
top: 25%;
color: white;
text-align: center;
font-family: 'Helvetica',sans-serif;
font-size:0.8em;
}
And besides that, bootstrap also added this little blue thing under my flex-box container.
Yes the CSS change you experience is bound to happen, it is one of the typical disadvantages of using Bootstrap. Like the name itself suggests the framework "Bootstrap" makes its complete CSS available to your entire project. Real problem is the immense code the bootstrap.css contains even though the programmer doesn't even need most of it(more than 3000 lines). I have taken a very small snippet from the file(bootstrap.css) to explain:
a {
color: #337ab7;
text-decoration: none;
}
a:hover,
a:focus {
color: #23527c;
text-decoration: underline;
}
This means all the anchor tag(<a>) in your project would have the color #337ab7 by default UNLESS you override this style to what you need in your own stylesheet. The real problem arises when you see other elements in your project changing its behaviour according to the bootstrap CSS but you really didn't want them to - In this case you need to override the styles coming from bootstrap.css just say in a way to cancel out the bootstrap styles you need to write your own unnecessary styles to make it look normal.
That's the reason when you ask most of the experienced UI devs about bootstrap they would just go ... ** yuck **
Your own stylesheet starts to get really messy.
HTML gets messy especially when you start using the grid structure of bootstrap
Huge unwanted code(from BS CSS/JS) lies in your project even though you will never ever need all of them.
Even the order of the stylesheets included hardly makes any difference. In your case use the Dev Inspector to see whats causing the blue thing(probably a shadow from boostrap) to appear & remove that by overriding the styles in your own stylesheet(in this case, your stylesheet should be included after the bootstrap.css)
Imo, bootstrap should be used mostly by those who need bootstrap to do everything about the look & feel of their project with very little customisation to do on their own. If you have heavy customisation of your own then might as well write you own CSS from the scratch without including BS.
I have been forced to use !important in css. There is probably another way to get this done, but I am doing it because I only want a specific subset of an already styled class to have a different style. The situation is with jQuery's datepicker. In datepicker, I am setting certain days to have different priority colors. This end result is that the td element holding the <a> which holds the date gets the class name
.date-priority > a
{
background: url("") red;
border: 1px solid yellow;
}
However, this change gets overridden because there is a more specific rule for that anchor tag, it specifically has a class on it. I do not want to change all elements with that class, only to override a few of them. So, I decided to use !important in the previous definition
.date-priority > a
{
background: url("") red !important;
border: 1px solid yellow !important;
}
It works. But it just does not seem to be best practice. Is using !important a hack in general, and more specifically in this instance?
HTML:
<td onclick="
DP_jQuery_1348602012259.datepicker._selectDay('#date',8,2012, this);
return false;"
title="Available" class=" ui-datepicker-week-end date-priority">
29
</td>
If this is the case, just add a separate rule for those elements:
.date-priority > a,.date-priority > a.className {
background: url("") red;
border: 1px solid yellow;
}
Demo: http://jsfiddle.net/Blender/rCyjV/
The only reason !important is frowned upon is because it makes future additions to the CSS possibly frustrating.
Short anwser: no.
Long answer: !important is thought specifically for situations where you don't want a rule to be overridden by successive declarations. In addition, the "weight" assigned to the selectors (most specific = most important) is not always the behavior that a developer wants.
From W3C specs:
Both author and user style sheets may contain "!important"
declarations, and user "!important" rules override author "!important"
rules. This CSS feature improves accessibility of documents by giving
users with special requirements (large fonts, color combinations,
etc.) control over presentation.
So definitely it's not a hack :-)
I'm trying to create an alternate design to a site as a fallback. I can't really change how the system is architected. A main stylesheet is loaded, and a second is loaded after it. I have control over the second stylesheet. There's a lot of the CSS that I want to reset, specifically form elements.
However, I'm having difficulty with that. For example with a <button>:
background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;
While I can set background: none, border-radius: none` and so on, what happens is the button has no style, rather than the default browser style. I have to get the form elements to be the default browser style, among many other elements on the page. But I can't seem to get at least the form elements to be unstyled.
For Clarity
Simplifying the question: How does one re-style a <button> back to default?
I would suggest using a CSS reset as a starting point (Eric Meyers' is probably the most famous).
I think you're running into trouble on things where you don't want to set your own style, but return it to the browser default (e.g. you don't want margin:0; on everything, you want the default big margin on the H1, the default smaller one on the p, etc.
You can actually get copies of the user agent stylesheets, modify them to make them more specific, and include them to overwrite. Here is a site that has copies of a lot of default UA stylesheets. A problem here is that every browser uses their own, so unless you browser detect and serve selective stylesheets, it's not going to really look like it normally does for that browser. However, I think that's ok. I'd actually suggest you just pick a browser default you like and set all browsers to look like that, or you can use the W3C's suggestion for default browser styles.
All of this doesn't solve your problem though, because styling form elements is hell. As soon as you apply a style, some browsers will switch the rendering mode for the form element so you can never get it back to the original style. For example, IE7 doesn't support rounded corners, yet their default buttons have rounded corners, because it renders in Windows OS style. But as soon as you give the button a border, or some other style, it loses that nice Windows shaded rounded corner default look, and there's no way to get it back without using an image!
So really, I wouldn't shoot for trying to get browsers to go back to their native default style. I'd use a UA default stylesheet, and then modify it so make a sort of generic, cross-browser, cross-system default. It won't look like the native unstyled code, but it will look close enough.
You need to understand how CSS specificity works. You can overwrite any CSS rule, by making it more specific than other rules.
For example:
<div class="content">
<div class="wrapper"><span>Hello World</span></div>
</div>
CSS:
.content .wrapper span { ... }
.wrapper span { ... }
In this case the first declaration will overwrite the second, because it is "more specific". You can usually just go up the tree one level and specify the wrapping element or the wrapping class to override an inner element's rule. This is really handing on a lot of CMS systems, such as WordPress, where you don't have access to the main stylesheet, or just want to leave it alone and re-skin the parts you want.
Read the article, it's important.
CSS Specificity: Things You Should Know
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;)