I'm trying to modify my website based on a CMS which relies mostly on Bootstrap. I saw that after compiling sass files, in the compiled CSS I have both the default css selectors and the overridden ones. For example:
template.css?d544b92…:12881
a {
color: #1d60a1;
text-decoration: none;
background-color: transparent;
}
template.css?d544b92…:264
a {
color: #1d60a1;
text-decoration: none;
background-color: transparent;
}
The overridden ones are used, as expected but, though, having both in the compiled file makes it much larger. If someone could give me a little help I would really appreciate it. This is the normal behavior of bootstrap( v4) or am I doing something wrong?
Related
I've added some custom CSS code to a Wordpress.com theme to alter link formatting. (I'm a beginner, but I attempted to research this and found some code that looked reasonable.)
Chrome is getting it about 90% right and FF about 10% right. Is this inevitable and I should revert to theme defaults, or is there something I can do differently to make this change work in common browsers?
To be more specific, "border: none" is working in both browsers, but the custom color for the link is usually missing in FF--which means no one but me can tell it's a link. Even in Chrome it's only usually the right color. And, the color I set for "active" isn't displaying at all. Meanwhile, the block quote change is rendering in both browsers.
All I added was this CSS (added in the edit window they provide which by definition means it's at the end of the total CSS for the page, so that should make it override or inherit, I thought).
div.entry-content a:link {
color: #2C60BA;
text-decoration: none;
border: none;
}
div.entry-content a:active {
color: #3A93BC;
text-decoration: none;
border: none;
}
blockquote {
float: none;
width: 24em;
margin-left: 2em;
}
Thanks for any comments.
Have you tried to remove the :link, and just have:
div.entry-content a {
color: #2C60BA;
text-decoration: none;
border: none;
}
Also, just in case your theme has overrides for visited links, you might also want to include a rule for visited as well to be sure:
div.entry-content a, div.entry-content a:visited{
color: #2C60BA;
text-decoration: none;
border: none;
}
Bryant provided the key insight in his first answer and my problem, after further experimenting, is now fully solved (see commments). I'm new here and not sure how to mark this resolved, but am guessing this is how to do it. Thanks again.
i am kinda new to LESS, but already can see it's huge power of building huge design frameworks / systems.
I'll try to reduce my question as simple as i can, and hopefully i will got lucky with some help!
So, let's say i have build Framework (something like Bootstrap 3), that have a lot of own components, which have their own rules, variables to base etc. And than i have theme which of course can overwrite those variables to change style.
But what if i need to add some specific rules, which haven't been presented before?
// FRAMEWORK
#btn-font-size: 12px;
#btn-line-height: 1;
#btn-border: 3px;
.some-component .menu > .btn {
font-size: #btn-font-size;
line-height: #btn-line-height;
border: #btn-border solid transparent;
}
// HERE STARTS MY THEME
#btn-font-size: 16px;
#btn-border: 6px;
.some-component .menu > .btn {
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
And you would ask, so what's the problem here? You should just get what you want with this approach.
But problem lays in my intention to build optimized code, which would be lot less in size, more readable, logical and won't ruin some of dependencies (so for some complex components i won't have to do some additional edits, just to add few things).
In plain simple words, i want it to compile like that:
// FRAMEWORK
.some-component .menu > .btn {
font-size: 16px;
line-height: 1;
border: 6px solid transparent;
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
So the idea is to extend framework, not to overwrite classes.
To do so i was trying all kinds of mixins, extends, variables with rulsets etc, which ain't seem to help or to be enough specific.
Any ideas would be greatly appreciated, because there seem to be no native LESS solution, but maybe some tricks?)
Also see: How to keep duplicate properties in compiled CSS file when use LESS?
Since Less v2 you should use the Less Clean CSS plugin to compress the css output from Less using clean-css.
Clean-css will merge your properties automatically.
Compiling your code with lessc --clean-css code.less outputs:
.some-component .menu>.btn{font-size:16px;line-height:1;border:6px solid transparent;margin-bottom:12px;letter-spacing:.3px;background:FFFFFF}
I'm working on a jQuery theme which includes styling for as many form elements as possible.
Initially it was developed for Webkit (Chrome). Now I want to make it work with Firefox as well.
Problem is; Firefox has problems with some Webkit-specific syntax.
For example:
input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x;
}
The problem is the input[type="range"]::-webkit-slider-thumb, bit. Remove it and Firefox works fine. It also does this for other syntax like ::-webkit-file-upload-button, ::selection and all other things using the ::-webkit-... labels. It recognizes it's own ::-moz-... labels, like ::-moz-selection just fine though.
Webkit seems to just ignore the ::-moz- labels.
Is there any convenient way to make Firefox ignore the ::-webkit-... labels or otherwise deal with this problem without having to maintain multiple copies of every CSS block?
Using freshly updated versions of Chrome and Firefox.
Unfortunately, it's not possible without duplicating the declaration blocks, as the CSS spec stipulates that browsers must behave this way when encountering unrecognized selectors in CSS rules:
The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.
In this case, it's one vendor's browser being unable to recognize another vendor's prefixes, so it has to ignore the rule.
I had to read a little bit to answer this question, here are some good resources,
Gecko Style Engine Further Reading on the Engine Implementation, Still i did not see any pointers as why it would drop it, but i can give you my best guess, I think the engine is dropping the whole selector, suppose that mozilla implements -moz-slider-thumb pseudo selector and try to use it with -webkit- and it will be dropped as well.
I have seen this behavior before in all browsers, and i think its being used as a hack to target some browsers sometimes.
This will work
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
This wont
input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
or this
input[type="range"]::-moz-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
I think you will have to rewrite the properties-values on two or more different selectors, this will only affect the size of the stylesheet as the engines will keep dropping the selectors they dont own.
I really hope this helped a little bit at least.
EDIT:
As noted by user #BoltClock in the comments my guess was correct here is a link to the spec w3.org/TR/css3-syntax/#rule-sets
FYI, I ended up going for a different solution.
Since my end product is a stylesheet, I decided to use a CSS compiler to generate the .CSS file based on a source file. So far it's working fine.
I've used LessPHP because the .less format is reasonably popular and I'm familiar with PHP, but any of the other ones will do.
Note that I'm using LessPHP only for compiling a static .CSS file, so it won't be a requirement for end-users of this project unless they want to change the .less source files themselves.
I'm developing a Grails app and I need to modify some elements' style. I tried to add a css class to the main.css file but it is not working.
In /web-app/css/main.css:
.artistItem {
background-color: #444;
border: 1px solid #fff;
padding: 10px;
color: #ccc;
width: 200px;
}
In the .gsp:
<div class="artistItem">Some text</div>
But the div remains unchanged. Am I missing something?
Thanks!
This isn't a direct answer
Playing around with CSS in grails can be a little frustrating for someone that hasn't had a lot of exposure to CSS in general (I'm speaking form experience). Grails provides a nice clean CSS for a good starting point but trying to build on it without understanding CSS can cause some pain.
I would recommend looking at a couple tools like FireBug for firefox or Chrome's built in developer tools, IE also has a nice developer tool. These tools allow you to see how the browser is rendering your page and what CSS elements are being used or not used. They also expose the javascript console and several other nice debugging tools. I believe this are essential tools to help understand what the browser is doing.
I hope this helps!
Try:
.artistItem {
background-color: #444 !important;
border: 1px solid #fff !important;
padding: 10px !important;
color: #ccc !important;
width: 200px !important;
}
If that works, then you know there is another css stylesheet overriding it. If not the css is not being included properly.
I'm using Disqus external comment system with Wordpress (as a WP plugin) and I'm trying to customize it with my custom CSS.
Everything works great, but I have problems with replacing the default text color in the form textarea.
I tried it with:
#dsq-content .dsq-textarea .dsq-textarea-wrapper, #dsq-content .dsq-input-wrapper { color: red !important }
but I was not successful, even when I targetet just "textarea" it not worked.
It seems that javascript is playing together because there are 2 events: when the textarea is focused and blurred. When there is a "blur" then .placeholder-grey CSS class is added to the textarea, but targeting that with CSS not worked as well.
Disqus has very poor documentation, so I figured out all this with code inspection.
Any ideas would be really appreciated.
P.S. I don't have a working example online, you can see it on any blog/website where Disqus is used, for example on their own blog at: http://blog.disqus.com/post/974280725/achievement-unlocked-merging-profiles#disqus_thread
Depending on how the theme is laid out, Disqus may inherit a different text color which may be the same as the background. You can change it using the following override:
#dsq-content { color: #ffffff !important; }
If the text color still does not change, you will need to target comments more directly. This can be done with the following CSS:
.dsq-full-comment { color: #ffffff !important; } /*for Narcissus theme users*/
.dsq-comment-body { color: #ffffff !important; } /*for Houdini theme users*/
If you didn't solve it yet I found a solution that worked for me. Just a bit after the body{} tag in the style sheet of wordpress, you will find the ul{} in there change the color:#FFFFFF to color:#000000 (or what ever color you like). It worked for me and I hope it will work for you to.
body{
text-decoration: none;
background-color: #000000;
}
a:hover{
color: #FFFFFF;
}
a {
color: #CCCCCC;
text-decoration: none;
font-size: 14px;
}
li {
padding: 10px 10px 0px 10px;
}
ul {
list-style:none;
>>> color: #000000;
margin-left: 25px;
}
The site you link to has a css style block just before the textarea, if you edit this to add color: #f90; it'll change the color from the usual black to orange (in this example). Presumably you could also add this in the head of the document instead.
If you use something like Chrome's developer tools or, I imagine, Firebug for Firefox you can edit the html/css in place to see the effect live (although it won't persist) to see what changes you can, or need to, make.
The website you weblink to has a css design prevent just before the textarea, if you modify this to add color: #f90; it'll modify along with from the regular dark to lemon (in this example). Presumably you could also add this in the go of the papers instead.
Spybubble Free