I'm trying to use GitHub as required of my class to launch a website. Unfortunately, I have to be doing something wrong. My filepaths in the index.html file are as follows:
link href="/css/style.css" rel="stylesheet"
for the style sheet
Now for the image I'm wanting to use I'm using:
img src="/images/TomEdwards.jpg" alt="Tom Edwards"
and I'm getting this instead at this location:
https://ladywebdevelop.github.io/bioSite/index.html
my file tree looks like this:
css (Folder)
images (Folder)
README.md
index.html
What are my possible solutions, please?
I've tried several different ways in the file path names to access both the stylesheet and the images.
I'm expecting the stylesheet to render correctly with a colored background and the image to appear on the right-hand side under the horizontal navigation list.
I was able to load the stylesheet by changing this:
<link rel="stylesheet" href="/css/style.css">
To this:
<link rel="stylesheet" href="css/style.css">
The stylesheet must be referenced correctly relative to the index file.
As for the image, I don't see it in the application's sources. Are you sure that it's committed to the repository, and located in the right place? The current codes has it here, which looks like a typo:
<img src="TomEdwards/TomEdwards.jpg" alt="Tom Edwards">
Related
I'm currently implementing a mockserver for my UI5 Application.
Everything works fine, which means my ui5 controls get the mocked data correctly.
The only thing I’m still struggling with are source paths of images.
Here an example:
Within an XML Fragment, I have the following image content
<ImageContent src="images/logo_green.svg" press="navToDashboardPage"/>
The Image can be displayed, when I run my normal index.html.
When I run the mockserver.html (which in in the test-folder) the path has to be like "../images/logo_green.svg".
How can I set the paths independently from the index.html / mockserver.html?
Or is there a way to figure out (within xml) which .html page is currently running?
Thanks for your help :)
Did you try to add a <base href="../"> to your mockserver.html?
You'll probably need to adapt the data-sap-ui-resourceroots element in the bootstrap. From the UI5 tutorial, this is the invocation in index.html:
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
and this in test/mockServer.html:
<script
id="sap-ui-bootstrap"
src="../resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "../"
}'
I don't have an example with an image at the moment but css/styles.css is correctly referenced in both cases, so that should be it.
Also, you should adapt the src path as well, if you're booting from a local copy instead of the CDN. sap.ui.demo.walkthrough of course should be the name of your app.
I have been trying to put together my own page at meredithhu.github.io. As you can see, at this point, only the Home page is displaying the correct layout, all other pages' (if you click through the tabs on home page) layouts are off... And I couldn't figure out why and how to fix it...
All the codes are here: https://github.com/meredithhu/meredithhu.github.io.
I defined layouts in the _layouts folder, apparently only the default.html is working... but aren't all others defined the same way? how could none of the other ones work?
Could anyone give me some hints how to fix the problem?
Update your link tag from default layout
<link rel="stylesheet" type="text/css" href="css/main.css">
to this ->
<link rel="stylesheet" href="/css/main.css">
There is a problem with the styles loading, if you just use href="css/main.css" then the browser will use the current level as the base URL, this is why it works for the base url, but not for any other deeper category/page, in _layouts/default.html change the CSS line to:
<link rel="stylesheet" type="text/css" href="{{site.baseurl}}/css/main.css">
Also, in _config.yml, there is a wrong parser, remove the line markdown: shengli so the website loads properly.
Given the following code:
<html>
<body>
<%- partial('myPartial.html') %>
</body>
</html>
It will work if I place myPartial.html in the views folder, however what I'm trying to do is to pull the view from the .tmp/public folder.
I've tried importing a script from the same location and it work so I think it might be related to partial().
Does anyone has solved this before?
The .tmp/public is generated from the assets folder, processed by default grunt tasks. It is used by Sails when serving assets at runtime. So when serving assets, like scripts and styles, the path is relative to .tmp/public.
On the other hand, partials are used when rendering ejs, and the relative path depends on the view that you working on. Partials really belong to the views folder. But if you really need to use an html from the assets in a partial, then you have to access myPartial.html relative to the current view.
Let us say you myPartial.html is in .tmp/public/myPartial.html, then your view should be something like
views/homepage.ejs
<html>
<body>
<%- partial('../.tmp/public/test.html') %>
</body>
</html>
Alright, so I set up a website using Github a while ago. I use it as a showcase for programming projects I'm working on, but that's beside the point. For a while now I've been trying to add an icon to my website, and for the life of me I can't figure out how. Help please.
If by icon you mean the image you see on the browser tab 32x32 pixels, that is usually in a format called Favicon.
You just need the image of your icon in favicon format (google how to convert an image to favicon and you will find websites that do this for you easily.), add it to your project and then add a tag on your hmtl head:
<head>
/* some style tags */
/* THE FOLLOWING IS YOUR 'ICON' */
<link rel="icon"
type="image/png"
href="./style/images/logo.favicon">
</head>
But this question should definitely not be under git tags. You did not mention why one should keep in mind that you are using github.
I have uploaded favicon.png to my Wordress 3.9.1 website: www.belldex.com and it works well. I have already placed the favicon in other folders such as the theme's folder.
However, it only works on the homepage and not on any other page.
Appreciate being pointed to the right direction.
If you are using something like this inside your head tag
AND If Homepage is on a different Domain/Subdomain than other pages: you will need to repeat
PS: .PNG is not as ideal as .ico, so I'd convert your image first, an in the case above, save in on the same level as your html pages.
Your head tag contains two links to favicons, and the second one doesn't work:
<link rel="shortcut icon" href="http://www.belldex.com/favicon.png" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.belldex.com/wp-content/themes/smartit/favicon.png" type="image/x-icon" />
You should delete the second one.