Good day.
I want to be able to import a HTML element I have designed into my document. I would use this for headers and footers. Instead of having to edit EVERY document on the server when I want to change something with the headers and footers, I would just like to edit the one file, which would change all of the documents.
I have tried <iframe> by embedding the page with only the header on, but there is too many things that could go wrong (considering half of my users will be on varied mobile devices).
How can I import a HTML file on my server into another file, without duplicating it?
You might want to take a look at Webcomponents! Webcomponents allow you to write your own controls and import them without having to copy paste them in your webpages everywhere. For example, if you have your own header control you can define it in a file (e.g. myHeader.js) as such:
class MyHeader extends HTMLElement
{
/* Your header style and layout */
}
window.customElements.define('my-header', MyHeader );
and then later reference in your HTML:
<!-- Include control -->
<script src="controls/myHeader.js"></script>
<!-- Later in your file -->
<my-header> </my-header>
That way, you don't have to copy paste the entire control in every file while also being able to reuse the control.
Related
I am making a local website where I have a number of pages with a lot of common code for header, navigation bar and footer.
I was wondering if there was a way I could use to store the header, footer and other such codes as independent html files, and then simply link them in the code for the new page.
You can use server-side includes for using an HTML file into another one. For that, you'll have to make a few changes in your server configuration as well. I'll show you an example of Apache.
Change configuration as mentioned in https://www.linuxtopia.org/HowToGuides/apache_ssi.html
Include the below code in your html file and replace "included.html" with your section html filename
<!--#include file="included.html" -->
Check more on : https://en.wikipedia.org/wiki/Server_Side_Includes
I want to add html code (as a client) using dotnetnuke.
For that I also require css which is too big.
Is there a way that I add html code and refer to external custom css file which is stored in assets folder?
If not, then how should i (the client user of dnn and NOT developer/designer) add html code along with external file css?
Dotnetnuke has a HTML module component, for this type of thing.
However, depending on what content filters are applied to this module settings, it may strip out CSS / style tags / comments etc.
In an ideal world and CSS / Styling should be added to the DNN Skin.
If you are adding a small 3rd party component, which is isolated / separated from the skin - One thing that I do is add items such as Script or External Style tags to the "Header" / "Footer" area of that HTML module:
If you add anything into this section, it won't be stripped out from the system.
This also can be used for negative purposes - Sites which have been compromised often will have malicious scripts added to these sections.
There are 3 ways an external CSS file could be added without adding it directly to the Theme/Skin.
Page Specific -
Add the tag referencing the css file uploaded to the site in the Page Header Tags: In DNN v9+, this is
located in Page Settings -> Advanced -> S.E.O. -> Page Header Tags
textarea.
Site wide - Add the tag referencing the css file uploaded to the site in the HTML Page Header Tags: Settings -> Site Settings -> Site Behavior -> Default Pages -> HTML Page Header Tags
Site wide (CSS import) - Import the CSS file in the site's Custom CSS: Settings -> Custom CSS.
Note that you will need to include the portal/site ID in your link to the CSS file.
(for example: '/Portals/0/Assets/my-styles.css', where '0' is the ID of the portal/site.
While you could easily add it to the module settings as suggested by Andrew, doing it as described this way would add the element to the page headers or import through a CSS file as opposed to putting the element in the middle of the HTML content.
I have a basic index.html file in a folder, as well as many, many other files. I want them all to use the same CSS file, without having to manually add to every file. I was wondering if you renamed the file index.css or something like that it would automatically load into every HTML file in the folder? Out of curiosity, is there also a Javascript method for this too?
Bad news my friend No. There is no magical tool that will import the CSS into all of your files. You have to do it yourself. Also it's really easy
Get the CSS file
Import the CSS File
See it's that easy. Was it so hard to do it?
You can't do that with simple HTML.
Do a PHP template instead, basically with:
head
header
nav menu
a content/container div/section
footer
Then, include your HTML/PHP page in your content.
For instance, use $_GET or $_POST to know which page to include.
I have multiple html pages with the same navbar. I recently put the navbar in it's own navbar.html file and use ajax via jquery.get() to dynamically load the navbar onto my pages, as opposed to repeating the code across all my pages.
There is currently no stylesheet on the navbar.html, as the style gets applied when the navbar gets loaded back onto the calling page.
Should I be including the .css in the navbar.html, also? They would both be referencing the same 2 stylesheets. I assume that's possible, but haven't yet tested - it will definitely make it easier to make changes to this file in the future. What's the best practice here? I will not be using any server side code.
Please also let me know if there is a more conventional way to do this; I haven't had any luck searching. (I come from a .net web forms background, so would just use a master page there.)
Any relevant links would also be appreciated.
Check the snippet
First you have to make you pages index.php
Then include your navbar.php to index.php using <?php include'navbar.php';?>
Use below method to active the button on each pages
1- Define your page name <?php $page = 'company';?>
2- Define a active class in css file
3- Call the active class to button
<!-- begin snippet: js hide: false console: true babel: false -->
I am trying to change the size of the #grid-float-breakpoint attribute and I did by creating a custom bootstrap from http://getbootstrap.com/customize/
I now need to know how to import the .zip it gives me. Do I have to import every file individually?
It depens on what you need and how you are including your files... but in general, yes, you need to include all the files yourself.
If you just want to use css feature (grid) you have to include the bootstrap.css. If you need things like modal, popover or tooltip you will also need to include the bootstrap.js file.
The fonts are used from within the css declarations. So you don´t need to include them but they should be laying somewhere as an asset.