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!
Related
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;
I have a link that looks like this:
Документи
And problem is that in Safari when "Документи" is underlined, letter "Д" and "у" cut line and there is small white space in link line.
How to remove these white gaps in link?
Remove the underline for all <a> elements
In CSS you could do:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Remove the underline for only Cyrillic class
Or alternatively for only Cyrillic links:
a.cyrillic {
text-decoration:none;
}
a.cyrillic:hover {
text-decoration:none;
}
Here's a JSFiddle to clarify.
This removes the underline from the link. It's by no means perfect (if you wanted to retain the underline) but it at least solves the issue by removing it entirely. Of course, this assumes that your links are coloured somehow
border-bottom underline
It is possible to get the result you want using the CSS border-bottom style as such:
a.cyrillic {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
a.cyrillic:hover {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
And obviously on your HTML <a> element it should be:
Документи
Here's another JSFiddle to clarify.
I have a paper-droopdown-menu that displays normally. But I would like to change the backgroud colour as shown in the graphic below
I have tried the following but it did not affect the background.
* /deep/ paper-dropdown-menu::shadow #menu {
background-color: #eee;
border: 1px solid #ccc;
}
paper-dropdown-menu {
background-color: red;
}
or just the input element
paper-dropdown-menu::shadow #control {
background-color: red;
}
If this isn't what you want, can you please add the HTML to your question that produces the layout you have in your screenshot.
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated
I've been following along with the examples in the book in making a online catalog and am having a couple of discouraging difficulties in Chapter 8 task C: Catalog display.
I have input the code for the stylesheets as instructed but it has created a slightly skewed result as compared to what is shown in the book. Whilst minor and aesthetic in nature its a little shock to my confidence and slightly irritating when trying to carry on through the book.
As you can see the border seems a little confused and the image at the top is covering the header text.
I've been through the code time and time again but can't seem find out where I've gone wrong. Could anybody give me some clues?
Code from application.css.scss (I'm assuming its here)
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 1em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
colour: #bfb;
font-size: small;
}
}
}
}
The only thing that gives me a hint is in sublime text 2 all beginning with a hash (#banner, #notice etc) are green, but #main is not for some reason?
Same happens to me. I am not sure what to make of this problem as the #banner.img should float left. When examining the compiled application.css, I find the following:
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center; }
#banner img {
float: left; }
As shown above, we have a "#banner img {" starting block which is properly closed, and the #banner block is correctly closed just before that on the same line as 'text-align: center;'. Even if I eliminate all other css elements after the #banner and #banner img blocks, the problem persists.
With my limited CSS knowledge, the only semblance of correct positioning I could quickly figure out was to remove the text-align: center from the #banner block, and add some padding, or alternatively, set the left-margin of the #banner.img to -400px or something. It's not very elegant nor perfectly functional (resizing screws it all up).