On certain browsers (Firefox, in this case), the size of a given font is different, which prompted me to download a copy of a theme (desert) from the Google Code page and tweak it myself since the theme had a different background color from my website and I wanted to change the background color of the theme to fit that of my website. However, this version of the theme creates a border around the assumed code area, unlike when I used the online version. I was able to fix the color issue, but I would very much like to remove the border.
I would embed the image, but I am not allowed to since I do not yet have 10 reputation on StackOverflow.
Image below from Firefox (which had the worst case of code overflow)
http://i1164.photobucket.com/albums/q570/SparenofIria/ScreenShot2015-01-19at21732PM_zps0541bc46.png
If someone could direct me to a solution, that would be greatly appreciated. Thank you.
EDIT: The border is filling to the size of the div.
Below are the contents of desert.css. The only things that have been changed from the version I found online are the background colors (#333 to #FFF).
/* desert scheme ported from vim to google prettify */
pre.prettify { display: block; background-color: #FFF }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff } /* punctuation */
pre .pln { color: #fff } /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow*/
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal - lightgreen */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
#media print {
pre.prettify { background-color: none }
pre .str, code .str { color: #060 }
pre .kwd, code .kwd { color: #006; font-weight: bold }
pre .com, code .com { color: #600; font-style: italic }
pre .typ, code .typ { color: #404; font-weight: bold }
pre .lit, code .lit { color: #044 }
pre .pun, code .pun { color: #440 }
pre .pln, code .pln { color: #000 }
pre .tag, code .tag { color: #006; font-weight: bold }
pre .atn, code .atn { color: #404 }
pre .atv, code .atv { color: #060 }
}
add border:none; outline:none; box-shadow:none; To that element's css since one of those is most likely causing that. This is the best i could do without actually looking at the code
By adding !important;, the css now works. Thanks to those who helped, but in the end I just didn't look around hard enough/forgot that !important; existed.
pre.prettyprint {
border: none !important;
}
Related
I am trying to make Dark Mode for my website, but my CSS file kept on saying:
to include an RBRACE ( } ) for every line
line 9 is saying put a colon in character 5
it says rule is empty for lines 5, 16, and 20
for line 36, it says Expected (<color> | inherit) but found 'var(--text-color)'
for line 26, it says that 'The universal selector (*) is known to be slow."
Does anyone know how to fix this mess?
Thanks in advance for responding.
Here is my code for reference.
body {
--text-color: #222;
--bkg-color: #fff;
body.dark-theme {
--text-color: #eee;
--bkg-color: #121212;
}
#media (prefers-color-scheme: dark) {
/* defaults to dark theme */
body {
--text-color: #eee;
--bkg-color: #121212;
}
body.light-theme {
--text-color: #222;
--bkg-color: #fff;
}
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
background: var(--bkg-color);
}
h1,
p {
color: var(--text-color);
}
Your top body {} rule is missing its closing }.
Change this:
body {
--text-color: #222;
--bkg-color: #fff;
body.dark-theme {
--text-color: #eee;
--bkg-color: #121212;
}
to this:
body {
--text-color: #222;
--bkg-color: #fff;
} /* <-- here */
body.dark-theme {
--text-color: #eee;
--bkg-color: #121212;
}
However, your stylesheet still has repeating values, you can normalize it somewhat by defining your actual color values only on the :root (aka html):
And then referencing them from within both #media (prefers-color-scheme: dark) { and body.dark-theme, which means UA-based color schemes can work as well as JS-based overrides too.
Because the DOM still doesn't have an API to set color scheme for some reason.
Also, you don't need a * { font-family: } rule, just set it on body.
And Helvetica should come before Arial because Helvetica just looks better.
/* #region Light/Dark Scheme Properties */
:root {
--text-color-light: #222;
--bkg-color-light : #fff;
--text-color-dark : #eee;
--bkg-color-dark : #121212;
/* Default to the light scheme (before `prefers-color-scheme` and/or `body.dark-theme` are applied): */
--text-color : var(--text-color-light);
--bkg-color : var(--bkg-color-light);
}
#media (prefers-color-scheme: dark) {
/* For UA color scheme: */
body {
--text-color: var(--text-color-dark);
--bkg-color : var(--bkg-color-dark);
}
}
body.dark-theme {
/* For CSS-class/JS-based color scheme override: */
--text-color: var(--text-color-dark);
--bkg-color : var(--bkg-color-dark);
}
/* If you want to add a CSS clas `.light-theme` to *override* prefers-color-scheme: dark, then uncomment this: */
/*
body.light-theme {
/* For CSS-class/JS-based color scheme override: */
--text-color: var(--text-color-light);
--bkg-color : var(--bkg-color-light);
}
*/
/* #endregion Light/Dark Scheme Properties */
/*
*DO NOT* reference any of the `-dark` or `-light` properties at all below this point.
You only need to reference the non-suffixed custom-properties, as those will always be set to the current *effective* color scheme's values, whether from `prefers-color-scheme` or by `.dark-theme` (or `.light-theme`).
*/
body {
background-color: var(--bkg-color);
font-family: Helvetica, Arial, sans-serif;
}
h1,
p {
color: var(--text-color);
}
In my jQuery v3 / Bootstrap v4.1.2 application, I use chosen.jquery (Version 1.8.7) and I did not find how to set color of placeholder text of of Chosen selection input with styles like:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #c2c200 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #c2c200 !important;
opacity: 1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #c2c200 !important;
opacity: 1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: ##c2c200 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #c2c200 !important;
}
::placeholder { /* Most modern browsers support this now. */
color: ##c2c200 !important;
}
And I init it with code:
$(".chosen_select_box").chosen({
disable_search_threshold: 10,
allow_single_deselect: true,
no_results_text: "Nothing found!",
});
You can look at it this fiddle:
http://jsfiddle.net/1Lpdk79r/3/
But it does not work for chosen input. How to fix it?
If you view the source of your fiddle, you can see that the Chosen plugin generates a text input from your select, and adds the placeholder text as the input value. It also styles that input. So you just need to override the Chosen styling with your own.
This will do, to change text colour:
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
color: #c2c200;
}
Here's an updated version of your fiddle showing the result.
I am trying to apply a simple colour to a specific input box. I know that we can do this:
::-webkit-input-placeholder {
color: #000000;
}
:-moz-placeholder {
color: #000000;
}
:input:-ms-input-placeholder {
color: #000000;
}
So to get it working on my input box I tried:
.search-top-container form input::-webkit-input-placeholder {
color: #000000;
}
.search-top-container form input:-moz-placeholder {
color: #000000;
}
.search-top-container form input:-ms-input-placeholder {
color: #000000;
}
But it isn't working. I tried using important tags as well but that doesn't work. Any help is much appreciated, thanks!
You're not saying in which browser it isn't working, but you do have an error with the Mozilla code. The latest Mozilla browsers (since v19) work only with two colons, so ::-moz-placeholder instead of :-moz-placeholder.
In addition, the default style for a placeholder contains opacity:.4, so if you want cross browser compatibility, you will have to set the opacity too. See MDN.
.search-top-container form input::-webkit-input-placeholder {
color: #F00000;
opacity: 1;
}
.search-top-container form input::-moz-placeholder {
color: #F00000;
opacity: 1;
}
.search-top-container form input:-ms-input-placeholder {
color: #F00000;
opacity: 1;
}
<div class="search-top-container">
<form>
<input placeholder="Firstname Lastname" />
</form>
</div>
(Note that in this snippet, I used red for the colour, to avoid situations where you might think it's not working because it happens to be the same colour as the default.)
I'm using wkhtmltopdf to generate a pdf of a page but it doesn't display any of the fonts in the correct colour, they all are presented black.
The colour is defined as you'd expect:
.panel-dashboard p.stat {
color: #bed000;
}
and displays correctly when viewed in the browser.
I'm calling it as
wkhtmltopdf path/to/page filename
Does wkhtmltopdf just not render font colours correctly? I've not been able to find any issues relating to this.
Appears this was a problem with wkhtmltopdf 0.9.9, 0.11 renders css font colors correctly.
Using version 0.12.2.4 specifying a white font inside the CSS (inside a grey background) worked, but a colored font (red, orange) did not:
.header { background-color: #888; color: #fff; } /* works */
.orange { color: f80; } /* doesn't work in wkhtmltopdf */
Using a style directly on the div did work:
<div style="color:#f60;">My Orange Text</div>
It may be because there is no background?? I don't know.
So if you try CSS and it fails this may work...
You are probably using this proposed CSS which has defined #media print { * { color: black !important; } }
Using version 0.12.6 here. Results look like following:
[pandoc.css] #media print { * { color: black !important; } }
[my.css] TODO2 { color: #700 !important; }
TODO3 { color: #700; }
[file.md] <TODO1 style="color: #700 !important;">black</TODO1>
<TODO1 style="color: #700;"> black</TODO1>
<TODO2> red</TODO2>
<TODO3> black</TODO3>
and
[pandoc.css] #media print { * { color: black; /* not important */ } }
/* or not using proposed pandoc.css at all */
[my.css] TODO2 { color: #700 !important; }
TODO3 { color: #700; }
[file.md] <TODO1 style="color: #700 !important;">red</TODO1>
<TODO1 style="color: #700;"> red</TODO1>
<TODO2> red</TODO2>
<TODO3> red</TODO3>
Two questions:
I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. JSFiddle demo
Another question is how do I change placeholder color not globally. That is, I have multiple fields, I want only one field to have white placeholder, all the others remain in default color.
html:
<form id="search-form" class="navbar-form navbar-left" role="search">
<div class="">
<div class="right-inner-addon"> <i class="icon-search search-submit"></i>
<input type="search" class="form-control" placeholder="search" />
</div>
</div>
</form>
css:
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
background-color:#303030;
font-size: 13px;
color:white;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 12px;
/* pointer-events: none; */
cursor: pointer;
color:white;
}
/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18
:-moz-placeholder { color: white; }
FF 19+
::-moz-placeholder { color: white; }
IE 10+
:-ms-input-placeholder { color: white; }
Assign the placeholder to a class selector like this:
.form-control::-webkit-input-placeholder { color: white; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge */
It will work then since a stronger selector was probably overriding your global. I'm on a tablet so i cant inspect and confirm which stronger selector it was :) But it does work I tried it in your fiddle.
This also answers your second question. By assigning it to a class or id and giving an input only that class you can control what inputs to style.
There was an issue posted here about this: https://github.com/twbs/bootstrap/issues/14107
The issue was solved by this commit: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5
The solution therefore is to override it back to #999 and not white as suggested (and also overriding all bootstraps styles, not just for webkit-styles):
.form-control::-moz-placeholder {
color: #999;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
A Possible Gotcha
Recommended Sanity Check - Make sure to add the form-control class to your inputs.
If you have bootstrap css loaded on your page, but your inputs don't have the
class="form-control" then placeholder CSS selector won't apply to them.
Example markup from the docs:
I know this didn't apply to the OP's markup but as I missed this at first and spent a little bit of effort trying to debug it, I'm posting this answer to help others.
I'm using Bootstrap 4 and Dennis Puzak's solution does not work for me.
The next solution works for me
.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; } /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge*/
Bootstrap has 3 lines of CSS, within your bootstrap.css generated file that control the placeholder text color:
.form-control::-moz-placeholder {
color: #999999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999999;
}
.form-control::-webkit-input-placeholder {
color: #999999;
}
Now if you add this to your own CSS file it won't override bootstrap's because it is less specific. So assmuning your form inside a then add that to your CSS:
form .form-control::-moz-placeholder {
color: #fff;
opacity: 1;
}
form .form-control:-ms-input-placeholder {
color: #fff;
}
form .form-control::-webkit-input-placeholder {
color: #fff;
}
Voila that will override bootstrap's CSS.
The others did not work in my case (Bootstrap 4). Here is the solution I used.
html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }
If we use a stronger selector (html first), we don't need to use the hacky value !important.
This overrides bootstraps CSS as we use a higher level of specificity to target .form-control elements (html first instead of .form-control first).
I think qwertzman is on the right track for the best solution to this.
If you only wanted to style a specific placeholder, then his answer still holds true.
But if you want to override the colour of all placeholders, (which is more probable) and if you are already compiling your own custom Bootstrap LESS, the answer is even simpler!
Override this LESS variable:
#input-color-placeholder
Boostrap Placeholder Mixin:
#mixin placeholder($color: $input-color-placeholder) {
// Firefox
&::-moz-placeholder {
color: $color;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
}
now call it:
#include placeholder($white);
You should check out this answer : Change an HTML5 input's placeholder color with CSS
Work on most browser, the solution in this thread is not working on FF 30+ for example
With LESS the actual mixin is in vendor-prefixes.less
.placeholder(#color: #input-color-placeholder) {
...
}
This mixin is called in forms.less on line 133:
.placeholder();
Your solution in LESS is:
.placeholder(#fff);
Imho the best way to go. Just use Winless or a composer compiler like Gulp/Grunt works, too and even better/faster.