from a working css file (generated by font-squirrel):
#font-face {
font-family: 'SnowTopCaps';
src: url('/fonts/snowtopcaps-webfont.eot');
src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/snowtopcaps-webfont.woff') format('woff'),
url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
font-weight: normal;
font-style: normal;
}
trying to declare in style section in jade document:
...
style
#font-face
font-family
| SnowTopCaps
src
| url('/fonts/snowtopcaps-webfont.woff') format('woff')
font-weight
| normal
font-style
| normal
...
but none of the style declaration is written to the generated html?
any anybody see what's missing here?
This syntax is for HTML, not for css.
Use
style.
#font-face {
font-family: 'SnowTopCaps';
src: url('/fonts/snowtopcaps-webfont.eot');
src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/snowtopcaps-webfont.woff') format('woff'),
url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
font-weight: normal;
font-style: normal;
}
Or use the :stylus filter
Related
I currently have an App_Offline.htm file that works fine. When it's on the root of the site, all users are forces to the App_Offline.htm page and the application is prevented from loading.
We are adding some animations and images and the only proper way to do it in an App_Offline.htm is to use base64 images, inline.
The minute I add this (note I shortened the base64 for the post), it works if I go to the file in the browser directly but IIS/Azure/App Service, does not automatically force users to the page and prevent the app like it normally does.
.image2 {
width: 57px;
height: 54px;
background-image: url(data:image/png;base64,iVBOR.....rkJggg==);
}
I figure there some content security setting or something I need add. Even though the page loads properly, what's preventing IIS/App Service from forcing everyone to the page when it has a base64 image?
Unless there's a file limit size, it's current 2896 KB, but from research there doesn't seem to be one.
Normally, when you have the app_offline.htm file in the application root directory, your web application will be closed and all requests will be directed to the app_offline.html page.
So you have two ways,
You can write .image2 related code in app_offline.htm
Put the .css on other websites, or use other addresses to access the files.
Related Post
Add css style sheet to app_offline
PRIVIOUS
For more details, you can refer my sample code, you just need to replace base64 image code.
My test result.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body {
font-family: "Open Sans";
}
h1 {
font-size: 90px !important;
}
.error-page-container {
color: #333333;
margin: 50px auto 0;
text-align: center;
width: 600px;
}
.error-page-container h1 {
font-size: 120px;
font-weight: normal;
line-height: 120px;
margin: 10px 0;
font-family: "Open Sans";
}
.error-page-container h2 {
border-bottom: 1px solid #CCCCCC;
color: #666666;
font-size: 18px;
font-weight: normal; /*text-transform: uppercase;*/
font-family: "Open Sans";
}
.error-page-container a {
text-decoration: none;
color: #ffffff;
background-color: #009AD7;
padding: 11px 19px;
}
.error-page-container a:hover {
text-decoration: none;
}
.image2 {
width: 500px;
height: 300px;
background-image: url('data:image/png;base64,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');
}
</style>
<title>
Under Maintenance
</title>
</head>
<body>
<div class="error-page-container">
<h1>Maintenance</h1>
<div class="image2" src="" alt="test">
</div>
<h2>
<p>Website is under maintenance right now. It will be back in few minutes.</p>
</h2>
<br />
Try again
</div>
</body>
</html>
I have roboto font which i need to put in my extension.
In my manifest.json file i have mention web_accessible_resources as :
"web_accessible_resources": ["fonts/*.ttf"]
Below is css for loading font :
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('chrome-extension://__MSG_##extension_id__/fonts/Roboto-Black.ttf') ;
}
/* latin */
#font-face {
font-family: 'Roboto, sans-serif';
font-style: normal;
font-weight: 500;
src: url('chrome-extension://__MSG_##extension_id__/fonts/Roboto-Medium.ttf');
}
/* latin */
#font-face {
font-family: 'Roboto, sans-serif';
font-style: normal;
font-weight: 900;
src: url('chrome-extension://__MSG_##extension_id__/fonts/Roboto-Bold.ttf');
}
But i can font are not loading when extension content script css loads.
Google Roboto font url
I'm using the newest version of Font Awesome. When viewing the responsive version of my website, I have a navigation panel. At the top right I need an X (Font Awesome css: f00d). This icon doesn't show up. Other icons, like a folder icon (f07b), do show up. Why is this and what am I doing wrong? An example: beta.degeintrappers.nl
In the head I use:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
As css I have:
#navPanel .close:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
#navPanel .close:before {
content: "\f00d";
font-size: 1.25rem;
}
This problem is not well documented by Font Awesome, however, the way to resolve it is by appending the font-family and font-weight property.
#navPanel .close:before {
font-family: "Font Awesome 5 Free";
content: "\f00d";
font-size: 1.25rem;
font-weight: 900;
}
I am getting different behavior between mathjax on a webpage and mathjax-node. When I load it on the webpage I get the correct output that I am looking for. For example I have a line = $_{a} ^{x} A $ where I want the superscript and subscript above and below each other. It works fine if I convert it on the webpage however when I try to run it through mathjax-node I get what would look like this _{ax}A. Here is everything related to mathjax in my code:
var mathjax = require('mathjax-node');
mathjax.config({ MathJax: { } });
mathjax.start();
async function formatMath(line) {
try{
var line;
if(line.indexOf('$')==-1)
return line;
while(line.indexOf('$') > -1){
var re = /\$(.*?)\$/;
var match = re.exec(line)[0];
var math = match.slice(1, -1);
let result = await mathjax.typeset({
math: math,
format: "inline-TeX",
html: true
});
line = line.replace(match, result.html);
if(line=="$_{a} ^{x} A $"){
console.log(line);
console.log(match);
console.log(math);
}
}
return line;
} catch(err) {
if(err) {
return Error(`Error at formMath(): ${err}`);
}
}
}
Example of what I am getting using the above function with '$_{a} ^{x} A $'
Example of what I want when I just add html = "\\(_{a} ^{x} A \\)"; directly into the webpage
This is my exact output from above:
<span class="mjx-chtml"><span class="mjx-math" aria-label="_{a} ^{x} A "><span c
lass="mjx-mrow" aria-hidden="true"><span class="mjx-msubsup"><span class="mjx-ba
se"><span class="mjx-mi"><span class="mjx-char"></span></span></span><span class
="mjx-stack" style="vertical-align: -0.156em;"><span class="mjx-sup" style="font
-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em
;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi
"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bo
ttom: 0.298em;">x</span></span></span></span></span><span class="mjx-sub" style=
"font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-texatom" style=""><
span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I
" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span></span><
/span></span></span></span><span class="mjx-mi"><span class="mjx-char MJXc-TeX-m
ath-I" style="padding-top: 0.519em; padding-bottom: 0.298em;">A</span></span></s
pan></span></span>
$_{a} ^{x} A $
_{a} ^{x} A
Note that I have already tried converting my regex to \\((.*)\\).
I tried to play around with useGlobalCache and other options with no luck. I do not understand why this is happening or if it has to do with how my formulas are being formatted. I am using "mathjax-node": "2.1.1". Thanks in advance.
The HTML sample is actually ok.
I'm guessing you're not generating and applying the CSS. This is a separate step for server-side processing since it's a one-time job.
You need to run typeset with the css option to have mathjax-node add the CSS declarations to the result object, cf. https://github.com/mathjax/MathJax-node#typesetoptions-callback.
Here's the HTML from your OP with the CSS applied.
.mjx-chtml {display: inline-block; line-height: 0; text-indent: 0; text-align: left; text-transform: none; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; letter-spacing: normal; word-wrap: normal; word-spacing: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0; min-height: 0; border: 0; margin: 0; padding: 1px 0}
.MJXc-display {display: block; text-align: center; margin: 1em 0; padding: 0}
.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {display: inline-table}
.mjx-full-width {text-align: center; display: table-cell!important; width: 10000em}
.mjx-math {display: inline-block; border-collapse: separate; border-spacing: 0}
.mjx-math * {display: inline-block; -webkit-box-sizing: content-box!important; -moz-box-sizing: content-box!important; box-sizing: content-box!important; text-align: left}
.mjx-numerator {display: block; text-align: center}
.mjx-denominator {display: block; text-align: center}
.MJXc-stacked {height: 0; position: relative}
.MJXc-stacked > * {position: absolute}
.MJXc-bevelled > * {display: inline-block}
.mjx-stack {display: inline-block}
.mjx-op {display: block}
.mjx-under {display: table-cell}
.mjx-over {display: block}
.mjx-over > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-under > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-stack > .mjx-sup {display: block}
.mjx-stack > .mjx-sub {display: block}
.mjx-prestack > .mjx-presup {display: block}
.mjx-prestack > .mjx-presub {display: block}
.mjx-delim-h > .mjx-char {display: inline-block}
.mjx-surd {vertical-align: top}
.mjx-mphantom * {visibility: hidden}
.mjx-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 2px 3px; font-style: normal; font-size: 90%}
.mjx-annotation-xml {line-height: normal}
.mjx-menclose > svg {fill: none; stroke: currentColor}
.mjx-mtr {display: table-row}
.mjx-mlabeledtr {display: table-row}
.mjx-mtd {display: table-cell; text-align: center}
.mjx-label {display: table-row}
.mjx-box {display: inline-block}
.mjx-block {display: block}
.mjx-span {display: inline}
.mjx-char {display: block; white-space: pre}
.mjx-itable {display: inline-table; width: auto}
.mjx-row {display: table-row}
.mjx-cell {display: table-cell}
.mjx-table {display: table; width: 100%}
.mjx-line {display: block; height: 0}
.mjx-strut {width: 0; padding-top: 1em}
.mjx-vsize {width: 0}
.MJXc-space1 {margin-left: .167em}
.MJXc-space2 {margin-left: .222em}
.MJXc-space3 {margin-left: .278em}
.mjx-ex-box-test {position: absolute; overflow: hidden; width: 1px; height: 60ex}
.mjx-line-box-test {display: table!important}
.mjx-line-box-test span {display: table-cell!important; width: 10000em!important; min-width: 0; max-width: none; padding: 0; border: 0; margin: 0}
.MJXc-TeX-unknown-R {font-family: monospace; font-style: normal; font-weight: normal}
.MJXc-TeX-unknown-I {font-family: monospace; font-style: italic; font-weight: normal}
.MJXc-TeX-unknown-B {font-family: monospace; font-style: normal; font-weight: bold}
.MJXc-TeX-unknown-BI {font-family: monospace; font-style: italic; font-weight: bold}
.MJXc-TeX-ams-R {font-family: MJXc-TeX-ams-R,MJXc-TeX-ams-Rw}
.MJXc-TeX-cal-B {font-family: MJXc-TeX-cal-B,MJXc-TeX-cal-Bx,MJXc-TeX-cal-Bw}
.MJXc-TeX-frak-R {font-family: MJXc-TeX-frak-R,MJXc-TeX-frak-Rw}
.MJXc-TeX-frak-B {font-family: MJXc-TeX-frak-B,MJXc-TeX-frak-Bx,MJXc-TeX-frak-Bw}
.MJXc-TeX-math-BI {font-family: MJXc-TeX-math-BI,MJXc-TeX-math-BIx,MJXc-TeX-math-BIw}
.MJXc-TeX-sans-R {font-family: MJXc-TeX-sans-R,MJXc-TeX-sans-Rw}
.MJXc-TeX-sans-B {font-family: MJXc-TeX-sans-B,MJXc-TeX-sans-Bx,MJXc-TeX-sans-Bw}
.MJXc-TeX-sans-I {font-family: MJXc-TeX-sans-I,MJXc-TeX-sans-Ix,MJXc-TeX-sans-Iw}
.MJXc-TeX-script-R {font-family: MJXc-TeX-script-R,MJXc-TeX-script-Rw}
.MJXc-TeX-type-R {font-family: MJXc-TeX-type-R,MJXc-TeX-type-Rw}
.MJXc-TeX-cal-R {font-family: MJXc-TeX-cal-R,MJXc-TeX-cal-Rw}
.MJXc-TeX-main-B {font-family: MJXc-TeX-main-B,MJXc-TeX-main-Bx,MJXc-TeX-main-Bw}
.MJXc-TeX-main-I {font-family: MJXc-TeX-main-I,MJXc-TeX-main-Ix,MJXc-TeX-main-Iw}
.MJXc-TeX-main-R {font-family: MJXc-TeX-main-R,MJXc-TeX-main-Rw}
.MJXc-TeX-math-I {font-family: MJXc-TeX-math-I,MJXc-TeX-math-Ix,MJXc-TeX-math-Iw}
.MJXc-TeX-size1-R {font-family: MJXc-TeX-size1-R,MJXc-TeX-size1-Rw}
.MJXc-TeX-size2-R {font-family: MJXc-TeX-size2-R,MJXc-TeX-size2-Rw}
.MJXc-TeX-size3-R {font-family: MJXc-TeX-size3-R,MJXc-TeX-size3-Rw}
.MJXc-TeX-size4-R {font-family: MJXc-TeX-size4-R,MJXc-TeX-size4-Rw}
.MJXc-TeX-vec-R {font-family: MJXc-TeX-vec-R,MJXc-TeX-vec-Rw}
.MJXc-TeX-vec-B {font-family: MJXc-TeX-vec-B,MJXc-TeX-vec-Bx,MJXc-TeX-vec-Bw}
#font-face {font-family: MJXc-TeX-ams-R; src: local('MathJax_AMS'), local('MathJax_AMS-Regular')}
#font-face {font-family: MJXc-TeX-ams-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-cal-B; src: local('MathJax_Caligraphic Bold'), local('MathJax_Caligraphic-Bold')}
#font-face {font-family: MJXc-TeX-cal-Bx; src: local('MathJax_Caligraphic'); font-weight: bold}
#font-face {font-family: MJXc-TeX-cal-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-frak-R; src: local('MathJax_Fraktur'), local('MathJax_Fraktur-Regular')}
#font-face {font-family: MJXc-TeX-frak-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-frak-B; src: local('MathJax_Fraktur Bold'), local('MathJax_Fraktur-Bold')}
#font-face {font-family: MJXc-TeX-frak-Bx; src: local('MathJax_Fraktur'); font-weight: bold}
#font-face {font-family: MJXc-TeX-frak-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-math-BI; src: local('MathJax_Math BoldItalic'), local('MathJax_Math-BoldItalic')}
#font-face {font-family: MJXc-TeX-math-BIx; src: local('MathJax_Math'); font-weight: bold; font-style: italic}
#font-face {font-family: MJXc-TeX-math-BIw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-R; src: local('MathJax_SansSerif'), local('MathJax_SansSerif-Regular')}
#font-face {font-family: MJXc-TeX-sans-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-B; src: local('MathJax_SansSerif Bold'), local('MathJax_SansSerif-Bold')}
#font-face {font-family: MJXc-TeX-sans-Bx; src: local('MathJax_SansSerif'); font-weight: bold}
#font-face {font-family: MJXc-TeX-sans-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-I; src: local('MathJax_SansSerif Italic'), local('MathJax_SansSerif-Italic')}
#font-face {font-family: MJXc-TeX-sans-Ix; src: local('MathJax_SansSerif'); font-style: italic}
#font-face {font-family: MJXc-TeX-sans-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-script-R; src: local('MathJax_Script'), local('MathJax_Script-Regular')}
#font-face {font-family: MJXc-TeX-script-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-type-R; src: local('MathJax_Typewriter'), local('MathJax_Typewriter-Regular')}
#font-face {font-family: MJXc-TeX-type-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-cal-R; src: local('MathJax_Caligraphic'), local('MathJax_Caligraphic-Regular')}
#font-face {font-family: MJXc-TeX-cal-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-B; src: local('MathJax_Main Bold'), local('MathJax_Main-Bold')}
#font-face {font-family: MJXc-TeX-main-Bx; src: local('MathJax_Main'); font-weight: bold}
#font-face {font-family: MJXc-TeX-main-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff')format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-I; src: local('MathJax_Main Italic'), local('MathJax_Main-Italic')}
#font-face {font-family: MJXc-TeX-main-Ix; src: local('MathJax_Main'); font-style: italic}
#font-face {font-family: MJXc-TeX-main-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-R; src: local('MathJax_Main'), local('MathJax_Main-Regular')}
#font-face {font-family: MJXc-TeX-main-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-math-I; src: local('MathJax_Math Italic'), local('MathJax_Math-Italic')}
#font-face {font-family: MJXc-TeX-math-Ix; src: local('MathJax_Math'); font-style: italic}
#font-face {font-family: MJXc-TeX-math-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size1-R; src: local('MathJax_Size1'), local('MathJax_Size1-Regular')}
#font-face {font-family: MJXc-TeX-size1-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size2-R; src: local('MathJax_Size2'), local('MathJax_Size2-Regular')}
#font-face {font-family: MJXc-TeX-size2-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size3-R; src: local('MathJax_Size3'), local('MathJax_Size3-Regular')}
#font-face {font-family: MJXc-TeX-size3-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size4-R; src: local('MathJax_Size4'), local('MathJax_Size4-Regular')}
#font-face {font-family: MJXc-TeX-size4-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-vec-R; src: local('MathJax_Vector'), local('MathJax_Vector-Regular')}
#font-face {font-family: MJXc-TeX-vec-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-vec-B; src: local('MathJax_Vector Bold'), local('MathJax_Vector-Bold')}
#font-face {font-family: MJXc-TeX-vec-Bx; src: local('MathJax_Vector'); font-weight: bold}
#font-face {font-family: MJXc-TeX-vec-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Bold.otf') format('opentype')}
<span class="mjx-chtml"><span class="mjx-math" aria-label="_{a} ^{x} A "><span class="mjx-mrow" aria-hidden="true"><span class="mjx-msubsup"><span class="mjx-ba
se"><span class="mjx-mi"><span class="mjx-char"></span></span></span><span class="mjx-stack" style="vertical-align: -0.156em;"><span class="mjx-sup" style="font-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bottom: 0.298em;">x</span></span></span></span></span><span class="mjx-sub" style="font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I
" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span></span></span></span></span></span><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.519em; padding-bottom: 0.298em;">A</span></span></span></span></span>
I'm trying to protect a folder using '.htaccess' and '.htpasswd'.
I used http://www.tools.dynamicdrive.com/password/ to generate the files.
Copied them to the corresponding folders.
When I attempted to access the protected folder, I got a login prompt.
Input incorrect login details, get sent to error page.
All good.
Now, without any changes, I revisit the page to try and login again to access the protected folder, and it just throws an error, there's no login box.
If I delete the .htaccess, I can get into the folder again without errors.
Upon replacing the .htacces, I get the error again, still no login box.
I have tried to regenerate a new set of files, user/pass combo, and slight modifications to .htaccess just to try get some form of response back.
I have checked for any bytemark, both files are clean UTF-8.
What's going on? Why am I not getting a prompt anymore?
On a side note, where should the log be? All I managed to find was some access logs with nothing useful in them.
Site location on server
/home/labvccom/
/home/labvccom/public_html/admin/.htaccess
AuthName "Restricted Area"
AuthType Basic
AuthUserFile /htpasswords/.htpasswd
AuthGroupFile /dev/null
require valid-user
/home/labvccom/htpasswords/.htpasswd [user: admin | pass: password]
admin:02yd6IWnPes66
This is the page that i get when it throws the error with NO login prompt
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, webmaster#labvc.com.au and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 mod_fcgid/2.3.5 Phusion_Passenger/2.2.15 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at labvc.com.au Port 80
Your browser remembers the first login attempt and send the credentials in the Authorization header - that is why you do not get a new login prompt.
Try to clear the authorization cache.
The underlying problem is most likely as #openscript.ch suggests.
I think your path to the .htpasswd-File is wrong. If it is not absolute, it is treated as relative to the ServerRoot.
Try to use an absolute path to your .htpasswd-File.
You need to create login/pass .htaccess inside the folder that you want to protect... otherwise the trick will not work as wanted! I created some days ago a simple php tool that creates login/pass for you. It's a part of another my project... so I extracted it from my archive for you. Pay attention that under windows the password is sent clear... is not a bug of my script but a request by windows servers. So use only it in remote hosting with unix, linux running apache. Put apache-ht.php inside the folder you want to protect and then execute it. Be prompted to create user/pass! After done delete apache-ht.php from folder. You fail because you are trying to set relative path. This kind of .htaccess needs full path! I hope this helps:
apache-ht.php
<?php
############################################
# Created By Alessandro Marinuzzi [Alecos] #
# apache-ht.php - Version 1.5 - 07/04/2015 #
# WebSite: ---> http://www.alecos.it/ <--- #
############################################
if ((isset($_POST['username']) && (!empty($_POST['username']))) && ((isset($_POST['password'])) && (!empty($_POST['password'])))) {
$username = $_POST['username'];
$password = $_POST['password'];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apache - Username :: Password Generator</title>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald);
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html {
display: table;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
display: table-cell;
vertical-align: middle;
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.mainbox {
border-radius: 7px;
border: 1px solid gray;
background-color: darkgray;
width: 420px;
height: auto;
margin-top: 50px;
margin-bottom: 50px;
vertical-align: middle;
text-align: center;
margin: 0 auto;
padding: 20px;
}
.title {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.save {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
border-radius: 3px;
border: 1px solid black;
background-color: darkviolet;
cursor: pointer;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
vertical-align: middle;
text-align: center;
padding: 10px;
}
.data {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.doit {
vertical-align: middle;
text-align: center;
}
.user {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
.pass {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<?php
if ((substr($_SERVER['DOCUMENT_ROOT'],-1,1) == "/") && (substr($_SERVER['PHP_SELF'],0,1) =="/")) {
$path = $_SERVER['DOCUMENT_ROOT'] . substr(dirname($_SERVER['PHP_SELF']),1) . "/.htpasswd";
} else {
$path = $_SERVER['DOCUMENT_ROOT'] . dirname($_SERVER['PHP_SELF']) . "/.htpasswd";
}
$tmp1 = fopen(".htaccess", "w");
$tmp2 = "AuthType Basic\n";
$tmp2 .= "AuthName \"Restricted Area\"\n";
$tmp2 .= "AuthUserFile \"$path\"\n";
$tmp2 .= "Require valid-user\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
if (strtoupper(substr(PHP_OS,0,3) == 'WIN')) {
$tmp1 = fopen(".htpasswd", "w");
$tmp2 = "$username:$password\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
} else {
$tmp1 = fopen(".htpasswd", "w");
$tmp2 = "$username:" . crypt($password,'$6$rounds=5000$usesomesillystringforsalt$') . "\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
}
exit("<div class=\"mainbox\">\n<span class=\"title\">Apache - Username :: Password Generated!</span>\n</div>\n</body>\n</html>");
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apache - Username :: Password Generator</title>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald);
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html {
display: table;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
display: table-cell;
vertical-align: middle;
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.mainbox {
border-radius: 7px;
border: 1px solid gray;
background-color: darkgray;
width: 420px;
height: auto;
margin-top: 50px;
margin-bottom: 50px;
vertical-align: middle;
text-align: center;
margin: 0 auto;
padding: 20px;
}
.title {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.save {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
border-radius: 3px;
border: 1px solid black;
background-color: darkviolet;
cursor: pointer;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
vertical-align: middle;
text-align: center;
padding: 10px;
}
.data {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.doit {
vertical-align: middle;
text-align: center;
}
.user {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
.pass {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<div class="mainbox">
<span class="title">Apache - Username :: Password Generator</span><br>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<span class="data"><label for="username">Username:</label> <input type="text" class="user" id="username" name="username"></span><br>
<span class="data"><label for="password">Password:</label> <input type="text" class="pass" id="password" name="password"></span><br>
<span class="doit"><input type="submit" class="save" value="Create Username & Password"></span><br>
</form>
</div>
</body>
</html>