I am using the resources plugin (1.2.8) to load my css and js files. it work great but the thing is that the URLs are "relative".
Example:
<r:require module="core"/>
I get something like this
<script src="/app/static/js/core.js" type="text/javascript"></script>
<link href="/app/static/css/core.css" type="text/css" rel="stylesheet" media="screen, projection">
But i want the URL to be ABSOLUTE. Something like this:
<script src="http://myServer.com/app/static/js/core.js" type="text/javascript"></script>
The behaviour i am looking is the same as the "absolute" option when using grails resources
<g:resource dir="css" file="main.css" absolute="true" />
Thanks in advance!
Related
After compile and build the Meteor application for production. All the js and css files have been minified and concatenated as one js or css file like this:
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/668709f5b029ed3db7692654ebb3c305ae2d1b1a.css?meteor_css_resource=true">
<script type="text/javascript" src="/327435ecda451157c3d8a0af70c6172f58fe77cf.js?meteor_js_resource=true"></script>
These files' URL start with root. My question is: How to add extra level in it? the expected result should be:
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/a_extra_level_here/668709f5b029ed3db7692654ebb3c305ae2d1b1a.css?meteor_css_resource=true">
<script type="text/javascript" src="/a_extra_level_here/327435ecda451157c3d8a0af70c6172f58fe77cf.js?meteor_js_resource=true"></script>
my css is not working correctly on my github page. This is my repo. This is my website. I created this portfolio website without Github pages and it works correctly. I am very new to github , so there is a good chance I'm missing something. I usually localize all my css/jscript but for simplicity reasons I changed all my css/javascript to the html link.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\main.css">
</head>
I had the same problem with my HTML file and my CSS file. I fixed it like this:
I had a repo with the index.html and a folder call "style" with the style.css file in it.
Deploy my index.html with the link tag within the head tag like this:
<link rel="stylesheet" href="./style/style.css" type="text/css">
Pay attention to the href attribute: "./style/style.css".
Andy.-
Like #TarasYaremkiv mentioned remove your './css/bootstrap-3.3.7/' folder.
The reason why it's happening is because Jekyll engine is looking for the includes present in the file 'bootstrap-3.3.7/docs/components.html'
For example: this file {% include components/glyphicons.html %} is not present in the components directory of your bootstrap folder. Hence the error.
You can avoid these kind of error's by downloading only the necessary compiled files or use cdn links
Change
<link rel="stylesheet" type="text/css" href="css\main.css">
to
<link rel="stylesheet" type="text/css" href="/css/main.css">
original post - External CSS not working with Github Pages
I'm trying to use Steroids with AngularJS for an application. Below is the stuff in my head tag.
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/components/angular/angular.min.js"></script>
<script src="/components/angular-touch/angular-touch.min.js"></script>
<script src="/components/lodash/dist/lodash.min.js"></script>
<script src="/components/restangular/dist/restangular.min.js"></script>
<script src="/models/<%= yield.controller %>.js"></script>
<script src="/controllers/<%= yield.controller %>.js"></script>
Now, I can tell the scripts are working, because the Angular stuff is. But the CSS won't load at all. It's in the /dist folder under the correct location, but it just won't load. Copy and pasting into a <style> works.
Any idea how I can fix this?
Thanks!
Try removing the DOCTYPE tag on your layout html file. It is a known issue, hope they fix this problem soon.
I'm building a basic site and thought of using the flatpages app for a couple of pages. Problem is, I'm not sure how to serve static files in my flatpages.
The link in my flatpage template is this:
<link type="text/css" rel="stylesheet" href="static/base.css" />
However, firebug shows that file is being looked at:
localhost:8000/example_flatpage/static/base.css
instead of
localhost:8000/static/base.css
Infact, every link in the template works this way.
Instead of
localhost:8000/home/
localhost:8000/example_flatpage/home/
Here's my default flatpage template:
<html><head>
<title>title</title>
<link type="image/x-icon" rel="icon" href="static/favicon.ico" />
<link type="text/css" rel="stylesheet" href="static/base.css" />
</head>
<body>
mainly plain text
</body>
</html>
Any ideas??
Use "/static/base.css" instead of "static/base.css". The first one is a path relative to root '/', while the second form is a path relative to the current page.
How do I change the link href to css, js code for each article without manually doing it? Each article I write is seperated into different folders and I start each article with one template that links to css/reset.css etc.
This is my sample article template code:
Sample Article Page
<link href="css/slider.css" rel="stylesheet" type="text/css" media="screen" />
<!-- jquery -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<!-- superfish -->
<link href="css/superfish.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<!-- initialize jquery superfish plugins -->
<script type="text/javascript" src="js/init.js"></script>
<!-- tabs -->
<script src="js/ui.core.js" type="text/javascript"></script>
<script src="js/ui.tabs.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/ui.tabs.css" type="text/css" media="screen" />
<!-- initialize tabs -->
<script type="text/javascript">
$(document).ready(function(){
$('#container-1 > ul').tabs(); /* news and events */
$('#container-2 > ul').tabs(); /* pre-footer tab */
$('#container-4 > ul').tabs(); /* popular items */
It sounds like you're asking how you can use the same URL for each external file, regardless of where your page is placed.
If so, all you would need is to use absolute URLs instead of relative URLs. That is, "/foo/bar/reset.css" (note the initial slash) instead of "bar/reset.css"
Absolute URLs trace from the site root, rather than the file's current location, and so the links will be the same regardless of where you place the file.
Edit:
You would put this URL in the same place where you already put the relative URLs:
That is:
<link type="text/css" rel="stylesheet" media="all" href="/foo/bar/style.css" />
instead of the
<link type="text/css" rel="stylesheet" media="all" href="bar/style.css" />
that you are using now.
Kevin, correct me if I'm wrong; you have a series of html files in different folders and you want to update all of the CSS and javascript links in them to point to a new location.
Your scenario:
wwwroot/
|
-- CSS/
|
-- reset.css
|
-- Javascript/
|
-- 20090112/
|
-- file1.html
|
-- 20090207/
|
-- file2.html
-- file3.html
|
-- etc.
Dreamweaver is placing everything in your CSS folder. If you want to keep the CSS files there then you need to specify correct relative paths, or else use absolute paths.
An absolute path is one that specifies the exact location of the file http://www.somedomain.com/css/reset.css is an absolute path.
A relative path defines the path from the location of the current file. So if you wanted to add reset.css to file1.html you would specify its location in this manner ../css/reset.css
Broken down this path specifies:
.. up one folder [we're now in wwwroot]
/css the path from wwwroot
/reset.css the filename
Does this help?