I took the code from https://bootstrapious.com/tutorial/sidebar/index2.html which shows a Bootstrap Sidebar. Its background is dark with white lettering. There is a nice scrollbar for the sidebar. I am being forced at work to swap my coloring so that the background is white and the letters are dark. I did it without any problems, except now I cannot see the scrollbar unless I hover over one of the menu items, then I can see a part of it.
I changed my #sidebar css from this:
background: #4CB7EF;
color: #fff;
to this:
background: #fff;
color: #0088CE;
I did not change any of the mCustomScrollbar css.
But now I can't see the dragger_bar in the scrollbar when the background is white, as shown in the attached picture. I know it's really there (over the white background), because my cursor changes from an arrow to a hand with a pointing finger.
Any ideas please?
UPDATE 1
I tried changing the mCustomScrollbar's css where it uses rgb of 255, 255, 255 (white) to 0, 0, 0 (black), but it did not work. If you cannot provide a solution, can you please provide an example that uses the Bootstrap sidebar with a white background to refer me to?
UPDATE 2
Here is the code from bootstrapious, but I cannot get jsFiddle to work with Bootstrap, but I wanted to provide the code.
Ondrej here - I'm the author of the tutorial - https://bootstrapious.com/p/bootstrap-sidebar.
There shouldn't be any need to change the mCustomScrollbar's CSS, just use a different theme when initializing it in JS.
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
$("#sidebar").mCustomScrollbar({
theme: "minimal-dark"
});
Cheers,
Ondrej
It is happening because the colour of the custom scroll bar is white and when are changing the background colour of the sidebar to be white it is making it look like disappeared.
Related
Hi so I tried to change the background on the body of my HTML document but there seems to be a white line when everything else is the background is black which is what I want. By the way I want to mention that I do have bootstrap implemented in the head section of my html doc, I'm using bootstrap 4.4.1, so I believe that could be the other problem as to why my background isn't what I want it to be, but couldn't figure it out after fiddling and looking around for answers for some time.
Although I changed in my CSS for the background color to be black. Simply I made it body {background: black;} in my CSS, Theres still a white spot there and when I go to inspect the element it says that the body's color is still #FFFFFF which is white. So yeah in my CSS I tried to change it by targeting the body and it still did not work.
I am having an issue on my website with the background color. The code between the html tags works perfectly fine
<!DOCTYPE html>
<html>
//...
</html>
To get the desired result. HOWEVER, if the screen is too big to hold the bage, a black background color appears at the bottom to take up that space:
Everything works fine if the page is equal to or bigger than the screen. No overflow of the black area happens.
NOTE: If I zoom out of any of the pages to the point where the Screen is bigger than all the content, all the pages will have the same issue.
QUESTION: Is there a way in CSS (or Javascript) to change the default color of the black area in the picture (which resides after the HTML element)?
Edited:
The following website is an example:
https://www.phpbb.com/styles/demo/3.1/board/index.php?style=1246
if you scroll back from the website, and use google chromes "inspect" option, you'll see that the html is not taking up the whole page, and that the black part at the bottom is something separate. I would like to know how to change that blackness at the bottom into another color (like white).
Here you see your live example once with active background-color rule on body and without. And you see it's the body's background-color what causes the black.
Active:
Not active:
If you want to keep the body black, so set the background-color of your html tag to the color you wish (at the moment it's transparent, so it lets the black color of the body through).
For your desired white you would do something like:
html {
background-color:#ffffff;
}
I don't know if you can change the default, but if not you can just add !important right after the color code.
To get the background color all the same add:
body {
background-color: rgb(153,153,153);
}
may I know how do I program the seemingly simple navigation bar in the attached image of the pied piper website in the show "silicon valley" in HTML/CSS? In particular, how do one program the dark blue portion?
Do I attach a dark blue image and have its position set to "absolute" and have the link buttons and logos placed on top of it?
Or is it any other better way?
Thank you!!
Or is it any other better way?
Are you really asking how to set a background (color) with CSS?
You should have a look at the w3 tutorial about CSS backgrounds then.
Just have a div and apply a dark blue background with CSS like
div.whatever-class-you-choose
{
background: rgb(3, 10, 24);
}
Or check out the fiddle I made. It's all pretty self-explaining.
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.
I am working with this page.
http://www.careersinmusic.com/aaaa-testing-link.aspx
So when my main issue is the invisble area at the bottom. I would like it to be white, but I cant figure out how to modify the area.
Does anyone know where I can change this to white?
Thanks
PS. Also the scroll bar is an issue. The image I want to show is 986px tall.
Thanks again.
add #cboxContent{background-color: white} to your stylesheet