I want to modify the color and the border in a Bootstrap nav bar but when I write this on my SCSS nothing happens:
.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
When I inspect the element in Chrome my code is dismissed, It only takes into account the Bootstrap default style.
Image
Any help will be welcomed.
Thanks.
For a CSS rule to be overriden, you have a lot of options. The cleanest would be to be more specific (by at least one rule) than the one you want to override.
If I follow your example:
.nav-tabs li.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
You'll find more informations here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Related
I have been asked to theme my APEX 19.2 app and the designer has come back with a fairly simple ask. The top left hamburger be white and purple like below:
I am using the theme roller to apply the settings and can't seem to get the active and inactive state to stay white and purple.
I have even tried my own CSS in the theme roller like below but only with limited success.
Any ideas how I can achieve this?
CSS I am currently trying
t-Button--icon {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
t-Button--header {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
t-Button--headerTree {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
t-Header-controls {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
is-active {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
NavigationBar {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
Even with all of this my button active and hover still looks like this:
I feel like I am close but after several hours of fiddling, I thought it was about time I consult the collective experts. Any help and advice would be greatly appreciated. If you can't already tell I am still learning CSS.
You ought to use the CSS :hover selector which is used to select elements when one mouses over them.
Assuming the hamburguer menu has a class named burguer
.burguer:hover {
color: #393093;
background: #ffffff;
border-color: #393093;
}
Then change the hover and active effects :)
.burguer:hover {}
.burguer:active {}
It might be worth checking if Apex does not use a selector that has "higher ponctuation" than something so simple. In such case, you might want to create a composite selector
button.t-Button--header .burguer:hover{}
Good Luck
I am styling some popups for a map displayed through Mapbox using Mapbox's GL JS. However, I cannot find in their documentation regarding the classes that are automatically assigned to the popups. Thus far, my CSS looks like this:
.mapboxgl-Popup-content {
color: #F3F3DD;
background-color: #91785D;
border-color: #91785D;
max-width: 250px;
box-shadow: 3px 3px 2px #8B5D33;
font-family: 'Oswald';
}
This yields these pretty little boxes:
My issue is the white triangle at the very bottom that points to the marker. I want to change its color.
I have tried a number of CSS classes to fix this. Including, but not limited to, .mapboxgl-popup, .mapboxgl-popup-anchor, .mapboxgl-popup-pointer, etc. I am not sure where to acquire the documentation I need to know what CSS class I should be using to change the color of this pesky triangle.
Here's what you need. It's not just one class because the tip can change position:
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
border-bottom-color: #fff;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
border-top-color: #fff;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
border-right-color: #fff;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
border-left-color: #fff;
}
The CSS class that you need to update is ".mapboxgl-popup-tip". If there is no any class like that in your CSS file, just create it and give the color what you want to "border-top-color: " attribute.
I figured out why applying CSS doesn't affect the element (in this case, the tip).
I did some debugging in Chrome with Inspect Element.
It turns out my CSS was indeed being applied; however, it was being overridden from the MapBox stylesheet I applied in my index.html.
At first, I thought that maybe if I reordered my stylesheets I could have my stylesheet be invoked after the MapBox stylesheet, then I'd be fine.
This was not true.
Inspect element still showed my CSS was being overridden.
The solution was to add !important:
border-top-color: black !important;
This would override any previous styling done by MapBox.
For more info see:
What do the crossed style properties in Google Chrome devtools mean?
https://www.w3schools.com/css/css_important.asp
.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #f15b28; }
i finally got it how this works. <Popup archor={'bottom'}, use .mapboxgl-popup-anchor-bottom plus .mapboxgl-popup-tip changing border color (top, bottom, left, right).
I'm using AdminLTE 2.3.8. It overrides buttons background on it's box header buttons when hovered, but I want to keep original colors when hovered over any buttons. Eg.:
AdminLTE CSS:
.btn-default {
background-color: #f4f4f4;
}
.box.box-solid>.box-header .btn.btn-default {
background: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: #e7e7e7;
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: rgba(0,0,0,0.1);
}
I just want to get rid of these .box.box-solid>... rules without editing vendor's CSS. Is there any way to achieve this without copying every button style (there are different colors)? If there is, solution would be very welcome.
Use !important within your styles, so that any other vendor styles doesn't conflict with these buttons.
Example:
.btn.btn-default:hover {
background-color: blue !important;
}
Hope this helps!
I added an "aside" to the essay "To the Person Sitting in Darkness" here (Miscellaneous tab), but the links appear ghostlike. What inline CSS do I need to add to make those links dark (forestgreen would work, probably)?
In your a link, right after the a, add style="color:green" Substitute "green" for any HEX color you want.
You could manually add "style: color #FFF8DC;" to each of the tags in the aside elements
The Philippine-American War
The more efficient way is to add this style to the stylesheet, not inline on each element.
.aside a {
color: #FFF8DC;
}
Hope that helps!
the problem is that your jqueryUI.css file is applying a darker gray here in line 413:
.ui-widget-content a {
color: #222222;
}
if you remove this line you'll get the a to its normal color style which is #333, applied in your CSS file line 476.
a {
color: #333;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
if you want a different color to that links specifically then you just need to set this in your CSS:
#MiscTwainContent a {
color:#whatevercoloryouwant
}
With this in mind, no need for using inline-styling, which it is not a good practice.
The simplest way to do it, since the question is just asking about the link text (inside an a / anchor tag) is this:
a {
color: green;
}
Or better yet, per'aps:
a:link, a:visited {
color: green;
}
This is a problem that I've been having for quite some time now. For some reason, the CSS rules for my links aren't working properly. As far as I can tell, when using Chrome's Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I've added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.
a:link, a:hover, a:active
{
text-decoration: none;
color: #FF8C00;
background-color: transparent;
}
a:visited
{
text-decoration: none;
color: #FF8C00;
background-color: transparent !important;
}
a.search:link, a.search:visited, a.search:hover, a.search:active
{
font-family: helvetica-light;
font-size: 19px;
color: #999;
text-decoration: none;
background-color: transparent;
}
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover
{
text-decoration: none;
color: #E3E3E3;
font-family: helvetica-light;
font-size: 20px;
background-color: transparent;
}
For some reason, even though a:link/etc have "color: #FF8C00" they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as stuff
Have you tried changing;
color: #999;
Into;
color: #999 !important;
This will tell the CSS parser to overwrite the #FF8C00 color to #999.
Changing the order of the CSS blocks could also give you the expected result.
Sometimes getting the look you want might require some trial and error. :)
A couple of things you could try
clear your browser cache
Make sure no other css files are been called
Go to w3c html validation site
I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.