I'm going through the tutorial on the angular-meteor.com. What I am asking about is just for a fullstack angular-meteor web page and not for your standard static html page. How do I get a favicon to show instead of the default page favicon? Where do I put it in the file structure? Right now it is in the same folder as the index.html(client/).
By default you should put it to your website's root folder with name /favicon.ico.
So in this case your file structure should look like this:
\ - index.html
- favicon.ico
or this:
\ - favicon.ico
\ html
- mypage.html
- favicon.ico - it is not readed by default
But you can override the default icon by adding the following tag to your header element:
<link rel="shortcut icon" type="image/png" href="/path/image.png" />
Most of the modern browsers support ico, png, gif formats. Some of them also supports SVG format.
In Safari browser you should also define a pinned tab icon by adding the floowing lines to your html header:
<link rel="mask-icon" href="website_icon.svg" color="red">
You can read more about favicon in specs: https://html.spec.whatwg.org/multipage/semantics.html#rel-icon
Related
I'm using JHipster and searching for an example of templating emails with Thymleaf. My problem is that the CSS and JS (static files) aren't injected into my templates..
<link href="../static/css/bootstrap.min.css" th:href="#{/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
I am getting the following error:
org.thymeleaf.exceptions.TemplateProcessingException: Link base "/css/Boostrap.min.css" cannot be context relative (/) or page relative unless you implement the org.thymeleaf.context.IWebContext interface
Below is my Spring boot resource structure :
--- resources
|--- i18n
|--- mails
|--- static
|--- css
|--- boostrap.min.css
What is the problem here?
Your message template should refer to absolute external URL of your CSS with domain name, it should not use relative URL. If you don't do so the mail reader does not know where to download this CSS from.
This is why there is jhipster.mail.base-url property in application-prod.yml
The generated templates already use it for favicon:
<link rel="shortcut icon" th:href="#{|${baseUrl}/favicon.ico|}" />
I would add that external CSS could be blocked by mail readers depending on users settings especially when not using https and there's nothing you can do against it. This is why most people will recommend inlining styles rather than linking to external stylesheets. Styling in HTML mail is hard and you will find many resources explaining why and how to workaround some of these issues. View the source of HTML mails you received in your inbox to get an idea.
For Email templates apparently you have to remove the preceding "/"
<link href="../static/css/bootstrap.min.css" th:href="#{css/bootstrap.min.css}" rel="stylesheet" media="screen" />
I'm porting an old site to a new template and am having problems with the Windows 2008 rewrite module. The link I'm trying to rewrite looks like this:
http://ltweb2008.serveronline.net/product.php?pID=75
and brings up the page just fine. Then I apply the new URL and it loads the proper content, but doesn't load the template's style.css file anymore.
http://ltweb2008.serveronline.net/product/75/any-text-here
The problem seems to be that the company who made the template (canvas) put the main .css file in the root directory, but loaded all the rest in /css. Now I can't get the main .css file to load using the rewrite and when I move it down to /css it only displays a blank page, though when I check out the page source it's all there.
With this the page shows but is not using style.css (with rewrite):
<link rel="stylesheet" href="style.css" type="text/css" />
With any of these the page is completely blank (with rewrite):
<link rel="stylesheet" href="/style.css" type="text/css" /> OR
<link rel="stylesheet" href="/css/style.css" type="text/css" /> OR
<link rel="stylesheet" href="http://ltweb2008.serveronline.net/style.css" type="text/css" />
I'm using this for the Pattern:
^product/([0-9]+)/([^/]+)$
And the Rewrite URL:
/product.php?pID={R:1}
Does anyone know what I'm missing?
one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,
This is because your relative URIs have their base changed. Originally, the base is / when the page is /product.php?id=75, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /product/75/any-text-here the base suddenly becomes /product/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
Maybe you need one thing, maybe both, I didn't test, but this solved it for me:
1.) ADD THIS in page_load :
Page.Header.DataBind() ' Needed because we have <%# %> codeblocks in the HEADER (seems header only causing this) WITH the AjaxControlToolkit running on the page. That's what broke it until we put in this and put in the pound instead of = sign in the html.
2.) Add this in ASPX:
<%# MasterType VirtualPath="~/dir1/dir2whateverdir/MasterPage.master" %>
I was supplied with a custom layout for the login page of my Laravel project.
When I opened login.html file, which represents the layout for that specific page I saw such links
<!-- Base Css Files -->
<link href="assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
...
So I figured that I only need to copy the assets folder, which came with the template (there are all needed bootstraps, jqueries and whatnot) to my projects app\resources\assets directory
Now, when I copied the code from login.html into my login.blade.php view and copied the templates' assets folder to app\resources\assets it doesnt work. It only displays naked html code when I open the page.
What am I doing wrong in linking the assets folder?
The resources folder is (like the name says) for the resources.
If you don't want/need to build/compile/min your scripts, then just put them in the public folder, so you can access them from your template.
In your case
public/assets/libs...
In order to access assets, you have two ways to approach it. Either using Elixir/gulp or to use direct access.
Gulp is a node.js application that reads your assets files, whether JS, CSS, Coffee, etc...and combine them in single files. Gulp reads the files defined in the gulpfile.js, and you can access the output files in your blade file using elixir().
You can read more about Elixir here.
In your specific case, you can just place the files under the public/ directory. So Laravel treats public as the root directory, and if you want to read the file assets/css/foo.css just place the file in public/assets/css/foo.css
I am using a favicon which is linked in all pages using <link> tag. This favicon is stored in a folder inside the root folder, and I have another favicon stored in the root folder also. When the site loads fully the favicon which I am referring to is shown correctly. But when I stop the site before loading completely then it shows the favicon from the root folder.
Is this the default/desired behavior?
Thanks
I'd say yes.
The only way the browser can find your correct favicon is by using the <link> tag. If that tag's not present or parsed correctly the browser will have to fall back on its default behaviour which is to look for a file called favicon.ico in the root folder.
I don't know about desired behaviour, but it is to be expected. The browser will request /favicon.ico by default, and the <link> is considered an override.
You will find for most browsers, they will actually fetch both, but display the <link> by preference.
Most browsers, if they don't find a <link rel="icon"> or <link rel="shortcut icon">, fall back on the old bog-standard of showing /favicon.ico . Some can be configured to avoid this (e.g. Opera has this in GUI config), some will look for /favicon.ico regardless.
This is an artifact of the Browser Dark Ages and no fault of your own.
I have an aspx page that has an iFrame in it, I set the src attribute of this iFrame in the page load event.
The page that gets loaded into the iFrame has its own references to its own stylesheets and javascript files, but when the page loads, it tries to locate these files with a path from the parent page.
Example structure:
/application/example/parentpage.aspx
/application/iframepages/iframepage.html
/application/iframepages/css/iframepagecss.css
/application/iframepages/scripts/iframepagescript.js
With the iframepage.html containing the following lines:
link rel="stylesheet" href="css/iframepage.css" type="text/css"
script type="text/javascript" language="javascript" src="scripts/iframepagescript.js"
The problem seems to be when iframepage.html loads in the iframe on parentpage.aspx, it tries to load the css file from the path application/example/css/iframepagecss.css and likewise for the javascript it tries to load it from application/example/scripts/iframepagescript.js.
This only happens in Firefox, it works fine in IE, Chrome and Safari. Thoughts?
Thanks in advance.
Looking at AJAX and Relative Path Scope you can try to use the BASE HREF tag, or otherwise use absolute paths instead.