Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am working on a Vue.js project that uses Vuetify and vue-flash-message. I am trying to set warning message background to 'blueviolet' by editing its style:
.flash__message.warning {
color: #ffffff;
background-color: blueviolet;
border-color: #ef9e3b;
}
but there is '.warning' class in Vuetify that overrides it, see the screenshot .
I wonder if anyone can explain what technique is used here. And what is the right way to make the message background 'blueviolet' in this situation?
The issue here is your second class which is telling the browser to set the background to yellow as the !important tag on the end of each property. !important tells the browser to override any other styles that overlap classes. You need to:
A) Remove the important from the yellow styles and apply them to the purple
B) Remove the yellow styles all together.
Option A will seem more 'logical' but it depends what environment your working in and how your code etiquette applies to your project. I prefer to keep everything simple and just remove the intrusive css and try and use less !importants in web projects.
For more information on the !important utility visit this helpful blog post: !Important Utility information
Hope this helps.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
If I open a random YouTube video like this ( https://www.youtube.com/watch?v=Jmel5YySUXU ), and inspect the style of a comment in the developer tools, I see that there are two line-height, and the first one is cancelled out.
If I click the "inline:18451", I see the code like below, but I cannot find this in the source code of the web page, so I guess it is somehow dynamically created. My question is that why there are two line-height properties. Is there some meaning to this, or is this simply a bug (that the programmer forgot the first one, and added a second one later)?
#content-text.ytd-comment-renderer {
--yt-endpoint-color: var(--yt-spec-call-to-action);
--yt-endpoint-hover-color: var(--yt-spec-call-to-action);
--yt-endpoint-visited-color: var(--yt-spec-call-to-action);
color: var(--yt-spec-text-primary);
font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing);
line-height: 2rem;
}
This is probably just a typo.
Someone came later on trying to fix a problem, and didn't notice there was already a line-height attribute there.
With CSS in the same selector, the last mention of an attribute overwrites any previous one, unless of course they use !important.
From just experience, people tend to make mistakes.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have CSS class in use that has path
.override .sidebar label.firstheading
I'm trying to create style guide and use the same class in it as showcase, but style guide doesn't have sidebar element. Can I call ".override .sidebar label.firstheading" directly in class="" without full hierarchy?
If I add .sidebar element leading to it in style guide, it gets so much formatting from .sidebar that it messes the whole page up.
Your styling should always be as less specific as possible! You should have a basic styling for label specialized label.firstheading and if the structure is important for the label you should add more specifity (.sidebar label {} and/or .sidebar label.firstheading {...}).
If you follow this scheme you will be able to override styles and to use your html more modular.
In other words: you should reorganize the styling for the label.firstheading component
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am actually trying to make a web app using ASP MVC to support some dynamic color setting. For example, admin can set theme colors for specific user groups. When admin saves the new color codes, those new color codes need to be saved in CSS. So users login they will see different colors based on their group.
For this, I am thinking of using SASS or LESS. It would be easier if I can easily set variables in SASS or LESS to new color codes in Save action.
So my questions is...
How can I retrieve variables from SASS or LESS file and set new value to the variables? Is there a library for this? I have checked BundleTransformer and dotless. But I still don't know if these library support handling variables.
If I can update variables in SASS or LESS, will it be compiled on any change?
And what can I do for the cached CSS on client side?
I would really appreciate it if you guys can give me any better or other approaches.
Thanks,
If you're targeting only users with modern browsers, CSS has experimental variable support (see Can I use.. data). Here's an example of from MDN:
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
If you took this approach, you would only have to insert the colour variable into a simple stylesheet, and CSS would do the rest:
<style>
:root {
--group-colour: {{ groupColour }}
}
</style>
<link rel="stylesheet" href="/path/to/stylesheet/with/variables.css">
For more information on CSS variables, see MDN's CSS var() documentation.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have a question to web designers - do you think that it's fine to make CSS classes with one rule in them?
For example, I usually write classes like .float-right, .center or margin-top-40 to apply them to divs or some other elements. But I must say that I'm not writing all CSS this way, just applying these classes in some places when it's necessary to remain flexibility, like when I have to move one link to the right or something like that.
Do you think that it's the correct way of using CSS?
My suggestion is to create a base file which will include a lot of classes with one rule.
And in a different css file, you will use Sass with #extend to build your component css classes.
For example:
.foo {
color: red;
}
.bar {
#extend .foo;
}
For the examples you have mentioned, it is not necessary to write additional class for the particular style. You can write them where necessary.
Adding additional style rule adds extra class in the html markup.
You can use #mixin in SCSS which will be more efficient.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I have created css button style as here: http://jsfiddle.net/karimkhan/SgTy2/
When I used same css insite <style> in my page then it's effect changed. looks like below:
Actual css on fiddle gives this kind of view:
I am not good at css. What's wrong I am doing here?
What if you make an external css file? The same will probably happen, so see what styles are overlapping your element in inspector mode. I would not suggest to use !important, but rather make the style have more priority. One way to do this is to make your css selector more specific.
For example:
input[name="url"]
{
background: black;
}
has more priority as
input
{
background: red;
}
jsFiddle
Note that a more specifc path also takes longer to determ.
Hope you can work on a solution now.