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 4 years ago.
Improve this question
I am making a web site and using Bootstrap. I made the background color blue and now i cant read any text (<h1>, <p> etc) My <img> are all there (not affected by background color)
this is my css
body{
background: rgb(40,40,40);
}
I think you should first check if you didn't change the color somewhere in your CSS. for example: body{ color: rgb(40,40,40);}
If that's not the case, you can just put:body{color: black;}
You can always change the color of your text to a lighter color to get a better contrast with the dark background color, for example:
body {
background: rgb(40, 40, 40);
color: #fff;
}
Related
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 7 months ago.
This post was edited and submitted for review 7 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
Here is my website: https://personal-website-1ss.pages.dev/ If you go to the bottom of the page you can see the margin at the bottom is still white even in dark mode. This can be changed when you change the background color of the html tag. The html tag is only available in src/app.html which does not know if my site is in dark mode or not and I need a way to change the background color of the html tag through src/routes/index.svelte or src/app.ts. Here is the github:
https://github.com/CloudyWhale/personal-website
This issue has been fixed but here is a drawing of what was happening
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
(there was a margin here and it was causing a white background at the bottom)
You could just avoid the margin; there are multiple options.
Use a padding instead of margin on #fw-container.
Prevent margin collapse from happening by setting e.g. a 1px padding-bottom on the main element.
You could also use a global style and just change the color that way.
:root {
--bg: theme(...);
}
:root.dark {
--bg: theme(...);
}
html {
background-color: var(--bg);
}
See this question about accessing tailwind colors in CSS.
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 6 years ago.
Improve this question
I downloaded a theme that has font awesome icons on the navbar section. When I try to change the color of that icons it remains the same.
I tried
.fa-home {
color:black;
}
But it doesn't work.
Try to apply the style to the :before element, where the icon is.
.navbarClass li [class^="fa-"]:before,
.navbarClass [class*=" fa-"]:before {
...
color: #COLOR;
}
The problem is with theme, it may have defined the color somewhere in the css file. Search for that and follow the classes of icon so you can find where the color of icon is defined. Or put the css class at the top of the file and add an "!important".
Like:
Color: black !important;
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 7 years ago.
Improve this question
I am using bootstrap framework and am trying to override some of its features. I have it working except one. I am trying to remove the background when a link is clicked. Right now the link is clicked and a grey background is shown behind. The problem also is that the link just goes to the bottom of the same page.
I have been able to remove the issue with the following code, however, doing it this way makes the background not show up on hover (the link remains active when clicked)
.navbar-custom .nav>li>a:hover {
color: #585858;
background-color: #fff;
}
.navbar-custom .nav>li>a:focus {
background-color: transparent;
}
If I understood correctly, you should be able to replace :focus with :active to solve your problem:
.navbar-custom .nav>li>a:active {
background-color: transparent;
}
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 7 years ago.
Improve this question
I'm a CSS beginner trying to customise my WordPress blog by using a custom.css file.
I'd like to add a margin to the top of a div in order to create a separation with the header.
I tried to just change the style like this :
But when I do so the top margin background is black. It doesn't recover the grey background of the div which contains this div.
Is there any trick to do that easily ? Can I use a border instead of a margin for instance ?
According to that image, maybe you want to specify the padding-top instead of margin-top.
Following is the div which is causing the issue
.html_stretched #wrap_all {
background-color: #333333;
}
Set maring-top as you are trying and add following in your custom.css file
.html_stretched #wrap_all {
background-color: #e5e4e4 !important;
}
It will overwrite the default css and set the background grey and you will have your content body separated from header.
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 8 years ago.
Improve this question
I have created multiple progress and meter tags with ID assigned to it. Now i want to have different color for this progress tag and meter tag.
Is there a way to change color of these tag using there id ..? I found ways but it chnages color of all the tag at once.
Thanks in advance,
Vishesh.
You can style progress with css:
#New{
color: #0063a6;
border: 1px solid #0063a6;
background: #fff;
}
for the Value:
#New[value]::-webkit-progress-value{
background: #0063a6;
}
Demo: http://jsfiddle.net/bronni/w30xw1ut/2/