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 currently trying to create a dark SO theme with Stylish.
Everything was going great until I had to customize the snippet.
I can't seem to change the selection color to any other than the one predefined :
.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{
background:#d7d4f0;
}
I tried adding this, but nothing is changing :
.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{
background: blue !important;
}
Is there anyway to change the selection background here?
Here's the complete CSS from the theme, if it helps :
body, #questions div, .qa-block, #content {
background:#282828 !important;
}
#footer.categories {
background:#181818 !important;
}
.post-text {
background:#D5D5D5 !important;
color:#000000;
}
h1, h2, h3, h4 .page-description td, p, .owner-revision span, .revision span, div.container, #mdhelp pre, .badgecount, .comments, .user-panel-content td, .user-panel-content th, .content-page, .viewcount, .welovestackoverflow, .vote-count-post, .summarycount, #sidebar.module p .vote-count-post, .answer-votes, div.comment-body, h1 a, h4, span.reputation-score, div.module.question-stats p, span.page-numbers, #newsletter-ad, .item-summary, div.new-about-content-page.about-content-page div h2.about-title, .module.newuser, .page-description td, .bulletin-title, .status.answered span, .status.answered div, .label-key b, .excerpt, .answer-help, #mdhelp, .rep-col .rep, .user-card .user-card-name, #avatar-card .reputation {
color:#C0C0C0 !important;
}
.user-stats .stat span, #avatar-card .badgecount, #badges-table .badges-number {
color:#666 !important;
}
.revision-comment, .user-info-rep, .user-info-rep .user-details, .nav.mainnavs li a, .tag-container .col, .tar-container .stat .number, .top-tags .tag-wrapper .tag-container .stat .number, .card, .jobs, .login-link.btn {
color:#C0C0C0 !important;
background: #303030 !important;
}
.vote-count-post, .votes {
color:#E3E3AC !important;
}
span.count, .badge-tag {
color: #FFFFFF !important;
}
.stats {
background-color:#C0C0C0 !important;
}
#questions .status.unanswered {
color:#C23B22 !important;
}
.status.unanswered span {
color:#777777 !important;
}
.diff-delete {
background:#501010 !important;
}
.diff-add {
color:#A0E0A0 !important;
background:#105010 !important;
}
#questions .status.answered, .user-about-me, .stats {
background:#353535 !important;
}
#reputationGraph, .graph {
background:#FFF !important;
}
.result-highlight {
color:#FFFFFF !important;
}
#questions .status.answered-accepted {
background:#759971 !important;
}
.answer-hyperlink:visited{
color:#A187BE !important;
}
a, h1>a:visited, .answer-hyperlink, .reputation a:visited {
color:#6ECFF6 !important;
}
.content-block, .on-topic-examples, .off-topic-examples, .topbar .header, .modal-content, .welovestackoverflow, .comment-user, .community-bulletin, .revision td, #nav-askquestion, .answer-votes, #tabs a, .tabs a, .nav.mainnavs li, .question-status, #newsletter-ad .company-ad-b, .company-ad-sb, #hero-content, .module.newuser, .subtabs a.youarehere, .user-show-new .user-header-slim .data, .page-numbers.current, .other-sites, .topbar .topbar-icon-on, .topbar .topbar-icon-on:hover, .answer-help-background, #mdhelp-tabs, .ad502-room, header, .topbar-dialog div.header {
background-color:#373737 !important;
}
.owner-revision td, .owner-revision .revision-comment, .owner-revision .user-details{
background: #4A5287 !important;
}
.comment-user.owner {
background:#2E5666 !important;
}
.comment-user {
padding:2px !important;
}
.post-tag, #toc {
background:#454545 !important;
border:0px !important;
}
.welovestackoverflow, .topbar-dialog {
border: 0px !important;
}
.mdhelp-tabs, #hireme {
border: 1px solid #888 !important;
}
.top-tags .tag-wrapper .tag-container .col {
border-right:2px solid #888 !important;
}
.module, #question-header, .question-summary, .subheader, #tabs > a, .tabs > a, .company-ad-b, .company-ad-sb, #hero-content, div.subtabs a, .page-numbers, .topbar-dialog li, .user-about-me, .user-show-new .user-header-slim .data, .comment td, .answer, .wmd-input, .wmd-button-bar, .wmd-preview, .grippie, .ad502-room, .card, .progress-bar div {
border-color:#888 !important;
}
.topbar-dialog {
background-color:#888 !important;
}
.post-signature.owner, .user-details, .tagged-interesting, #hireme {
background:#353535 !important;
}
.comment:hover, .js-gps-track:hover, .siteSwitcher-dialog li:hover, .inbox-item:hover, header .topbar-icon-on, header .secondary-nav .-item .-link:hover {
background:#555555 !important;
}
input {
background:#E5E5E5 !important;
color:#404040 !important;
}
#hmenus a:hover {
background:#606060 !important;
}
textarea {
background:#404040 !important;
color:#C0C0C0 !important;
}
.grippie {
background:#454545 !important;
}
.feed-icon {
background-color: rgba(255, 255, 255, 0) !important;
}
/* old logo */
#hlogo a {
background-image: url("http://i.imgur.com/zeNdkNx.png") !important;
background-size: 280px;
width:280px;
height:90px;
}
/* new header logo */
.so-header .-logo .-img {
background-image: url("https://i.imgur.com/lLtU6Nd.png") !important;
background-size: 150px;
width:150px;
height:30px;
background-position:0;
margin-top:-4px;
background-repeat:no-repeat;
}
.community-bulletin, .ad502-room {
box-shadow:none !important;
}
/* code colors */
.post-text {
background:#282828 !important;
color:#C0C0C0 !important;
}
.prettyprint, blockquote, pre, pre>.spaces, .hi, .badge-tag {
background:#353535 !important;
}
code {
background:#353535 !important;
color:#C0C0C0 !important;
}
.lit { /* literal */
color:#FF6961 !important;
}
.tag { /* tag */
color:#FF6961 !important;
}
.atn {
color:#C23B22 !important;
}
.atv {
color:#AEC6CF !important;
}
.str { /* string*/
color:#C23B22 !important;
}
.pln { /* plain text */
color:#E0E0E0 !important;
}
.pun { /* punctuation */
color:#A0A0A0 !important;
}
.com { /* comment */
color:#ACD372 !important;
}
.kwd { /* keyword */
color:#AEC6CF !important;
}
.typ { /* type */
color:#7EB1C4 !important;
}
.new-post-activity{
background-color: inherit;
}
.snippet-code{
border: none !important;
}
.snippet-holder{
background: #2a2a2a !important;
}
.CodeMirror-scroll{
background: #353535 !important;
}
.cm-def,.cm-atom,.cm-attribute,.cm-s-default{
color: #6262ff !important;
}
.cm-s-default .cm-keyword{
color: #9e1fb1 !important;
}
.cm-tag{
color: #44833a !important;
}
.cm-string{
color: #8d3535 !important;
}
.CodeMirror{
color: #C0C0C0 !important;
background: #353535 !important;
}
.CodeMirror-selected {
background: blue !important;
}
.CodeMirror-focused .CodeMirror-selected {
background: blue !important;
}
.CodeMirror-scroll .CodeMirror-line::selection,.CodeMirror-scroll .CodeMirror-line>span::selection,.CodeMirror-scroll .CodeMirror-line>span>span::selection{
background: blue !important;
}
.CodeMirror-gutters{
background: #424242 !important;
}
#snpte-box-edit-result{
background: #7d7d7d !important;
}
.snippet-modal .-code .column.result .-name{
color: #bebfbf !important;
}
.clc-cp-sb--short .-wrapper{
background-color: #3d3d3d !important;
}
.clc-cp-sb--short .-bg-image:after{
background-color: #484848 !important;
}
.clc-cp-container .clc-cp-tag{
background: #454545 !important;
}
.clc-btn-secondary{
background: #606060 !important;
}
.clc-cp-sb--tall{
background-color: inherit !important;
border: none !important;
}
.clc-cp-sb--tall .clc-cp-sb-learnmore-wrap{
background-color: inherit !important;
}
#hireme{
margin-bottom: 20px;
}
.mainbar.reviewable-answer,.comment.js-comment {
background-color: inherit !important;
}
#new-answer-activity, .new-post-activity{
background-color: inherit;
}
.p-highlights .-card{
background-color: inherit;
border: 1px solid #e4e6e8;
}
.p-highlights .-graph{
background-image: url(https://data.zenoo.fr/stackoverflow_lines.svg)
}
aside.-badges>div:first-of-type>div{
background-color: #202020;
border-color: #646363;
}
In codemirror.css, from line 321 you will see:
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
Copy these rules into your styleesheet.
Try replacing the background-color property with your custom color for all of these rules.
Try adding !important.
As far as I can tell, my comment on the sol answer is working
.CodeMirror-selected {
background: red;
}
.CodeMirror-focused .CodeMirror-selected {
background: red
}
So, thanks to #vals, I noticed that
.CodeMirror-selected {
background: red;
}
.CodeMirror-focused .CodeMirror-selected {
background: red
}
was working on its own, but not in my Stylish theme, I finally understood why:
The rule
.prettyprint, blockquote, pre, pre>.spaces, .hi, .badge-tag {
background:#353535 !important;
}
Was overwriting any background we tried to put on the selection. So I added a fix to it, targeting the Snippet line more precisely :
pre.CodeMirror-line{
background: inherit !important;
}
Now #vals solution is working :)
Thanks everyone for helping me solve this !
::-moz-selection { /* Code for Firefox */
background:#d7d4f0;
}
::selection {
background:#d7d4f0;
}
use this code it resolve your problem
I have two pages that the bootstrap navigation menu color is different than the rest of the pages (total three different settings).
The navigation menu is one html file (that is linked to each page).
I want to have all code on ONE css file. How would I do that please?
Thank you. Here is a sample of the code:
.navbar-default {
background-color: #65625B;
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000)";
zoom: 1;
background-color: rgba(255, 255, 255, 0.0) !important;
border-color: transparent;
border-color: #65625B;
border-color: rgba(255, 255, 255, 0.0) !important;
font-size: 12px;
}
#media(max-width:767px){
.navbar-default {
background-color: #65625B !important;
border-color: #65625B !important;
}
}
/* 3-bar button color */
.navbar-toggle {
background-color: #65625B !important;
}
/* 3-bar button hover */
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #83817b !important;
}
/* 3-bar button border */
.navbar-default .navbar-toggle {
border-color: #65625B !important;
}
Assuming each page has its own body, assign a unique ID to the page that requires a different color.
<body id="my-blue-navigation">
Then in your CSS you refer to the correct class.
#my-blue-navigation .navbar-default {
background-color: blue;
}
nav {
width: 100%;
height: 100px;
}
.navbar-default {
background-color: red;
}
#my-blue-navigation .navbar-default {
background-color: blue;
}
<body id="my-blue-navigation">
<nav class="navbar-default">
</nav>
</body>