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;
}
Related
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 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;
}
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.
I have two divs in a web page (say view_1 and view_2). I want the styles of the links in each div to be different. Let's say the styles of the links are as follows:
style of links in div view_1:
a:link {
color: #CB4C2F;
text-decoration: none;
}
a:visited {
color: #CB4C2F;
}
a:active,
a:hover {
color: #B60A00;
}
style of links in div view_2:
a:link {
color: #B5B5B5;
text-decoration: none;
}
a:visited {
color: #808080;
}
a:active,
a:hover {
color: #FFFFFF;
}
In the page, I want to specify only the div in use. I do not want to specify a style for the links; the links should adopt the styles from the div in which they exist. How may this be accomplished?
Add classes to your div's
View_1
.view_1 a:link {
color: #CB4C2F;
text-decoration: none;
}
.view_1 a:visited {
color: #CB4C2F;
}
.view_1 a:active,
.view_1 a:hover {
color: #B60A00;
}
View_2
.view_2 a:link {
color: #B5B5B5;
text-decoration: none;
}
.view_2 a:visited {
color: #808080;
}
.view_2 a:active,
.view_2 a:hover {
color: #FFFFFF;
}