I am using foundation and need to change default background color, font color and color on hover. I have tried something like this but it is not working for me:
My css file:
.tabs {
background-color: #353A41;
border: 0;
}
.tabs a{
color: #FFFFFF;
}
.tabs :hover{
background-color: #2A2E34;
}
This is not valid:
.tabs :hover {
background-color: #2A2E34;
}
Try this instead:
.tabs a:hover {
background-color: #2A2E34;
}
Try adding this to your custom CSS:
.tabs a{
background: colorname;
color: colorname;
}
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
background: colorname;
color: colorname;
}
Related
I am trying to change the background color of the header panel in readthedown RMD format.
---
title: "R Notebook"
output: rmdformats::readthedown
css: Style.css
---
My style CSS is with changed colors to #008B8B
#main .nav-pills > li.active > a,
#main .nav-pills > li.active > a:hover,
#main .nav-pills > li.active > a:focus {
background-color: #22983B;
}
#main .nav-pills > li > a:hover {
background-color: #008B8B;
}
h1,h2,h3,h4,h5,h6,legend{
color: #008B8B;
}
#nav-top span.glyphicon {
color: #008B8B;
}
#table-of-contents header{
color:#008B8B;
background-color: #008B8B;
}
#table-of-contents h2{
background-color:#22983B;
}
a:hover{
color:#008B8B
}
a:visited{
color:#008B8B
}
But i am still getting :
I would like to change :
background color of the toc left , background color of TOC header ( right now in red ) and hover color of the Title 1 and 2. What are the tags for those in the CSS?
To change text and background colours of the active toc sections and hover toc items you'll want the sidebar a, try the following
#sidebar {
color: #D9AB16;
background: #113458;
}
#sidebar h2 {
color: #FFFFFF;
background-color: #4096B8;
}
#sidebar a {
color: #3F4548;
}
#sidebar a:hover {
background-color: #3F4548;
color: #FFFFFF;
}
I was only able to get the sidebar and the sidebar header for now, and that was
#sidebar {
background-color: #008B8B;
}
#sidebar h2 {
background-color: #008B8B;
}
I need to change the background color of the dropdown menu on my website:
https://institutoschuman.org/
I supposed it was very easy but I'm not able to do it. I've Checked the code of my style.css but I haven't found the lines that determine the color of the dropdown menu. Any suggestion?
You can update your style.css with the CSS below and change your background colour from white (#fff) to one you prefer, that should do it.
#media screen and (max-width: 960px) and (min-width: 0px) {
.respMenu {
background: #fff;
}
.respMenu a {
background: #fff;
}
}
The solution:
.menu ul.sub-menu, .menu ul.children {
margin-top: 65px;
}
.sub-menu > li {
background: white !important;
}
.sub-menu > li:hover {
background: #fcfcf4 !important;
}
.sub-menu > li > a {
color: black !important;
}
.sub-menu > li > a:hover {
color: #008ddb !important;
}
I'm trying to figure out how to change the hover color, but only when the text has a link
This is the css code, but it changes color with or without links
h1, h2, h3, h4 {
color:#3F3F3F;
}
h1:hover, h2:hover, h3:hover, h4:hover {
color:#000000;
}
This will depend on how you have structured the links.
There are two basic varieties.
a) Links inside headings. In which case:
a {
color: red;
text-decoration: none;
}
h1 a:hover {
color: blue;
}
<h1>Link Inside Heading</h1>
b) Headings inside links. In which event:
a {
color: red;
text-decoration: none;
border: 1px solid grey;
display: inline-block;
}
a:hover {
color: green;
}
/* or */
h1 {
background: #c0ffee;
}
a h1:hover {
color: pink;
}
<h1>Heading Inside Link</h1>
Sample:
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
color:grey;
}
The anwser you are looking for is simple:
h1 a:hover, h2 a:hover, ect {
color:#000000;
}
You stated that the header when hovered should change color, which is not what you want.
Now it says that a header which contains a link (a) should change color when it is hovered. ;)
I'm building this site www.shapeinthecity2.unicornrobots.com and I have a transparent floating header menu with white text on the homepage.
However, the text gets hidden as you scroll down. Is there a way to change the text color to black after you scroll past a certain point?
Below is the CSS script I've added so far,
Thanks
/*--- Menu Spacing & Color ---*/
.home #header-right-menu li a {
color: #ffffff;
}
.home #header-right-menu ul ul a {
color: #cccccc;
}
#header-right-menu ul ul a:hover {
color: #ffffff;
}
.top-navigation a, #header-right-menu a {
color: #000000;
margin-right: 80px;
}
#header-right-menu li a:hover {
color: #ff6600;
}
.top-navigation a, #header-right-menu ul ul a {
background: #000000;
}
.site-logo img {
margin-left: 80px;
}
.home.transparent-header .site-header {
position: fixed;
top:50px;
}
/*--- Menu Spacing & Color End ---*/
Hey I am not able to see your floating header, may be your script not working. As your site have one error. Check your source.
your code is visible on the site:
$('#whitediv').waypoint(function() {
alert('Change your background color of div');
$('.navbar').css('background-color', '#000000');
}, {
offset: '5%'
});
This code is visible. Please check and correct. Then we can check it properly. Thanks.
Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example
something like this or close to this would be preferable
#logo {
a: link {color: black}
a: visited{color: black}
a: hover{color: black}
}
However, the above syntax does not work instead all i can find is
#logo a:hover {
color: black;
}
#logo a:visited {
color: white
}
I feel like there's an easier way than this.
Heres how to do it to all links
I believe it should work:
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.
One can follow below method:
**If using ID with Field**
a:link#myID {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited#myID {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover#myID {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active#myID {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
**If using Class with Field**
a:link.myClass {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited.myClass {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover.myClass {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active.lx {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
Not directly in css, but there are some projects that extend css
Check out sass:
http://sass-lang.com
I also believe current CSS syntax is not all that optimal. My personal choice is to go with something like LESS where you get much more intuitive and compact syntax to style your work.
With pure CSS you must specify each pseudo-selector but you can group them to apply the same style attributes;
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Beware that The order of link pseudo-classes matters.