newspaper articles link href - css

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?

Related

How to add extra level in Meteor concatenates js and css path

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>

datatables.min.css doesn't work from local project

I have a ASP.NET MVC project which uses JQuery Datatables to show a table.
The problem: the css stylesheet isn't applied when links to local css file. I've tried the following:
<link rel="stylesheet" type="text/css" href="~/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="../Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="Content/datatables.min.css" />
But this one (at the same place of my HTML) is working:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
Even current sorting column highlight from this css doesn't work!
Of course, the CSS file exists in my project's Content folder, and its contents is totally the same, because I even try to copy the file from https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css and put it in project's Content folder.
So, the question is why doesn't the first HTML link snippet work?
Maybe, a bug in the MVC (it's up to date)?
jQuery DataTables distribution includes CSS, JS and image files (in the images folder).
Use Download builder, select Download tab and download all required files.
Also you should not use ~ in your URL. Most likely that is the reason why CSS is not applied. Use absolute URL /Content/datatables.min.css or relative URL Content/datatables.min.css instead.

Grails Resources plugin - Set absolute URL to resources

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!

How to use multiple CSS files in Meteor

I've started using meteor and want to know what is a good way to migrate a HTML file that refers to many CSS files. So far, I found that meteor will automatically load all CSS files in an alphabetic order. My two questions are as follows:
Where should I locate the CSS files? (or from where I can control which directories are loaded)
Is it possible to load specific CSS files in particular order?
Here are the current references I have in my HTML file, before migrating to meteor.
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Libs CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
<link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page Styles -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/blue.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/theme-responsive.css" />
Thank you for your help! :)
There is no need to provide reference of stylesheets in meteor. Just put your css file in client/stylesheets folder. Meteor will automatically apply these css rules.
As stated by #imslavko you can find Meteor behaviour at https://guide.meteor.com/structure.html
However these rules are more relevant for .js code and .htmltemplate files: Meteor merge and minimize all .css in a single file (as long as they are provided by you and not on a CDN) so you will find a single <link rel="stylesheet"> reference in your <head>.
Remember to put all frontend files inside client folder, to avoid unnecessary server loading and availability.
So you can choose your convenient folder structure for .css files, for example put them all in client/stylesheets or use other subfolders to better manage them.

How to serve css files in djangos's flatpages?

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.

Resources