<head>
...
<link href="static/css/bootstrap.css" rel="stylesheet">
<lift:dynamicStile></lift:dynamicStile> //???
...
</head>
I'll answer with the brevity of your question:
https://github.com/lift/framework/blob/master/web/webkit/src/main/scala/net/liftweb/builtin/snippet/CSS.scala
Related
I'm creating an express app and my CSS code stops working whenever i add an ":ID" parameter to the URL. I know it's a filepath issue because bootstrap still comes in fine, but on the page with the ID parameter it shows this: "Refused to apply style from 'https://XXXXXX.c9users.io/unapproved/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
main.css is in my /public folder, but it looks like it's looking in a folder titled "unapproved".
I've tried changing the routing order, i've tried changing my app.use(express.static(__dirname)) code.
here's my app.get:
app.get("/unapproved/:id/", function(req, res){
var invoiceID = mongoose.mongo.ObjectId(req.params.id);
InvoiceObj.findById(invoiceID,function(err,foundInvoice){
if(err){
console.log(err);
}else{
res.render("invoiceScreen",{invoice:foundInvoice});
}
});
here's my html:
<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>
here's my header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice system</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
I think change to css path absolute path will solve your problem
<link rel="stylesheet" href="/main.css">
In this kind of situation, it's better to use virtual path for your static files because relative path doens't work very well; like:
Assuming folder structure:
app.js
public
| +-- main.css
app.use('/static', express.static(__dirname + "/public"))
And in you html, make path absolute
<link rel="stylesheet" href="/static/main.css">
instead of using ./ or ../ before your assest(images / css / js ) for example.
./css/style.css or css/bootstrap.css ../images/example.png
you can use / for example
/css/style.css or /css/bootraps.css /images/example.png
/ will tell your app to look from root dir.
I'm using Play framework.
In a template it is possible to do the following to include css.
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
But what I would like to do is to include the css right into the webpage
<style>#[include the static file contents]</style>
Is that possible?
As others mentioned it is NOT preferred way, anyway you can use common 'tags' technique for doing this,
just create a file views/tags/yourStyles.scala.html with content:
<style>
* {
background: orange;
}
</style>
so in your template/view you can use it as (sample):
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.WebJarAssets.at("images/favicon.png")">
#tags.yourStyles() <!-- <-here ->
</head>
Here is a lot of questions and answers how to make assets concatination or replacement in template. Use grunt-concat to merge files, use gulp-html-replace to replace in templates. And i can`t understand how to connect them with each other.
So given template, friends.tpl with special set of css files:
!DOCTYPE html>
<html>
<head>
<!-- build:css friends.min.css -->
<link rel="stylesheet" href="css/component1/style.css">
...
<link rel="stylesheet" href="css/componentN/style.css">
<!-- /build -->
</head>
<body/>
The desired result
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/friends.min.css">
</head>
<body/>
And created friends.min.css file with concatenated files above.
How to achieve this - concat based on template data
Use gulp-htmlbuild,it does what you want.
gulp.task('build', function () {
gulp.src(['./index.html'])
.pipe(htmlbuild({
// build js with preprocessor
js: htmlbuild.preprocess.js(function (block) {
// read paths from the [block] stream and build them
// ...
// then write the build result path to it
block.write('buildresult.js');
block.end();
})
}))
.pipe(gulp.dest('./build'));
});
gulp build will take index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- htmlbuild:js -->
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<!-- endbuild -->
</body>
</html>
And turn it into:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="buildresult.js"></script>
</body>
</html>
https://www.npmjs.com/package/gulp-htmlbuild
I'm using phpunit with the extension of selenium 2 (Selenium2TestCase), for checking an interface of my website.
So my test page contains this :
testDisplay()
{
...
file_put_contents('/home/toto/www/screenshots/before.html', $this->source());
sleep(5);
file_put_contents(/home/toto/www/screenshots/after.html', $this->source());
$this->assertContains('toto42', $this->source());
...
}
Then when I execute :
$> phpunit testSelenium.php
I have 2 html files of my page, before the sleep(5) and after :
before.html :
<META charset="utf-8"/>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<TITLE>Test</TITLE>
<LINK href="/css/style.css" rel="stylesheet"/>
<LINK href="/css/bootstrap.css" rel="stylesheet"/>
<SCRIPT src="/js/jquery-1.7.1.min.js" type="text/javascript"/>
</HEAD></HTML>
after.html :
<META charset="utf-8"/>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<TITLE>Test</TITLE>
<LINK href="/css/style.css" rel="stylesheet"/>
<LINK href="/css/bootstrap.css" rel="stylesheet"/>
<SCRIPT src="/js/jquery-1.7.1.min.js" type="text/javascript"/>
</HEAD>
<BODY>
...
toto42
...
</BODY>
I don't understand why I have to put a sleep(5) to entirely load my page, did someone have an idea ?
And an other question what is the equivalent of clickAtAndWait (of PHPUnit_Extensions_SeleniumTestCase) for the Selenium2TestCase ?
Thanks in advance
I found an answer.
I'm looking for an HTML element in my page with a timeout and if it does not appear I wait with the function implicitWait();
testDisplay()
{
...
//I use 25000 for the timeout but anything else works too it depends on your loading page
$this->timeouts()->implicitWait(25000);
$this->assertContains('toto42', $this->source());
...
}
I ask this because I don't know why in IE9 my site looks like this:
And another broswers display correctly:
I was assuming it was due to poor position in the header files but not exactly this happening and that's the last part of my project, it looks good in IE9.
General structure of my index.php
<!DOCTYPE html>
<html lang="es">
<head>
<?php include 'configHead.php' ?>
<title>Panel de Servicio</title>
</head>
<body>
.......
</body>
configHead.php
<meta charset="utf-8">
<link rel="shortcut icon" href="media/favicon.png" />
<script src="js/prefixfree.min.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css"/>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
Anyone have any idea why this happens?
You cannot have any comments or any text above your <!DOCTYPE html> ... remove the comment on top and your site will work fine in IE .. Its currently triggering your page to go into quirks mode (which is roughly equivalent to IE5) .. as far as IE is concerned you have no doctype.
Right now you have this comment:
<!--Aplicación: Sistema de tickets y pólizas.
Cliente: MA Consulting.
Desarrollador: XXX XXX XXX
Twitter: #_xxx
Email: xxx#gmail.com
Fecha: Julio/2012 - Febrero/2013
-->
<!DOCTYPE html>
Before your doctype .. move that comment after <!DOCTYPE html>