I am creating a dashboard that needs to adhere to corporate style requirements. I need to alter the background color of the header. I have successfully altered the color except for when I mouse over the header, it changes to a different color.
Here is an example of the header with the proper color scheme:
Here is the same dashboard with my mouse hovering over the header:
For added measure, here is the result of inspecting the element:
Any help that can point me in the right direction to keep the background of the header a white color would be greatly appreciated.
There will be an css property most likely .logo : active or something - remove this.
Would need full code to give a definitive answer.
I solved the problem by adjusting the CSS that appears in a supporting CSS file. In the OP, the inspect element tool points to a second CSS file that I had not altered. Specifically, the all-skins.min.css file.
Once I located that file, which for R/shinydashboard, the file appears in the AdminLTE directory of the package library/shinydashboard, I found the element that affected the behavior:
.skin-red .main-header .logo:hover{background-color: }
Since I wanted the background color to remain white, even on hover, I inserted #FFF into the background-color element and, now, the background color for the header remains white even on hover.
Related
I'm trying to make a flat black background below the navbar but that seems to be an issue. This is particular concern because I wanted to add some JQuery functionality to the buttons on the right to cause the background color to change when they're pressed. But if something as simple as this, though fundamental, doesn't work...
Currently another issue is this thick, white strip. I honestly don't know what's causing it. I assumed that just having a white AlarmTime would mean floating white text on the page surrounded by a black background, but that's clearly not the case. It's left as the default black now simply because it's effectively invisible otherwise. For the record, it's not the flexbox nor the div causing the border because it still shows up with both of them deleted.
https://jsfiddle.net/xjrqm1k3/
body
{
background-color:black;
}
What did I do wrong?
Edit: I thought you had to have a period before the name of the selected item to select a class. I guess I might've been missing something in my code? The fiddle I posted doesn't seem to have a period Fiddle, and it's what I Copy-Pasted from my work. Do indents cause Visual Studio to count the item as a class?
Edit: Regardless, thanks for the help and information; it works.
You were doing
.body
meaning class with name body
change to body
Also you have to add !important since you're loading bootstrap after this CSS file.
See fiddle
It's probably being overriden by something else. Try this:
body
{
background-color: black!important;
}
http://web.archive.org/web/20140402131524/http://www.bbc.co.uk/news/uk/
Below the "News UK" there is nav bar. There is a border on that nav bar between items. Not only i cannot find a way to replicate it, i cannot find any trace of it in the developer tools.
I even looked for the hex code of the color in all of the CSS files for no avail. Why is that? Where does that border come form?
If you are meaning the archive.org link you reference, rather than the current live version of the site, then it looks like you may be referring to the #nav a which has a transparent background image. That image is a 1x10 vertical line.
It shows on each a tag in the nav bar list, and refers to skin.css line 47.
If you mean the actual live current version, it is on .navigation-wide-list__link > span as a border-right and shows in core.css on line 5169.
I have a button in my application and currently its very basic:
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Which means it has the default HTML CSS effects used w/it. I was attempting to change it w/CSS but everytime I make the button bigger, there's always this dark side on the right and bottom side..I'm not sure why. If I change it back to its default, its not there.
Here is the JSFiddle:
http://jsfiddle.net/htzgak6g/1/
I'm referring to the right side and bottom side. They seem darker to me than the other sides. All I want to do is have some type of button with rounded corners and a nice shade of color.
This is because buttons come with some basic default browser styles that are still taking effect because you haven't over-ridden them.
In this case, adding border: none will remove the border and the dark colour. (http://jsfiddle.net/htzgak6g/2/)
Look at a reset css to solve these problems and give a consistent blank slate across browsers.
The problem is that the browser appends default style to the elements which are marked by <system> in Firebug. You can use the Selectors style panel to view all the styles added.
As Toni said, you will need to use reset.css to ignore such styling. But for this specific problem, set the border-color to be transparent.
button {
border-color: transparent;
}
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Just add border-style:none; like so:
<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button>
Here is your updated JSfiddle
I have inherited a wordpress site using a theme. There is a background color on hover in the portfolio section of the site that we want changed. I cannot find where this color is declared at so I can change it. I thought it was an element called gallerySelectorList but nothing I did changed the color. The demo site of this theme is here : http://demo.pixelentity.com/?surreal
If anyone can help me that would be great I am losing my mind trying to track this thing down and change it. I posted on the creator of the theme's forum but got no where.
Within the Chrome Developer Tools you can invoke the :hover state of any element. In this case, you want to do so for the li wrapping the link. When do we do this, we see the color is set here:
.gallerySelectorList li:hover {
background: #83103e;
}
This code is located within your HTML file:
It looks like it's not actually a hover, but more so being faded in background color. Found then pink color in the class thumbTextWrap.
.thumbImage .thumbTextWrap { background:#8b133c; }
When I changed that or removed it changed the background hover color as needed in the dev tools.
On the following web page:
http://www.hiv.lanl.gov/content/sequence/GENE_CUTTER/cutter.html
...you'll notice that there are three "input areas" each of which has a grey box behind it. I realize this is a simple question, but how was this effect achieved? I'm writing a similar application and I find the contrasting colors aesthetically appealing.
Thanks.
Caitlin
If you look in the code of the webpage by viewing its source code or rightclicking and choosing "Explore object" or something like that, you will see that they have the inputs in table and table with class="paramtable" which has a background-color: rgb(227, 227, 227); which is some kind of gray as long as the red, green and blue numbers are same.
So don't wait for using nice styles when writing your website :)
What they most likely did what create classes for the items that are within the form element, and then in their .css file, they set the background color to the light gray color. You can see more about all this here: w3schools