This is how my code looks like on CodePen:
I want the background of "Sidenav Left" to be that of "Menu Items", which is represented by class as
.nav-theme {
background-color: #34495E
}
I tried overriding it as
.nav-theme, .md-theme-indigo {
background-color: #34495E
}
but that did not work, what do I need to do?
Be more specific in your CSS selection to override. Since the below selectors are more specific, their priority will be higher than the default background color that was not getting overridden before. In this way you are avoiding the usage of !important
.md-sidenav-left .md-theme-indigo, .md-sidenav-left .nav-theme {
background-color: #34495e;
}
CodePen Demo
You can use the md-colors directive to set it to a color from your color palette. That way it'll change automatically if you pick a different theme.
<md-toolbar md-colors="::{background: '{{theme}}-primary-700'}"
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
First time here, and was hoping that someone would be able to help with an issue I’ve been dealing with. I’ve had specific details not to modify the original CSS, and instead told to create a new CSS that contains specific overrides for the original CSS. How would I go about doing that efficiently?
Any help would be appreciated. Thanks!
css are applied is a given order. Here are few examples
Case 1: overide default color for a div
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
Case 2: css which is loaded at last will be on top.
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
case 3: important takes first place
div {
color: red !important;
}
case 4: multiple important
div {
color: red !important;
}
div {
color: yellow !important; /* This will be applied */
}
Include your css file after original css file. Add your custom class in html and use it to override original code.
Don't use !important property it create issue in responsive style.
I am using Bootstrap.css, and there's a class named "form-control".
I am using this class to style my aspx controls. The problem is that its textbox font color is grey and I want it to be black. I have no clue about CSS. Is there a way I can change that from grey to black?
Thanks.
You can reset the text color of class - 'form-control' by adding
.form-control {
color:#000000;
}
Add this property in a separate css file and include it just below bootstrap.min.css in head tag.
If you want all the textboxes font color to be black, add this:
input[type="text"] { color: black }
in your CSS file.
Otherwise, create a class:
.black-input {
color: black
}
<input type="text" class="black-input">
Go to http://getbootstrap.com/customize/ and select the colors you want, then Compile and Download at the bottom.
use this:
.input-black {
// this is the one can change the color of a text even if its a placeholder
color: black;
}
<input type="text" class="input-black">
You would need to add some code like this to your CSS file.
.form-control {
color: #000;
}
Keep in mind that you may have some specificity declaration issues. For example, if the color is set in bootstrap.css as a child of another element, you may not be able to override the color change unless you declare it with the parent as well. For example:
.parent .form-control {
color: #000;
}
You shouldn't be scared to learn some CSS though. It's very easy to grasp (you'll literally get the basics in less than an hour).
When I mouse over linked images I see hover background color beneath the image. How to avoid this?
Is there any solution that would not involve applying special class to a elements (like a.nobackground:hover)?
CSS:
a:hover, a:focus {
background-color: rgb(240,39,96);
cursor: pointer;
}
HTML:
<img src="with_transparency.png" alt=""/>
edit:
setting img background to none doesn't work
a img {
background: none !important;
}
setting img background to any other color would do the job if there's no non-solid color (or graphic) beneath the image (in this case .png)
a img {
background: #000 !important;
}
Does setting the background color of the images do what you want?
a img {
background: none;
}
Depending on your stylesheets, you might need the !important bang in front of "none" to overwrite other conditions.
Edit: On second thought, you might want to explicitly set a color value instead of simply saying "none."
Another edit: True, if the color or background behind the transparent PNG wasn't a solid color, you'll encounter some issues. One alternative is this:
And the CSS:
.transparent_png {
background-image: url('with_transparency.png');
background-color: transparent;
display: inline-block;
width: ??px;
height: ??px;
}
So here, you're not actually using an image tag, but can overwrite the background-color property that's normally applied on a:hover and a:active. Does this work?
If I understood the question correctly... You will need to either apply a special class to that specific link, or call the link by its location if it´s different from others. For example:
div div div a {}
And as Matt said you might need to use !important because you have a rule that includes all the links in the page. I´d recommend a different class, it´s better from a semantic´s point of view.