How to change Lightswitch browser icon? - browser

I tried to change the application icon but it only works with the desktop version , when i convert to web the icon didn't display correctly , only blank page icon displayed.

Unfortunately, the Lightswitch team has apparently not thought of this... at least since Visual Studio 2012.
It is a manual process, so each time you publish you will have to put this in the default.htm file located in the main directory
<head>
...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
...
</head>
Where favicon.ico is the URL of somewhere on the server/computer.
This line is to be placed within the head tags.

It can't be done through Visual Studio. It is a manual process. For the highest compatibility, you need to create an image that is 16 x 16 pixels in a .ico format and name it favicon.ico. You will then need to place it in the root directory of your website which should be located at C:\inetpub\wwwroot\MyWebApp.
For more information on favicons, see the Wikipedia article.

Related

Include mathjax equations in CHM file

I'm looking to create a chm file with a topic with some mathjax equations. The html file corresponding to the topic is very simple:
<html>
<head>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
When I compile in HTML Help Workshop, it's all good. But when I open the resulting chm file and navigate to that topic, I get this issue:
and then the equations don't render - I just get whatever is written in plain text mode. Is there any way at all to get mathjax equations render properly in a chm file?
The CHM help file format is very old and hasn't been updated by Microsoft in a long time: internally it still uses a very old version of Internet Explorer to display the content of the topics.
Recent versions of MathJax are not compatible with older web browsers and that is probably why you are seeing this error.
To avoid this problem, you can either:
Use an older version of MathJax which is compatible with older web browsers such as Internet Explorer 6
Create a hyperlinks in your CHM help file to a webpage which shows the problematic content: it will be opened by the system's default web browser which is (almost) guaranteed to be much newer
Some help authoring tools also include a way to change the Internet Explorer compatibility settings which could be used to force Microsoft Edge to be used to display content: it should allow MathJax to run properly
MathJax used to be able to work in CHM files, but it was a bit fiddly to get it to work. As I recall, you had to use an explicit configuration rather than the ?config=... approach for one thing. There are some very old discussion about it in the MathJax user's forum; see here. it was always a bit difficult to get it to work, and these discussions were about very early versions of MathJax (v1.1, v2.0, v2.1), so you might need to explicitly select older versions of MathJax. Also note that the cdn.mathjax.org address was retired in 2017 (it still exists, but redirects to another CDN, and that might also be a problem for CHM files), so you may want to use one of the other CDNs that serve MathJax, e.g., cdn.jsdelivr.net/npm/mathjax#2/MathJax.js, instead.
As a first simple step you'd try to add following line into your HTML topic files:
<meta http-equiv="X-UA-Compatible" content="IE=11">
Tested and compiled by using FAR HTML with HTML file shown below and some css stuff. I did a reverse test by deleting the line mentioned above only and the script error window appears again.
For further information using X-UA-Compatible see also: https://stackoverflow.com/a/6771584/1981088
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<title>MathJax Test</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<link rel="stylesheet" href="../design.css">
</head>
<body>
<h1>MathJax Test</h1>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
is resulting in a CHM topic like this:
Of course you need a internet connection.

Adding Font Awesome icons in the ejs file in Nodejs (with express js) project

Hey guys i am trying to build a comment system project with Nodejs . At a certain place i want to use Font Awesome icons in my project so i tries 2 ways but failed to render thoses icons
First
inclucing
<link href="https://stackpath.bootstrapcdn.com/.../font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
inside my head tag in ejs file
and then
Second
Download this zip file https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
and open the CSS folder inside and drag the all.min.css file into your public directory in your project.
and then Use a link tag to reference it in your templates/HTML, e.g:
and
Both the ways failed, am i missing something ?
Since you are using the font-awesome solid styles with the fas class, you'll have to include the solid.css styles.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/solid.min.css">

Add Favicon to Hexo Blog

I have made a Hexo blog. I can't however find out where to add the favicon. I have tried adding it to different folders but it isn't being found.
Does anyone know where it should be added or if there is anything else I need to update.
It depends on theme you're using, check theme documentation and source.
Some themes, like apollo are supports favicon config parameter (theme_config.favicon parameter in_config.yml).
If theme does not support a custom favicon, then just add file source/favicon.ico and it will be requested by browser automatically.
I use Landscape, the default theme at time of writing.
blog\blog\node_modules\hexo\node_modules\hexo-cli\assets\themes\landscape\_config.yml
At the bottom of the file, you'll find a section titled Miscellaneous.
# Miscellaneous
google_analytics:
favicon: blog\themes\landscape\source\css\images\favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:
Windows can be directionally-challenged when it comes to slashes, so try the opposite direction if you use PC. This took some fudging on my part, and I was able to use an .ico file as well as a .png.
If you're still in need of a placeholder image, I've used Favicon.cc and had great results.
you can add the favicon.ico in the source floder, and add a line in the blog/_config.yml
favicon: favicon.ico
so, you know the source is the root path
I think all the other answers are so confused.
Now just three steps to add a favicon to your hexo-blog website, and I take next theme as example:
First, download your favorite imagename.ico image file from network or you make one by yourself.
Second, rename the imagename.ico file to favicon.ico, then move it to that folder: blog/themes/next(the theme folder you are using now)/source/images/.
Finally, modify the code in file blog/themes/next/_config.yml at that line to the same as below:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
Done!
Konstantin Pavlov is right.
for example, I use hexo-theme-next theme.
I change code in themes/next/_config.yml.
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
I put my favicon.ico in themes/next/source/images/favicon.ico
well Done.
Add this to the head part of the html code...
<head>
<title>Test Page</title>
<link rel="icon" type="image/png" href="http://www.w3.org/Icons/w3c_home">
</head>
For more on this have a look at the W3C site : How To FavIcon
It's also good to inspect the page source by looking at the console as it will report if there were any issue retrieving the icon.

