Is is possible to import contents from one html file into another by using just plain HTML or CSS? JavaScript or jQuery is NOT an option, I want to be able import contents of a file if JavaScript is disabled
Checkout HTML5 imports via Html5rocks tutorial and at polymer-project
For example:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
Your best bet is to render the HTML server side, ie, via PHP or server side JS. Since most server readily supports PHP, you can simply change both your HTML file extension to .php and insert a php include tag. (Include PHP file into HTML file).
Related
I have a spring boot project and I'm using TailwindCSS. The issue is, while putting
<link rel="stylesheet" type="text/css" th:href="#{~/css/main.css}" />
Works fine when I want to access the HTML file locally from my instance, the issue is I convert these HTMLs into PDFs using API2PDF service.
So, the service is unable to read the CSS and the HTML comes out to be without any styling.
How can I make sure the generated Tailwind CSS is sent along with the URL?
I would include the CSS within the HTML file using the <style> tag
I have a simple flask application. It has flask-bootstrap installed and so I can access some CSS classes from there and my own style sheet in my static folder. However, I want to be able to add another stylesheet from a CDN in my index.html file.
I usually do something like place the following inside head tags.:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Is this possible? I don't think that using the
{{url_for('static' )}}
syntax would work here and I haven't found anything online that's describing what i'm doing (or I couldn't tell).
Yes, this is how I do it too. And then I link to my own stylesheet after the Bootstrap CDN.
Edit: and if you use a base template that is being extended by multiple templates for sub pages you can put the head tag in the base template so it precedes all templates.
My bootstrap css file is located at
C:\Users\SCEA\Downloads\bootstrap-3.3.7\css
and for linking this to my php file I have given absolute path as:
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7\css" rel="stylesheet">
but the effect of css is not visible.Is my css file not getting linked?
You might have a typo before css. The backslash before it might need to be a period.
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7.css" rel="stylesheet">
If are running server in your local computer I suggest moving this file within the server document root.
Your comment:
css is a folder inside bootstrap-3.3.7
Probably in the CSS folder are the actual css files.
You need to refer to the actual CSS files and not to the folder itself.
Here is a quickfix using CDN:
Put these links in and it works guaranteed
Is it possible that LESS files don't work in dreamweaver CC? Because probably my syntaxt is correct, but I don't understand why my style.less file doesn't work, even with simple commands like "color: #ff0"
use this in head: make sure you are using rel="stylesheet/less"
<link rel="stylesheet/less" type="text/css" href="styles.less" />
and before the html closing tag
<script src="less.js" type="text/javascript"></script>
Source:
client-side-usage
if you want include less direct to html file you have to read this topic: Less css file include in <head> section
or you can convert .less to .css file: http://koala-app.com/
or you can use gruntJS: http://gruntjs.com/
It's working if I put the entire project inside the "local server folder" (xampp in this case) even if I 'm using only simple html tag, .js and .less file. No php, mysql and others.
Could you tell me why of this behaviour?
I've even looked at CSS Crush, Minify, SmartOptimizer, CSSTidy and a slew of other PHP CSS compressors. But they all have one major flaw.
You can't use this:
<link rel="stylesheet" href="css/styles.css" type="text/css">
When using dreamweaver, this is the only way to see the DESIGN in DESIGN VIEW. If you replace that styles.css file with styles.php, it breaks, even if you HAVE css code in the file..
I am using minify for my JS and it is working beautifully, but if I use it with CSS, Dreamweaver gets scared and doesn't know how to render it. haha. Of course, it IS server side though.
Does anybody have a workaround for a situation like this? I do prefer to use dreamweaver because of the immediate changes that can be made in design view, as well as the FTP capabilities and code hinting, but even the new CS6 seems to whine when you use anything BUT a .css file.
I can't verify that this solution will work, but it should theoretically.
First, you'll want to add .css files as PHP, so you don't have to change the file extension. This is good practice regardless, since the file extension should indicate what content is being delivered. I don't know that there's any standard that states this outright, but it's good practice. If you're using Apache, you can add this to your .htaccess or global server configuration file:
AddHandler php5-script .css
Then, just <link rel="stylesheet" href="css/style.css" type="text/css" /> after renaming your file back to CSS. For more details on this, see the Apache docs on AddHandler.
Second, you'll want to 'comment out' your PHP code within your CSS. For example, you could do something like this at the top of style.css:
/*
<?php include 'your-file-compressor.php'
// Put any PHP code for compression here
?>
*/
That way, Dreamweaver will still read the actual CSS code, but PHP should be able to compress before delivering it to clients.
As Kishore pointed out, Minificaiton should be part of build process. While development you should use the raw css file.
Instead of href="css/styles.php" its better to use href="compresscss/path/css/styles.css". Here compresscss/path/css/styles.css is mapped to compresscss.php?path=css/style.css. This can be done by mod_rewrite in apache.
This way dreamweaver will see it as an css file and also you will compress it.