Collaborator is giving me static content that I'd like to display as a component of a page in a Django app. I'd like to do this without styling interruptions.
Specifically:
I have a Django template templates/page.html that extends templates/base.html. The base.html includes header/footer/navbar/etc.
In the middle of page.html, I'd like to insert external HTML (with its own CSS) exactly as being imported, so that external CSS styling in templates/base.html doesn't get applied. (But I also don't want the CSS I am importing to affect stuff in base.html either.)
Is there a Django-native, or HTML/CSS-native way to accomplish this?
Related
I've set up my Django project website which is a maze generator, to have a navbar which buttons link to other pages I've made.
For example, the style page's directory is just /style, so it brings up the page with which reference is styles, then if I click the homepage button on the navbar it goes to /home all good.
But when I go to the individual maze pages which references is just a number(for example 3), if I click the navbar button to go to home instead of going to http://127.0.0.1:8000/home it tries going to http://127.0.0.1:8000/3/home which doesn't exist.
Is there a way to change how Django processes the links to remove the directory before it.
navbar html code
urls page in django
Assuming your urls.py is set up correctly, you can then use the {% url %} template tag like so:
...
And Django will automatically replace that with the actual URL called urlname. For this to work, your urls.py should have paths defined like so:
path("some/url/here", views.my_view_function, name="urlname")
The name attribute being the important part here.
By writing href="3" you are simply telling the browser to look for https://example.com/whatever/the/current/url/is/3, in other words, it's relative to the current position.
To make it absolute, you have to either start with / (which will make URLs relative to the current domain, for example href="3" will lead to https://example.com/3) or write it in full, including the https://example.com/ part, which will lead exactly where pointed to.
Django automatically takes care of this when you use the {% url %} tag.
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.
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 wish to reduce the page width for only a single page on my website without altering the theme that I am using (zerif-lite). I wish to do so using CSS i.e by adding CSS to styles.css. I am facing problems because I wish to do it only for one page without disturbing anything else.
Also there is an option of selecting the page template in which I have chosen Full Width Template. Where are these templates defined and how can I edit them?
wordpress-templates
You can use something like .page-id-11 #yourdiv or class in styles.css in the template directory , you should also have themplate files in wp-content/themes/yourtheme and find something like single-fullwith.php or similar...
Is there a way to use a layout page for Github pages site? For example, if I have a site with index.html, about.html, and contact.html, there is going to be some content that doesn't change across each of these pages (for example, navigation or Google analytics). In a Rails site, for example, the content that remains the same can be kept in layouts/application.html.erb so that you don't have to repeat it in every page. Is there a way to do this with a static site?
Yes, Jekyll has layouts. Put your layouts in a _layouts directory at the top of your static site. Use the {{ content }} tag in your layout where the page content goes. Then, in your YAML front matter, put a layout: default (or whatever layout you want to use).
https://help.github.com/articles/using-jekyll-with-pages
There are tools (which you might not like) such as Dreamweaver that can automate this. Otherwise what we do is write scripts to convert our PHP files to static html files.
php about.php > about.html