As I continue to add on to my website, for each HTML file i add i need to include
<!-- Source for .css style rules -->
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
Its not an awful method, and it works every time. I just know there has to be an easier method.
I know theres the but that doesn't seem like the easiest method.
I know of the js library require.js and that's wonderful but if I dont think i can use that for my CSS files.
What I would like is a method of referencing one file, loading one file, and it then has some sort of structure or code that then imports all other required CSS and JS files.
What made me see that i needed this sort of system was to select all the files for bootstrap without loading each one like I have loaded my CSS and JS above.
Im sure im missing some key terminology so please help me along with new terms or ideas that Im on the cusp of but haven't found the verbiage to be able to describe yet.
For CSS, there are always #import statements. See here on MDN: #import
Define a single CSS file and use #import url("some-other.css") to load all of your CSS files through the singular, "main" CSS file.
For CSS, you could use a CSS preprocessor like LESS or SASS to bundle all your files into a single file through a build step. The same principle applies to JavaScript as well through some sort of bundler whether it is r.js for require.js AMD style application or Browserify for more CommonJS style source files.
There is nothing wrong with referencing a bunch of files in your index, but it is best practice to build your app with something like Gulp before deploying to production. Your gulp process should combine all css and js into respective minified css and js files. There are a lot a performance benefits to doing this. Sorry to be so brief
You haven't said what your back-end language is, but if you are using PHP you can do something like this:
INDEX.PHP
<?php
include 'inc/head.inc.php';
?>
<body>
<div>All your stuff follows here</div>
<?php include 'inc/nav.inc.php'; ?>
inc/head.inc.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MyDomain</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="some stuff I do" />
<meta name="keywords" content="stuff, things, quality" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
</head>
Related
I am trying to refer to my JS/CSS with a relative path, like ./myScript.js, such that, if I host the site on https://myHost.com/myPath, it should look for the script in https://myHost.com/myPath/myScript.js, but if I host it on http://localhost/, it should look in http://localhost/myScript.js. It is always looking in the root though, as if I had made an absolute path.
Is it not possible to make relative paths? I would prefer if I did not need to change the actual HTML file between environments.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="./logo192.png" />
<link rel="manifest" href="./manifest.json" />
<title>React App</title>
<link href="./static/css/main.6dea0f05.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>/* a bunch of auto generated react code */</script>
<script src="./static/js/2.1ca84f3b.chunk.js"></script>
<script src="./static/js/main.487a42e6.chunk.js"></script>
</body>
</html>
Try to use this:
<base href="https://www.w3schools.com/">
I hopes, that it helps for you!
This is one of those times that I spend 2 hours fiddling with it, to no avail, post a question, and then find the answer directly after..
The issue is that I automatically return index.html if users do not specify it, making chrome think that the current "folder" is the root when accessing https://myHost.com/myPath. If I go to https://myHost.com/myPath/index.html it works.
So, I need to do a proper redirect to index.html, instead of just returning it. Or to anything under myPath, like https://myHost.com/myPath/home.
I am pretty new to Grails/ Bootstrap/ HTML and webprogramming in general. I am not an IT-guy but I have to implement a little monitoring website for a research project. I am pretty sure there is a simple solution to my problem - I would really appreciate if someone could help me!
I am using IntelliJ with Grails 3 and I am trying to integrate the SB Admin2 Bootstrap template from Start Bootstrap into my project.
My problem is, that the Website is not displayed as it should. First I tried to follow this tutorial http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/ but it didn't work for me - don't know where I failed. Then I just copied the index.html content into my gsp file. First only the text was shown, then I followed an answer from this post Bootstrap template not getting displayed and added a link to BootstrapCDN - It worked.. but not correctly. Screenshot
Now the head of my layout gsp file looks the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 -Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Hope someone can help me!
Thank you in advance!
edit1: If I use the IntelliJ preview in the html file it works perfect.
First of all, I saw you use relative paths in your links to the javascripts etc.
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
I would prefere to use absolute ones like
<link href="${request.contextPath}/css/sb-admin-2.css" rel="stylesheet">
I use a few Bootstrap-Layouts in different Grails Applications (in one application even the sb-admin). Let me try to explain my way (btw. seems that it's nearly the same as your first link, but another description might help out a bit) ...:
copy the index.html to views->layout->main.gsp
place the e.g. g:layoutBody in apropriate places in the main.gsp page and remove the elements which are not useful for your app.
<div id="page-wrapper">
<g:layoutBody/>
</div>
<!-- /#page-wrapper -->
copy the javascripts, images etc. to the web-app directory and check the references in the main.gsp layout that they refer to the javascripts etc. via
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
after that, your views could look like this:
<%# page import="urlaub.Employee" %>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'employee.label', default: 'Employee')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<g:if test="${session.user.admin}">
<div class="row">
<g:link class="btn btn-primary btn-flat" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
</div>
</g:if>
<g:render template="/flash_message" bean="${flash}" />
<div class="row">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<hr>
</div>
Grails 3 comes with Asset pipeline plugin to manage static assets, minimize them, etc,...
Check its documentation. In your case you should move your assets to the corresponding asset folder (javascripts, stylesheets, images) into de assets folder.
For example, for including a css placed in assets/stylesheets/bootstrap/bootstrap.min.css you have to include in you gsp the following:
<asset:stylesheet href="bootstrap/bootstrap.min.css"/>
Other example with javascript and assetPath:
<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>
I am creating a website in HTML, and I face a problem.
I have a CSS folder, and I want to be able to access it from every directory
root:
/css
- /skel-noscript.css"
- /skel-noscript.css"
/js
- init.js
- skel.min.js
- skel-panel.min.js
- html5shiv.js
/Downloads
-/Download.html
/Downloads.html
/index.html
...
Now I have trouble when I try to access the stylesheets in Downloads/Download.html
my <head> code:
<head>
<title>TITLE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="../js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/skel.min.js"></script>
<script src="../js/skel-panels.min.js"></script>
<script src="../js/init.js"></script>
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
</head>
When I use this code, the stylesheets don't work.
when I delete the <noscript> around the links to the stylesheets, they do work, but my website is totally messed up.
What is happening?
When I use this code in the root directory, it works fine
css files are not being added from tags in this case, is for browsers that don't support js or if js is off.
go to the "init.js" file(one that u attached just before the tag) in your js folder and check it... css is being added from their so change directory paths for css from there.
regards
Are you turning off the javascript when testing this? <noscript> is only activated when the visitor has no scripting enabled. If you want to be able to link the css files always you have to get rid of the tag.
I suggest you to create a file something like header.phtml and call all the files you need to render the template.
<head>
<title>TITLE</title>
<noscript>
<link href"<?= $this->getCssPath(); ?>" rel="stylesheet" type=text/css />
</noscript>
</head>
and greate a file where you create a class something like
<?php class MyTemplate {
public function getCssPath() {
return 'css/skel-noscript.css';
}
}
Which files are needed to include in <head> section for less css. At less official site , i have just seen that they have told to include .less and .js file. But it is not working without .css file.
Referring to LESS documentation (http://lesscss.org/#client-side-usage):
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Then download less.js from the top of the page, and include it in the <head> element of your page, like so:
<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.
This method will cause the less-file act as a regular css-file so no additional files are needed.
This is not a good practice for production environments though. You should compile your less-file to css-file and include it in your <head>-section as is without any less- or js-files.
#import "styles.less";
OR
#import "styles";
its from ur CSS file..
you just need to include it like
<link rel="stylesheet/less" type="text/css" href="styles.less" />
This one helped me ...
<script src="less.js" type="text/javascript"></script>
I was tryin to use only this
<link rel="stylesheet/less" type="text/css" href="styles.less" />
We may have to place lot of LINK elements and SCRIPT elements in the head elements of an HTML page. Also there can be a lot of pages with same above mentioned elements. Therefore can we put all the of them in a one file and place only that links containing file in HTML head element?
Eg: Something like,
<link href="links.something"> etc
instead of
<HEAD>
<link href="css/home.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/images.css" rel="stylesheet" type="text/css" media="screen" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>`
<HEAD>
In your case it would be best to do PHP includes For example a page would be coded in parts: header.php, footer.php, and the main content would be loaded dynamically too.
<html>
<head>
<?php
include('header.php'); //PHP file that holds all the links(not anchor links) and scripts
?>
</head>
<body>
<?php
include('body.php?page=whatever');
include('footer.php');
?>
</body>
</html>
By doing so, you'd only have to edit one file to make changes to many.
You could generate them dynamically from a server-side script (say, PHP), I've sen this done using the CodeIgniter MVC framework, though you could do it with straight PHP.
You could also use a templating engine (like Smarty) to do the same thing.
Straight php:
<head>
include('js_files.php');
</head>
CI MVC (in the controller), this is fairly involve & there are much better examples on the web:
$jsfiles = $this->load->model('head_files');
$head = $this->load->view('head', $jsfiles, false);
I'm not sure about Smarty as I'm only starting in it myself, this is the main reason I started with it, unfortunately I've lost the link to the tutorial I saw.