custom css, js, favicon for webpages
I was able to create my testsite with the hubzilla webpages app.
I had to do some severe hacks with the foundation.min.css
and bootstrap.bundle.min.js
to achieve this goal.
My layout looks like this
[template]zen[/template]
[region=htmlhead]
[css]foundation[/css]
[/region]
[region=content]
[block][var=wrap]none[/var]nav[/block]
[block][var=wrap]none[/var]content[/block]
[block][var=wrap]none[/var]footer[/block]
[js]jquery[/js]
[js]bootstrap[/js]
[/region]
To be able to insert my own css files in [css]foundation[/css]
I replaced the content of the https://myhubzilla-site.de/library/foundation/css/foundation.min.css
with the following content.
@import url("https://myhubzilla-site.de/view/theme/mytheme/css/style.default.css"); /* Using a url */
@import url("https://myhubzilla-site.de/view/theme/mytheme/css/style.nav.css"); /* Using a url */
@import url("https://myhubzilla-site.de/view/theme/mytheme/css/style.new.css"); /* Using a url */
...
In the https://myhubzilla-site.de/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js
I inserted
function include(file) {
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
/* Include Many js files */
include('https://myhubzilla-site.de/view/theme/mytheme/js/bootstrap-hover-dropdown.js');
include('https://myhubzilla-site.de/view/theme/mytheme/js/fv.js');
...
Now the rest of my hubzilla channel works only limited, which was clear to me due to my changes to foundation.min.css and bootstrap.bundle.min.js.
Hence my request.
Would it be possible to insert the following function in the layout of the hubzilla webpages app.
[favicon]custom[/favicon]
- which links to https://myhubzilla-site.de/view/theme/mytheme/img/favicon.png
[css]custom[/css]
which links to https://myhubzilla-site.de/view/theme/mytheme/css/custom.css
in my custom.css
I can use @import url
to import all my css-files which are necessary for my webpages.
[js]custom[/js]
- links to https://myhubzilla-site.de/view/theme/mytheme/js/custom.js
in my custom.js I can use
function include(file) {
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
to insert all my js-files which are necessary for my webpages.
With [code][/code]
I should be able to insert some html-code in my layout. Like
<!-- Tweaks for older IEs--><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
My layout would have to look like this to work perfectly
[template]zen[/template]
[region=htmlhead]
[favicon]custom[/favicon]
[css]custom[/css]
[code]<!-- Tweaks for older IEs--><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->[/code]
[/region]
[region=content]
[block][var=wrap]none[/var]nav[/block]
[block][var=wrap]none[/var]content[/block]
[block][var=wrap]none[/var]footer[/block]
[js]custom[/js]
[/region]
Perhaps this also would work:
[css]https://myhubzilla-site.de/view/theme/mytheme/css/style.default.css[/css]
[css]https://myhubzilla-site.de/view/theme/mytheme/css/style.nav.css[/css]
[css]...[/css]
[js]https://myhubzilla-site.de/view/theme/mytheme/js/bootstrap-hover-dropdown.js[/js]
[js]https://myhubzilla-site.de/view/theme/mytheme/js/fv.js[/js]
[js]...[/js]