I am using bootstrap 5 "text-muted" to grey out or dim the text. On hover, I would like to undo this effect on the text. I am able to make other effects for e.g. text decorations (underline) etc., on hover but not able to revert this effect. Is there a way to do this?
li a {
color: white;
&:hover {
text-decoration: underline;
}
}
<li class="nav-item mb-2">Home</li>
BS provides the .text-reset class which does what you want.
Since you are compiling from source you can just extend the class:
li a {
color: white;
&:hover {
#extend .text-reset;
text-decoration: underline;
}
}
Or,
If you look at the style rule you can see what declarations are needed:
.text-reset {
--bs-text-opacity: 1;
color: inherit!important;
}
And copy them to your rule:
li a {
color: white;
&:hover {
--bs-text-opacity: 1;
color: inherit!important;
text-decoration: underline;
}
}
You need to revert the color of the link (like the color of the body) when hovering it
.nav-item a:hover {
color: $gray-900 !important; // It is #212529
}
If you will see the default color of the body in the variables.scss file it is $gray-900
$body-color: $gray-900 !default;
Related
I am trying to change color of material badge on hover.
I set
<div matBadge="+"
matBadgePosition="after"
matBadgeColor="accent"
matBadgeOverlap="false"
matBadgeSize="large">
</div>
::ng-deep .mat-badge-content:hover {
background-color: #98daf5;
color: white;
}
But it does not change at all.
How can I change color of the badge on hover?
When hovering div add .mat-badge-content.
::ng-deep div:hover .mat-badge-content {
background-color: #98daf5;
color: white;
}
I don't know if it's possible, or advisable even if it is. I'm using phpBB 3.2.3 I've replaced every instance of the word underline in styles/prosilver/theme/links.css with the word none. After doing that, I then changed the following line of code,
.postlink {
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 0;
}
to
.postlink {
text-decoration: none;
border-bottom: 0px solid transparent;
padding-bottom: 0;
}
And I changed the following code from styles/prosilver/theme/colours.css
.postlink {
border-bottom-color: #368AD2;
color: #368AD2;
}
.postlink:visited {
border-bottom-color: #5D8FBD;
color: #5D8FBD;
}
to
.postlink {
color: #368AD2;
}
.postlink:visited {
color: #5D8FBD;
}
I then purged the forum's cache and ctrl+f5'd my browser. Links now appear without an underline but only until I click, after which an underline appears. Is there any way for me to stop that underline from appearing? Or should I even try?
I found the answer elsewhere on this site!
I had to add the following line of code to the bottom of styles/prosilver/theme/links.css
a, a:hover, a:active, a:visited, a:focus {
text-decoration:none;
}
That did the trick! Now I'm not getting any underline at all!
Does anyone know how to make CSS link hover properties work for links that don't link to another html page or anchor?
For example this works:
Page1
Link
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
But the moment I change the link to something that's not an anchor or an html file, let's say a mailto:
<a href='mailto:bla#bla.com'>Send email</a>
It no longer changes color when I hover over the link.
Why is this?
You are overriding your own styles. Try
<style type="text/css">
a:link, a:visited
{
color: #555;
text-decoration: none;
}
a:hover, a:visited:hover
{
color: #fff;
text-decoration: none;
}
</style>
You don't need to do a:link, just a will do fine when defining your anchor tag style, however, if for some reason you do need it then you need to define your hover style more specifically than your link style.
a:link:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
or
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a,a:visited{
color:#555;
text-decoration:none;
}
will fix your problem
I want to loop through an array of things and create a tab for each one. When I pull up the page, however, each one appears on a new line. I'm using Slim, though I think this would translate to any other tempting language.
I also have a reset.css loaded before anything else, but the breaks remain.
Slim:
p Your dashboard!
.tabs
.tab-bar
- TYPES.each do |type|
.tab-item
p
= type.to_s
Scss:
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
You need to add a float:left; element onto the css element
tabs {
float:left;
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
It's probably because you're using a p element which is normally a block element. You can override this using something like display: inline; (not that you will need to do this on your .tab-item div too). You could also float the .tab-item elements instead.
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
display: inline;
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
display: inline;
}
}
}
}
I've implemented the jQuery datepicker. It seems to be working fine but the calendar is too large.
jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png
The site I'm working on has many layers of stylesheets and parent pages and controls. And I don't seem to be able to isolate what is making it large. (Sorry, the site isn't public.)
It appears the calendar is based on a font size. I tried wrapping my textbox in a div with a smaller font but it seems to ignore that. Is there any way to specify a fixed font size?
While changing the font size for .ui-widget works, I got the best results with the following.
#ui-datepicker-div { font-size:11px; }
Not only does this seem to do exactly what I need, it is also unlikely to impact any other jquery-ui widgets.
try setting font-size for class .ui-datepicker
.ui-datepicker {font-size:11px;}
http://jsfiddle.net/pxfunc/ps5cA/
It takes some digging in firebug but I have included one of the versions I use to reduce it. The key is to copy the exact styles from the jQuery-ui CSS file and put them in the head of the page you need them or in a CSS style sheet after the jQuery-ui style sheet.
.ui-datepicker {
padding: 0.1em 0.1em 0;
width: 11em;
}
.ui-widget {
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
}
.ui-datepicker th {
border: 0 none;
font-weight: normal;
padding: 0.2em 0.1em;
text-align: center;
}
.ui-datepicker th span {
font-size: 11px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0.1em;
}
.ui-datepicker td {
padding: 0.9px;
}
.ui-datepicker .ui-state-highlight {
height: 12px;
margin-bottom: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-size: 10px;
font-weight: normal;
text-align: center;
}
.ui-datepicker .ui-datepicker-title {
line-height: 13px;
}
.ui-datepicker .ui-datepicker-title span {
font-size: 11px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin-left: -8px;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
height: 15px;
top: 1px;
width: 15px;
}
.ui-datepicker-next-hover .ui-icon {
height: 16px;
width: 16px;
}
Adding this to the site.css worked for me
.ui-widget {
font-size: .7em !important;
}
you can change "jquery-ui-1.10.4.custom.css" as follows
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Our calendar was big and ugly looking with hard to click month arrows. It was caused by mismatching versions of the jquery-ui css and jquery-ui js includes.
version numbers must match e.g.
jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js
but also needed the css recommended above
#ui-datepicker-div { font-size:11px; }
I agree with mdmullinax. You have to change the font size for the whole class
.ui-datepicker-div { font-size:11px; }
because datepicker is not controlled by id so below change has no impact on size
ui-datepicker-div { font-size:11px; }
h