Migrate custom admin pages with dialogs from 4.5.12 to 5.3.4

We have code to open dialogs for links on admin pages by calling the javascript function mgnlOpenDialog(), like this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[#assign cms=JspTaglibs["cms-taglib"]]
<html>
<head>
<title>UCP Books</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${this.request.contextPath}/.resources/admin-css/admin-all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${this.request.contextPath}/.magnolia/pages/javascript.js"><!-- --></script>
<script type="text/javascript">
function displayDialog()
{
if ( ! window.focus ) return true;
var path = "${this.path}";
var nodeCollection = null;
var node = "${this.nodeName}";
var paragraph = null;
var repository = "${this.repository}";
var dialogPage = ".magnolia/dialogs/author.html";
mgnlOpenDialog( path, nodeCollection, node, paragraph, repository, dialogPage );
return false;
}
</script>
</head>
<body id="mgnl" class="mgnlBgLight mgnlImportExport">
<h2>
${this.messages.get("module.books.pages.AuthorDetailPage.header")}
<span class="mgnlControlButton" onclick="displayDialog();">
${this.messages.get("module.books.pages.edit")}
</span>
</h2>
<div class="pageFrame">${this.content}</div>
</body>
</html>
Now we are migrating our site from 4.5.12 to 5.3.4, and I noticed that the dialog definitions got updated. Now when I click on the link, there is still the dialog popup, but the popup is blank with the old style "Save" and "Cancel" buttons displaying at the bottom. It seems we need to convert our admin pages to content apps. But to do it that way will require a lot of changes in our code. So I'd like to know if there is an alternative way to replace mgnlOpenDialog() function to invoke the dialogs when I click on the links on the admin pages.
Thanks very much!
Aiping
Yeah this doesn't work any longer. Assuming you needed to open the dialogs explicitly because you had content you were editing in other workspaces then website. Correct?
When migrating custom data to M5, if you had that content in data workspace, you can use migration task to move it from the shared workspace into separate workspace and to also migrate your dialog. Not sure at the moment if it generates also app for you, but if not you can use this script to create one.
Once you have dialog migrated (or created from scratch) and your app created (either via script above or manually) you can just simply open any content in that app for editing and copy url from there. That would be the url you need to call to open dialog for editing from anywhere. It will be something like http://<your host>:<your port>/<contextPath>/.magnolia/admincentral#app:<yourAppName>:detail;/path/to/edited/content:edit
of course, assuming your subapp is called "detail" and your edit action "edit" as suggested in the tutorial or generated by the script.
Good luck,
Jan
Thanks Jan!
This seems a right direction to go by calling the url,
http://<your host>:<your port>/<contextPath>/.magnolia/admincentral#app:<yourAppName>:detail;/path/to/edited/content:edit.
I've configured the detail subapp and added this line to my code,
title
and it works. I'll post more in details later.
Thanks,
Aiping
Jan, I tried your solution as I commented here and it works well, except for one issue. Here I'm pointing to several screenshots to better explain it.
https://plus.google.com/u/0/photos/103180294078685589341/albums/6081701864232931905
On the app_faqSearch_1.png, there is a search form only.
The app_faqSearch_2.png is the page with the search results.
When I click on the "faq0004" link on app_faqSearch_2.png, the app_faqSearch_3.png appears. The code behind the scenes is,
faq0004
The problem is when I close the dialog tab "/FAQ/TOPICS/COMMAS/...", on the app_faqSearch_4.png, the search results are not there anymore since the view got reloaded.
Is there a way to configure to prevent the view from being reloaded if it's already opened, like for this URL in my case, /magnoliaAuthor/.magnolia/admincentral#app:faqSearch:main;
Or is there a way to explicitly open a dialog, instead of an editor, by passing the node path and workspace when click on the link like "faq0004"? Similar way to open the "editMessage" dialog in "contacts" app.
Thanks very much,
Aiping

Preferred way to use favicons?

I was trying to add a favicon to a website earlier and looked for a better way to implement this than to dump a favicon.ico file in the root of the website.
I found this nice little guide: How to Add a Favicon. However, the preferred method did not work in IE (7) and the second method is the old fashioned way (which I resigned myself to use).
Is there a third method that works across all the most popular browsers?
This is what I always use:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
The second one is for IE. The first one is for other browsers.
You can use HTML to specify the favicon, but that will only work on pages that have this HTML. A better way to do this is by adding the following to your httpd.conf (Apache):
AddType image/x-icon .ico
I think the most reliable method is the simply added the favicon.ico file to the root of your website.
I don't think there is any need for a meta tag unless you want to manually override the default favicon, but I was unable to find any research to support my argument.
This is how they're doing it right here on Stack Overflow:
<link rel="shortcut icon" href="/favicon.ico" />
Well, the file is in the root so it does not show whether the tag works or if the browser just got the icon from the usual location (the root).
Edit: I'll try it and see if it works.
Edit 2: Using both tags make it work even for any file name as long as the file is an icon for IE7: I tried using .png files and it only worked with Firefox.
There are a million different ways these icons are used (different browsers, different platforms, mobile site-pinning, smart TVs, etc, etc), so there's really no longer a simple answer. For a great explanation see this S.O. answer, but the short answer is:
Use this site which lets you upload a png/jpg and then does all the hard work for you: https://realfavicongenerator.net/

Resources