H ello, everyone!
I have a problem with styling md-tab
It looks like this by default:
This is what it should look like:
What I am trying to achieve is:
use styles from material theme or colors from it (ng-colors)
update background of active/inactive elements (as in the second picture)
Here are some thoughts:
CSS modifying doesn't seem to be right in this case because I want to rely on theme colors.
md-primary class assignment doesn't work on md-tab for some reason (don't understand why)
md-colors assignment doesn't work for the same reason, I suppose.
probably, I will have to create some custom tab components instead of these and then style them. I am not sure if it is right in my case.
Question. Is it possible to style md-tab the way I described?
Thanks!
The fastest and easiest way to do this is via updating css like this
md-tabs .md-tab {background:white; margin-left:20px}
md-tabs .md-tab.md-active {background:#006E7B; color:white !important}
md-ink-bar {display:none}
Related
I'm trying to change my link_to text color. I've seen numerous questions and articles where people can change the link_to text color without the !important property. But my links' colors won't change without it. Was this because of a recent change, or am I doing something wrong?
I did notice that when I refresh the page, for a split second, the links are changed to the colors I've assigned to them, but then immediately changes back to the default gray color.
Recreating the issue
Run rails new app.
Run cd app
Run rails g scaffold Car model:string.
Add the following code to the app/assets/stylesheets/applications.css file.
.test {
color: red;
padding: 50px;
}
Add a link to the app/views/layouts/applications.html.erb file (within the body tag).
<%= link_to 'Testing', nil, class: "test" %>
Result
Testing is the link's color I'm trying to change. As mentioned, the text color of the link doesn't change, however, the padding is successfully applied.
While inspecting, I also noticed that the color property is lined out.
When using scaffold, it's important to be aware of what scaffold creates. For me personally, scaffold is nice for quick basic crud stuff. However it comes with a lot.
As for your issue scaffold creates a scaffold.scss which overwrites your styling. Try commenting it out and then it should work(It did for me!).
Fastest way to find out where this one is coming from is to click on the funnel icon, next to red;. It will filter you every place that color is applied to the element. There should probably be some !important declared below your CSS but it's still takes the upper hand.
When it's stroked, it's saying that it's overwritten elsewhere, it's a wrong CSS property or alike.
This issue has nothing to do with Rails or link_to. You are simply trying to style your a.test element.
You definitely do not need to use important ESPECIALLY for a new app. The CSS cascade can get complex, but this shouldn't be a complex situation.
CSS is based on both a cascade and specificity. You probably have other CSS (above the part you pasted in the inspector) that is overwriting the .test class, or something in the CSS is being more specific (since you're only styling .test.
Since this is a link (a) you should try to do a.test in your CSS, and you may also need to also style :hover and :visited pseudo classes.
I'm using Eric Meyer's Reset CSS, and all hyperlinks "hover" (you know, act like the cursor is hovering over them) if the cursor is horizontally-adjacent to said hyperlinks, not necessarily hovering over the text of the hyperlinks themselves.
This is probably the doing of the Reset CSS, however I am not sure how to fix this, I'd figure it out eventually, but I'm hoping someone here can provide a quick fix.
Also, where should the Reset.CSS be in relation to my main.CSS? Should it be on the line above or the line below main.CSS for priority in the HTML file? That might be an issue as well.
Thanks!
It is usually a good idea to reset your styles first, using reset.css at the very top of everything else, and then add you own styles.
The basic rest.css from Eric Meyer does not touch anchors (a) in any way, so I suspect your own code (or browser) for strange mouseover-behaviour. Use your browsers developer tools (usually opened up by pressing F12) and check the styles applied to the element.
Based on what I understand, as far as I know this can be caused in two cases.
First, if your markup is like this <a><li>some hyperlink</li><a>, and your CSS is like this:
a:hover{
....
}
OR
your markup is like this <li><a>some hyperlink</a></li> <- this is correct way but your CSS is like this:
li:hover{
...
}
so you might want to check your markup, I don't think so that this is caused by your CSS reset.
Site:
oldfashionedgoods.com
I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.
I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.
So far I have this:
input[type=text] {
color: #cc5723;
font-family: cutive mono;}
While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?
I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!
I suspect it is being overridden by another CSS style. Try using:
input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}
If that works then it is being overridden somewhere in your CSS.
NOTE:!important should only be used to test. It is not a solution.
I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.
Your other styles have priority over this. Use
font-family: cutive mono !important;
to test.
Yep. important! works. I just wasn't sure of it, but here is the
DEMO
The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.
But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.
Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)
in my <head> tags, ive placed the location of bootstrap.css
if i place <div class="container"> it creates a fixed width.
what i wanted to happen is manipulate the default values of the container width by importing another set of stylesheet.
another scenario is, if i placed a span8 how do i put background colors on it without actually editing the bootstrap.css rather, customize it using a new stylesheet.
does putting 2 stylesheet possible? then inherit / manipulate all values in the bootstrap.css in a new stylesheet?
i apologize if my explanation aren't that clear. its kinda hard to express verbally what i wanted to happen. :)
When you add a second stylesheet, you can override rules of the first one. Just make sure you add them to your html page in the right order.
If you want to make sure a rule won't be overridden you can add !important to it. Example:
.example {
color: red !important;
}
Yes it is possible. That is what the "Cascading" part of CSS is. Short answer is to add your own style sheet after the bootstrap.css and before the responsive.css and your styles will be used because they are the latest definition, i.e. the rules "cascade" down.
Long answer is take a look at the docs. There's a lot to learn there if you have the time.
Also have a look at the bootstrap customization page
I define fonts on their own like this:
.smallboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:11px;color:#3A63A5;}
.medregblue{font-family:Trebuchet MS;font-size:13px;color:#3A63A5;}
.medboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:13px;color:#3A63A5;}
I also define elemets that are recurrent such menu options or section titles like this:
.MenuOptions{float:right;margin-right:0px;}
.SectionOption{float:left;margin:10px 0px 0px 50px;}
So when I create divs, I often find myself writing this:
<div class="MenuOptions medboldblue">
I know I could merge the two classes but I like to have my fonts in one class and another class to handle positioning and such.
Is there a way in CSS to have all MenuOptions be of font medboldblue so that if I want to change the font from a medboldblue to a largeboldblue I do can that change without going through every MenuOptions div? I know I can easily do this with jquery and addClass but I was wondering if there a way to do this with pure CSS.
Thanks.
No, you can't do that with pure CSS.
You could use SASS or LESS CSS.
Or you can add the styles from medboldblue to MenuOptions.
But really I would recommend reading about OOCSS if you want to learn about the best way to organize CSS.
Unless I misunderstand your question, you can very easily do that with css.
All the properties that you define in the first section are inherited (font, color), so you only need to apply your style to the parent / menu element and the styles will be inherited by all menu options.
When you decide to change the font class, you just have to change it for the menu.