I try to add materialize to my Github pages served by jekyll. I want to add carousel as follows:
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
I added css and js to the assets folder of my website.
After jekyll serve html page compiles and I get the following file.
The links to css/js work but I still get empty page, with pictures.
How can I get materialize working with Github pages?
Related
I wrote following code in main-page.html
<a href="" class="arrow">
<img th:src="#{/image/right-arrow.png}" alt="back">
</a>
but it said that no mapping
No mapping for GET /image/right-arrow.png
why it is happening? It is also not working for css
my resource files screen
Hello I have a problem with add logo to my website. Firstly I had some example logo
<a class="navbar-brand d-flex align-items-center" href="/">
<a class="navbar-brand" href="#"><img src="img/cattery/logo-cattery.png" width="250"height="70" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>
And everything was good.
Secondly I bought some logo on logo creator website and now there is a problem with my logo. There is 404 error. I use the same code and localization but another file- the file seems good, I can open it and I can see the content.
My new code:
<a class="navbar-brand d-flex align-items-center" href="/">
<a class="navbar-brand" href="#"><img src="img/cattery/cattery_logo.png" width="250"height="70" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>
I tried various files from my logo package and I changed localization etc but unfortunatelly I haven't got it.
A 404 error usually indicates that a resource can not be found. Are you completely sure that the path is 100% correct?
Another cause of error could be that (actually both paths) img/cattery/cattery_logo.png is a relative path, hence the actual path called depends on the currently opened site. Consider changing the path to absolute: /img/....
I have a menu component html (src/menu/menucomponent) that exhibits images from a folder (src/assets/images/image.png) for the main nav when being viewed on a computer. Then I have a sidenav that is shown when on a mobile device.
The code is :
<div id='main'>
<span class="hamburger" *ngIf="isMobile" (click)="openNav()">☰</span>
These images appear both locally and globally. Then I have the following:
<div id='mySidenav' class='sidenav'*ngIf="isMobile">
×
<a href=".#/welcome" >Home</a>
<a href=".#/aboutme" >About Me</a>
<a href=".#/projects" >Projects</a>
<a href=".#/contactme" >Contact</a>
Subscribe
<img src="../assets/images/Image1.png">
<img src="../assets/images/Image2.png">
<img src="../assets/images/Image3.png">
<img src="../assets/images/Image4.png" >
These images appear locally but once hosted on a server, do not show, but the links still work. I have double-checked that they are in the same images folder and that they are the right image names.
Does anyone have some ideas?
The assets folder is copied to the dist when you compile the app.
So, you change your sources to:
<img src="./assets/images/Image1.png">
The ng serve can still figure out where the files are when you are testing locally.
I have added addthis to a Joomla site. By default it loaded like this:
<div class="addthis_sharing_toolbox"></div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
And it looks like this:
I have enabled JCH (to improve speed), but addthis is not working. I have to keep JCH. I manage to make it work, using following code:
<div class="addthis_sharing_toolbox addthis_default_style addthis_64x64_style" data-title="title">
<a class="addthis_button_facebook at-icon-wrapper at-share-btn at-svc-facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_google_plusone" style="cursor:pointer"></a>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
As you see I have added the tags with the icons, in that way they load, but the styling is totally different, how can I keep same design?
The answer is here: https://www.addthis.com/academy/customizing-the-addthis-toolbox/.
In my div I had the class "addthis_sharing_toolbox" but I had to use "addthis_sharing_toolbox"
<div class="addthis_toolbox addthis_default_style addthis_64x64_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
</div>
I am trying to make my logo clickable to go back to the homepage but can't seem to get it to work.
Any help appreciated...
<!-- logo begin -->
<div id="logo">
<a href="index.html">
<img class="logo logo_dark_bg" src="images/logo.png" alt="/">
<img class="logo logo_light_bg" src="images/logo_light.png" alt="/">
</a>
</div>
<!-- logo close -->
Your anchor currently work only from the root so you should update your reference to be from the root as well, so href="/index.html" note the starting "/". The Same applies to your src links:
<div id="logo">
<a href="/index.html">
<img class="logo logo_dark_bg" src="/images/logo.png" alt="logo">
<img class="logo logo_light_bg" src="/images/logo_light.png" alt="logo">
</a>
</div>
Starting an anchor link with a / means it sources from the root so that wherever the above code is based (such as in site.com/currentfolder/file.html) it will always connect with your home page which would typically be found in site.com/index.html.
Currently (without the leading /) the anchor link is looking for site.com/currentfolder/index.html which is almost certainly looking for a file which is not the welcome or home page.
Update
Also you need to ensure that the home page file does actually exist. Typically in your case the home pages may be /index.htm rather than /index.html. Please ensure that the file with the correct filetype HTML reference (.html or .htm) exists and is referenced correctly.
Summary Issues
Anchor href file should be absolute reference starting with /
Anchor href file must exist, with the correct filetype (.html or .htm, etc.).
image src should be absolute reference (starting /).
image alt should be the website name and/or logo description.