I'm trying to link manually my CSS and Javascript files to my HTML scripts, but I've never really done it with files from a different folder/directory. This is what I have so far:
<link rel="stylesheet" type="text/css" href="/Desktop/Script/CSS/tempeststyle.css"/>
<link rel=script" type="text/javascript" href="/Desktop/Script/Javascript/tempestscript.js"/>
I've read from a few sources that you don't have to start all the way at C:/Users or whatever the case may be for different systems, but I'm not sure if these links are acceptable the way they are (i.e., them starting at "/Desktop"). The files are in separate folders within the same folder on the desktop. So how to include them the best way? Thanks.
If you want to add scripts from local path you can use a relative path:
<link rel="stylesheet" type="text/css" href="../CSS/tempeststyle.css"/>
or relative path from your web root folder:
<link rel="stylesheet" type="text/css" href="/styles/CSS/tempeststyle.css"/>
or filesystem absolute path:
<link rel="stylesheet" type="text/css" href="file:///C:/Path/To/Scripts/styles/CSS/tempeststyle.css"/>
It is rather better if you use an absolute path from your web server:
<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/CSS/tempeststyle.css"/>
Related
My application is on the server, and I have tried all the solutions. But my Laravel app is still not loading CSS and JS files in main.blade.php when my CSS files are in public/assets_setup/css/style.css.` I even made file changes, but page changes are not showing in inspect, and it's the same.
Below is my main.blade.php file which all links are included.
Try this code
<link rel="stylesheet" type="text/css" href="/assets_setup/css/style.css">
or
<link rel="stylesheet" type="text/css" href="{{ asset('/assets_setup/css/style.css') }}">
We don't write public in laravel
I am trying to load my stylesheets and js files in Meteor. I have an index.html file. This is what I was doing at first:
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
There were lots of stylesheet files and script files. This was working fine but if i wrote a url like: 'localhost:3000/manage-user/add', everything stopped working. I have read loads of answers where they have mentioned that I need to make a lib folder and in that folder, I need to make a css and a js folder, but it's not picking up my files, especially my 'style.css' file which overrides styles of bootstrap and all.
assets folder should be inside the /public folder, then try add the / to the begining of the href value.
<link href="/assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
URL can be absolute and relative.
Absolute should starts from protocol value(http://, https://, ftp:// etc) and then domain name, port, path and query part.
Relative can be started either from slash or any other character.
If URL is started from slash it's assumed its value is relative to domain's root.
If URL is started from any other character it's assumed it's value is relative to current URL(or value in tag).
Anyway value localhost:3000/manage-user/add means for browser:
"take current page's URL and append this value to its end".
So your files are tried to be fetched from something like http://localhost:3000/localhost:3000/manage-user/add
To properly add your styles.css and/or your templates/components to your app, you must register/add them as an import path to the body.js.
CSS
Go to your body.js.
Add import '/imports/ui/stylesheets/styles.css' (copy/paste this line)
JS - Templates/pages
Go to your body.js in your layouts folder.
Add import '/imports/ui/pages/[yourDirName]/[yourFileName].js'; (copy/paste this line)
BONUS Content!
JS - Components to import into your html templates (optional)
Go to your pages folder.
Select the proper directory.
Select the js file that is importing your html template file.
Import the component to the js file.
import '../../components/[yourDirName]/[yourFileName].js;
Example import '../../components/hello/hello.js';
I'd admit I am relatively new to node in general, and I am stuck on this issue in regards to being able to use a style sheet within a partial.
This is my file structure
app.js
public
images
javascripts
stylesheets
style.css
views
layouts
main.hbs
partials
head.hbs
navbar.hbs
error.hbs
index.hbs
I made sure to include this within my app.js and also required the path module.
app.use(express.static(path.join(__dirname + 'public')));
This my link to my stylesheet within my head.hbs partial.
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
Any suggestions?
Instead of doing:
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
try:
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
(without /public/)
Currently you are telling express.static to look for a file in: /public/public/stylesheets/style.css.
The problem here is that some views (not all of them) can't access to some css&js files(not all of them) ("404 Not found" error).
For exemple View of .../Details/Index/1 can't access to 1file css and 1file js (it can access all other files), but the View of .../Recherche/result can access to all files.
This problem happens when the user is connected and when not connected.
I didn't modifie the web.config file.
All View are related to one Layout, in there I inluded the css files:
<link href="Content/file.css" media="all" rel="stylesheet" type="text/css" />
And one last thing, all css files are in 1 folder and all js files are in 1 folder.
Start the path to the file with the tilde (~) character. Razor will converts a virtual (relative) path to an application absolute path.
<link href="~/Content/file.css" media="all" rel="stylesheet" type="text/css" />
If you are using an MVC version prior to MVC 4, you should use Url.Content helper method.
<link href="#Url.Content("~/Content/file.css")" rel="stylesheet" type="text/css" />
Rails noob here.
I've been fumbling through the process of integrating a wrapbootstrap one page parallax theme (https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) into my rails 4 app.
After unzipping the files, the index.html page works (mostly), right out of the box.
The process I've gone through in the attempt to integrate it into a new rails app:
Transfer all CSS files to assets/stylesheets folder
Transfer all JS files to assets/javascripts folder
Referenced all JS and CSS files in application.js and application.css
Transfer all images to assets/images folder
Generate new pages controller/view, and moved the previously discussed html file into this view
Assigned root to above html file
The issue I'm running into is that the all of the JS and CSS don't appear to be executing. I have JS and CSS include tags in the header.
I've tried rake assets:precompile, but that wasn't successful.
Any tips on where I'm going wrong here?
Additionally, the index.html file includes a bunch of CSS setup in the head, ie:
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- web font -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css">
<!-- plugin css -->
<link rel="stylesheet" type="text/css" href="js-plugin/animation-framework/animate.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/magnific-popup/magnific-popup.css" />
<link type="text/css" rel="stylesheet" href="js-plugin/isotope/css/style.css">
<link rel="stylesheet" type="text/css" href="js-plugin/flexslider/flexslider.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/pageSlide/jquery.pageslide.css" />
<!-- Owl carousel-->
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.theme.css">
and a bunch of javascrip tags at the bottom of the body, ie:
<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<!-- third party plugins -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js-plugin/flexslider/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.localscroll-1.2.7-min.js"></script>
Am I correct in understanding that with the asset pipeline, these callouts aren't required in the view? Shouldn't all the CSS and JS be precompiled in application.css and application.js?
The issue was that I had brought over all CSS and JSS files that were included with the template, but the folder also contained CSS and JS that was not required, and some of these files caused conflicts when being loaded in the asset pipeline. Once I pruned out all files that weren't required, all worked as expected.
As a summary:
Move all required CSS files to assets/stylesheets
Move all required JS files to assets/javascripts
Explicitly include/require each of the CSS/JS files in their respective application.css and application.js files.