I made an application in ExtJS 6, a have made a menu and made the menu items as links. The colors changed to the default link colors, so I wanted to change them to black. I wrote a CSS and it works it loads, in Chrome in the Elements panel in Styles menu it shows that it's the active style. But when I check the Computed menu, it shows me that color is rgb(85, 26, 139). I can even expand it, where it shows me this:
The css which contains the styling is added last, I tried almost everything which comes in my mind.
Something should be with the hyperlinks, because there are some menu items which arent used as links and the styling works on them well.
Any idea what can I do with it?
Thanks in advance!
Edit:
My css style:
.menu-item a:link, .menuItem a:visited, .menuItem a:hover, .menuItem a:active {
color: #222222 !important;
text-decoration: none;
}
Have you tried styling the the .menu-item a to #222222; and
.menu-item a:not([href]) { color:rgb(85,26,139);}
.menu-item a, .menu-item a:link, .menuItem a:visited, .menuItem a:hover, .menuItem a:active {
color: #222222;
text-decoration: none;
}
.menu-item a:not([href]) {
color:rgb(85,26,139);
}
Like this: https://jsfiddle.net/Harvey89/164opbL4/3/
Probably best not to use !important
Related
I am trying to make my materialize navbar links not turn the color of the navbar/underline when I hover over them. See the photos for example. I am using react. Any quick fixes?
this is how it should look:
but it looks like this:
Pretty hard to help you without seeing the code. That is not normal behaviour of navbar tabs so something is conflicting. One fix could be to reinforce the hover/active class. This is the actual materializecss styles taken from the docs:
.tabs .tab a:hover, .tabs .tab a.active {
background-color: transparent;
color: #ee6e73;
}
It looks like the browser default anchor tag underline is being applied. So you could try:
.tabs .tab a:hover, .tabs .tab a.active {
text-decoration: none;
color: white;
}
https://materializecss.com/navbar.html/#navbar-tabs
try this just to be sure..it should override whatever conflicting css
.tabs .tab a:hover, .tabs .tab a.active {
text-decoration: none !important;
color: white !important;
}
I am using a nav element to create a menu. I am also using JQM to format a listview. The CSS of the JQM overrides the nav style and I simply cannot understand why.
This is my nav element with link elements:
<nav>
<ul>
<li>New</li>
<li>Update</li>
</ul>
</nav>
And this is the CSS for the link elements inside the nav element:
nav > ul > li > a {
color: #aaa;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
The color attribute is overridden by the JQM stylesheet (turning out blue). The specific overriding setting has been identified as:
.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
color: #38c;
}
What I don't understand is why is it being overridden? The JQM style has some specific classes which I didn't specify in my nav element, so why am I losing the color settings? Why is the JQM style applied to my non-classed link/nav?
NB: I am complete noob when it comes to these things, so excuse my plain ignorance
The JQM styles are probably added by it's script. As soon as you initiate the element, it gets the classes assigned to it.
The reason that it overrules is because the selector is more specific. If you want to read more about specificity, follow this link.
If you want to overrule the JQM style, you have a few options
Quick and dirty
Use the !important rule, it overrules all other styles
nav > ul > li > a {
color: #aaa !important;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
Latter rule
Use the same selector, but be sure that your stylesheet is loaded after the JQM stylesheet
.ui-page-theme-a a:visited,
html .ui-bar-a a:visited,
html .ui-body-a a:visited,
html body .ui-group-theme-a a:visited {
color: #aaa;
}
When I copied some necessary codes to jsfiddle it works correctly but it is not working in my website.
My key problem with Tab menus like Our Rooms, Our Gems are not working perfectly when I hover there.
this is the site in which hover is not working correctly
this is working jsfiddle
Edit
I think the main problem is difficult to understand. So I'm giving a hint. Just change #tabs li a with height: 200px; then you'll see the pointer is not hovering over the text but below the text.
I assume that you want a pointer on the entire tab, so you need to modify your class like this on line 1877 in template.css
#tabs li a {
color: #E79D34;
display: block;
font: 20px/50px calibri;
height: 100%;
text-decoration: none;
}
It works in your fiddle because the CSS is NOT normalized, in your website, CSS is normalized.
Demo of not working fiddle
The issue is your h1 tag having class logo, it is overlapping your tabs
Try this
a:hover, #tabs li a:hover {
color: #FFF;
text-decoration: none;
}
In your code there is something that overwrites your :hover. It is either an !important keyword or another definition of :hover after the one you try to fix. Review your code or try using !important in the hovered block.
coz
you have made
a
{text-decoration:none;
}
a:hover
{text-decoration:none;
}
there is no difference in a & a:hover
change something in a:hover
Add this to your style, this will work
#tabs li:hover {
cursor: pointer;
}
you can also do it this way:
#tabs li a,
#tabs li:hover,
#tabs li a:hover {
cursor: pointer;
}
I have taken the links dynamically which are coming in a list. When i click on the link, in other container its page opens. I want to change the visited link color.Basically the block background color. I am able to change color on click. but i need it will stay as it is until n unless i refresh the page. I used
ul
{
list-style-type: none;
margin:0;
padding:0;
text-decoration:none;
display: block;
}
a {
text-decoration: none;
display: block;
}
ul li{
padding-bottom: 10px;
text-decoration: none;
}
li:hover {
background-color:#7EA5E4;
}
li a:visited, a:active{
background-color: #09F;
}
Please suggest me where i have to do changes.
That is, what :visited does. But you "block" is the list item, which can't be visited, because it isn't a link. Style you anchor as block by moving the appropriate styles from the list item to the anchor. That way you also could style the background.
You could try something like, changing the colour / font family to suite you
.Link A:visited {
text-decoration: none;
font-family: arial,sans-serif ;
color: #fff;
}
The .link is a custom class
Hope this can help,
Thanks,
Jack.
i hope you are looking like this:- http://tinkerbin.com/VsbhpxGi
you just have to make .active class and define in li
like this :-
li.active {
background-color:#7EA5E4;
}
UPDATED ANSWER
i hope you are looking like this if you will click on any link so that link will be active...... see the updated answer...
http://tinkerbin.com/Fm0lRO8Z
So I'm just trying to create a small website. (Don't worry that's not going
to be the title)
Right now the "Home" "News" "Gallery" and "About us" are not actual buttons that direct to another page. When I do
Home
The button turns into color purple and it is underlined. (I know this is how links are shown) But is there a way that I can make these buttons stay color orange like in the picture without them turning blue and underlined. Thanks
http://imgur.com/Czsk4
You can set the styles inline, but the best way to do it is through a css class.
To do it inline:
Home
To do it through a class:
Home
a.nav-link:link
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:visited
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:hover
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:active
{
color: #fb3f00;
text-decoration: none;
}
To do it through a class, you need to put the css code in a separate css file and link it in or you can put it in the head of the document. The best practice is to put it in an external css file so it can be used throughout.
If you want the orange to be on every link throughout, just remove the ".nav-link" part of the classes and remove the class="nav-link" from the link tag. This will make all links orange unless you have defined a another class and explicitly applied it to a link tag.
Good Luck!
Using CSS instead of inline styles will work much better:
a {
color:orange;
text-decoration:none;
}
You can also get fancier and have the underline appear when you hover:
a:hover, a:focus {
text-decoration:underline;
}
This can help improve user experience (UX), though if the links are in the header it may be naturally apparent that they are links. (UX design is more complex than this of course, because you have to consider things like touchscreen users that have no "hover". :) )
All links come with different states so if you want them to stay with just one color you can modify all the states together like so:
a:link, a:visited, a:hover, a:active { color: orange }
You can do that by using CSS.
to set this in your code right at the end of the head-section
<style TYPE="text/css">
a:link, a:visited, a:hover, a:active { color: #ff8080;
text-decoration: none;
}
</style>
and change the #ff8080 in your color
I have the perfect solution for you!
I'm copying and pasting straight from my code. make it relevant to you. This definitely works for what you are trying to achieve.
<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> Order Now