The links within the body change color once you hover and click on the link. Is there a way to have the color fix within the body of the mkdocs. I've been using some mkdocs documentation as an example, but so far I have this
css: `
body {
font-family: ${theme.typography.fontFamily};
--md-text-color: ${theme.palette.text.primary};
--md-text-link-color: #8CD7F7;
--md-code-fg-color: ${theme.palette.text.primary};
--md-code-bg-color: ${theme.palette.background.paper};
}
I would like the links to be the same when the user hovers and clicks on it. Whats the correct syntax for when the link is pressed or hovered over.
I've tried adding
.md-nav__link:hover { color: #8CD7F7; }
.md-nav__link--active { color: #8CD7F7; }
within the body, but that's not helping. I wonder if there's different syntax thats supposed to followed when inside the body
In my project I use, for example, two colors.
I created a folder in root called "stylesheets", where I created the extra.css file. That's what's inside of this file:
:root {
--md-primary-fg-color: #5f64a0;
--md-accent-fg-color: #5f64a0;
}
The first primary color is responsible for the upper bar (please, correct if I am using a wrong term) with the search to change the color.
The second accent color changes the color of the link if you hover. It won't change the color when the link is clicked.
If you keep the primary and accent colors the same, you will have the same color for links if you hover and the upper bar. If you comment the primary color, the upper bar will be purple by default and the links will be the accent color.
Also, if you specify primary and accent colors, you will get the same color when the link is clicked.
Don't forget to configure your mkdocs.yml:
extra_css:
- stylesheets/extra.css
theme:
palette:
primary: stylesheets/extra.css
name: material
logo: 'images/logo.png'
Related
The primary color is #3f51b5, an blue dark color, but i want to customize this color.
My research I discovery samples that:
::ng-deep .ng-select.ng-select-focused .ng-select-container * { color: $colorP !important; }
but the code above just part of the color I want to change.
How i change the primary color in the all code?
I just found code snippets that changed parts of the problem, but ended up creating others, I would like to know if there is a way to change all the color at once.
In Angular, you can change colors of your application by updating the theme file, typically located in the src/styles.scss or .css
Try this : or your selector, the idea to put the overriding style in the main file
yourSelector {
color: yourColor;
}
Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs
works:
.md-tab.md-active
{
background: green;
}
doesn't work:
.md-tab.md-active
{
background: accent;
}
The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:
<div md-colors="{color: 'accent', background: 'green'}">My Text</div>
What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.
I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.
I'm using WordPress with the Stability theme installed.
When not hovering over an icon, it looks red (by default). This can be easily changed by changing the theme's skin in the options menu.
However, when the mouse is hovering over the icon, it turns black. This is independent of the theme's skin and I cannot, for the for the life of me, change this color to something else. I've been using the element inspector in my browser and turning CSS properties on and off all day and couldn't zero in to the property that defines that color.
Any ideas on how I might be able to change it? The theme's documentation sais nothing about it.
You can change the background colour by editing this bit of css, or by overriding it with your own duplicate in a custom css file.
.no-touch .icon-box.icon-box-animated .icon:hover::before {
background-color: #2f2f2f;
transform: scale(0.9, 0.9);
}
Its currently located in: http://stability.dan-fisher.com/css/theme-elements.css on line 1302
This is a most basic question about formatting text links in css
I have tried to do it myself. I got the hover to work -- at least in firefox. But can't get the default color to work. Only hover.
Please look at this development page http://ogrowby.com/ in firefox.
There is a menu about the middle of the page, called "Test Menu". Please click on that. Then, in the dropdown, go to "TEST LINK".
When you hover over it, the text color changes to Gold. That is fine. But its default text color is black and I want it to be white. I may also want to change the font size, etc. But the main thing is to get the css working to set the default text color for this class to WHITE. #ffffff.
Here's my css so far. The hover is working, but the default remains needs to be changed to #ffffff Only for the .roundedblue class. And it needs to work not only in firefox but other modern browsers.
Any help will be appreciated. Thanks
Rowby
.roundedblue:link,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: white;
}
.roundedblue:hover,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: #FFB300;
}
If that is the only link you want to change, you should add an id to it and change the id's css properties. If you want multiple elements to have the same properties add a class to the element (if it doesn't already exist).
Then simply edit its properties as you would normally.
color:white;
font-size:14px;
...
I simply changed the styles in inspector and it worked for me. added "style='color:white;'" to your span.
I'm working on my wordpress website, I recently got this new theme called Visia. After a search for days I finally found out where the hover effects for the circle around the social buttons was located. But there's only one problem: the icons have their own CSS file. And I want both circle (border-color) and icon (color, they have an icon font) to change color on just one hover.
Now I got this changed in the icons.css
.icon-linkedin:hover {
border-color:#06C;
opacity::1;
color:#06C;
}
the other one has no hover yet, because I tried to refer to that class (style.css) to icons.css
.social-links a:hover {
???
}
The borders should change color the same color as the icons (because there are different social links, there are different colors)
If anyone could help, would be great...
Thanks in advance!
Simply overwrite it like so:
.icon-linkedin:hover {
border-color:007bb6;
color:007bb6;
}
And add !important if needed:
.icon-linkedin:hover {
border-color:007bb6 !important;
color:007bb6 !important;
}
I've fixed it by removing the border from some other class (the one who actually gave the border) and added it to an icon class that was already there. I also added a hover to that class which made it possible to change both color and border-color.