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.
Related
I am using AEM 6.2 and trying to create a parsys component in crx, using the code below
However, the height of this parsys, in edit mode, comes as 0px.
Attached are the screenshots.
When I manually change the height to some values eg. 40px, it looks fine.
Note: I am not using any client library for the above page. (no css and js)
Futher, All sample sites like geomatrix etc have parsys showing correctly.
Could anyone guide me with what I am doing wrong?
I think that the problem is outside the component or any of the code shown here.
I think what's happening is that the css style for the div that gives the droptarget placeholder its dimensions is not loading.
That's loaded as part of the AEM authoring client libraries which you should be inheriting from the foundation page component.
Examine your page component's sling:resourceSuperType property. It should point to either wcm/foundation/components/page or wcm/foundation/components/page or inherit from a component that does.
If that is set then you have may have blocked one of the scripts within it, quite possibly head.html.
Include following code in the head section of the page component's rendering script.
<!--/* Include Adobe Dynamic Tag Management libraries for the header
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
*/-->
<!--/* Initializes the Experience Manager authoring UI */-->
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
For resolving your issue, you need to include init.jsp in the first before writing down the parsys code. I mean write like this.
<head>
<sly data-sly-include='/libs/wcm/core/components/init/init.jsp' />
</head>
<body>
<sly data-sly-resource="${'par' #resourceType='foundation/components/parsys'}" />
</body>
I think #l-klement pointed it out correctly that the problem is outside component. When I rename the landingpage.html file to body.html it starts working fine. I think this may be because of different files like head.html etc present at wcm/foundation/components/page which is required to provide proper styling and load certain required client libraries which assigns proper styling to parsys.
If the above is true, my next question would be, How can I have my own head.html, body.html, header.html, footer.html etc files without compromising with the parsys styling?
I'm using Bootstrap files within my application and I want to enable "Use runtime optimized JavaScript and CSS resources".
the problem I have is once enabled; glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg and glyphicons-halflings-regular.woff cannot be found:
I know for Bootstrap 2.3 we could use a Theme that loads a .CSS file that changes relative locations as described here http://www.bootstrap4xpages.com/bs4xp/site.nsf/article.xsp?documentId=F435B6DC54486B67C1257B6B002E5A6C&action=openDocument
So, what should I do to handle relative locations with Bootstrap 3?
You have to tweak the path to the web font resoureces in the Bootstrap CSS files.
Delete the part with "../" and replace it with the relative path to the font files within your project structure, e.g.
bootstrap/fonts/...
Then aggregation will load the fonts correctly.
This does not answer your question but if you want to use Bootstrap 3 you'd be MUCH better off using the Boostrap4Xpages project on OpenNTF.org. It will perform better and the resource aggregation will work better. It's easy to install and use but it is a plugin on the sever so that needs to be done. It's not self contained to the NSF. Try and move to this if at all possible.
Regarding the actual question. I'm not sure I know the answer specifically. I do know that using relative links can sometimes be a problem if the browser's URL doesn't have the page.xsp portion. So it works on the page.xsp and NOT the default launch XPage where the URL ends with the database.nsf. What I've done in the past there is set the application to launch to something like "start.xsp" and in that page in beforePageLoad to a redirect to "home.xsp". This forces the browser url to always show the page name and made life a little easier when dealing with adding projects to WebContent.
I am using LIferay Theme to create a theme for a website.
IN the portal_normal.vm file, I have included all the html code and css I have defined in custom.css
THe problem is that css from custom.css is not getting applied to portal_normal.vm page
SHould I include some file in velocity file which tells that custom.css should be included?
Also is it ok to include all css code in velocity?
Regards
EDIT:
custom.css and portal_normal.vm are inside _diffs folder
put the custom.css under ~/theme/docroot/_diffs/css/custom.css
see the main.css in ~/theme/docroot/css/main.css it should include
...
#import url(custom.css);
...
It should work may be problem in browser cache.. try to run ant clean and then run ant deploy.
and also try to copy portal_normal.vm file to _diff/templates directory.
_diff/templates/portal_noraml.vm and change here.
I've got an express.js app currently using ejs (using jade for newer projects) and I'm trying to solve a problem in a clean and appropriate manner.
I've got a layout.ejs file with my header and footer in it. Most of my site so far has been one layer deep http://innovationbound.com/about or /services or /amy and so on....
I'm beginning to created online courses at http://innovationbound.com/courses/course-name and the issue I'm having is that these course pages can't reference the images the same way. <img src="images/linknedin.png" alt="LinkedIn Icon"> for instance.
From the course-name page it tries <img src="courses/images/LinkedIn.png" alt="LinkedIn Icon"> and obviously can't grab the image there.
Is there a setting in express, or something obvious I'm missing? I hope I don't have to use absolute urls, that just makes developing on the local machine insane.
Just use site root–relative paths. For example <img src="/images/linknedin.png" alt="LinkedIn Icon">. Note the / makes the difference.
There are three types of link paths:
Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
Document-relative paths (such as dreamweaver/contents.html).
Site root–relative paths (such as /support/dreamweaver/contents.html).
From Adobe.
You might consider it, but you can use "../images/link(n?)edin.png". However, I'd recommend to use absolute path, because images should be stored in /public (in general jade setup) and your path depth could be varied by your route rule.
As a tip, if you lost in relative path of image, right click on broken image and see a URL in properties on web browser. It'll give you a hint of where the image is.
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/