Django Admin - Cannot change <h2> color - html

I am learning Django. I am customizing the Django Admin page. I have created a base_site.html file in my templates to overwrite the default admin html. Additionally, I have created a stylesheet that I've tied to it.
Here's my problem: By default, there is a div on the right side of the content with an h2 header that states "Recent Actions." I want to change this texts color, but my CSS won't seem to work on these words...
<div id="content-related">
<div class="module" id="recent-actions-module">
<h2>Recent actions</h2>
<h3>My actions</h3>
<p>None available</p>
</div>
</div>
I have tried each of the following CSS:
#content-related{
color: blue;
}
.module h2{
color: blue;
}
#recent-actions-module h2{
color: blue;
}
#content related h2{
color: blue;
}
Nothing works... Am I missing something?

If there is a CSS that's loaded later than the snippets you posted here, that can easily make the issue to appear (later CSS takes precedence). I recommend to open the browser developer console, and inspect the headline - it should show you which CSS style is being used.
If you need some more help, we'd need your base_site.html.

the following code should suffice for the CSS:
h2{color: blue;}
this applies to all future h2 tags on templates that are linked to your CSS file.
Otherwise, if you want it only for Recent Actions use this:
<div class="module></div?
And in CSS:
.module{color: blue;}
You are probably forgetting to link your CSS page. Use this:
<link rel="stylesheet" href="{% static 'CSS/base.css' %}">
Don't forget to add {% load static %} at the top of your html template.
I don't know why you would want to change your Admin page, because virtually noone except you would ever access it. If you are trying to create a portal for users to login view this documentation: https://docs.djangoproject.com/en/3.1/topics/auth/default/
If you 3 is not the case, you should open up your browser's inspect element and view the webpage. Also to save yourself a buttload of time in creating the new look for your admin checkout the Django admin templates on Github.
Here are all the admin html templates to make your life easier.

Related

My css background-image doesn't show

I have an issue that all beginners in CSS seems to have, my background-image doesn't show.
When I try to put background-color it works, and with image nothing shows-up.
I have put my image in the same folder than my files css and html.
I want to set the image as the background of my <body>.
I use the framework meteor.
Here is the code HTML:
<body>
<div class="Units" id="UnitsSelector">
{{>units}}
</div>
<h1>Test </h1>
</body>
Here is a part of the CSS file:
body {
display: block;
width: 900px;
margin: auto;
color: black;
background-image:url('space.jpg');
}
Also when I use the inspect tool on my browser and I try to open my url I have this error :
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/space.jpg."
The best approach I see here, is similar to these question:
How to serve static content (images, fonts etc.) using iron router
Although you haven't stated that you're using iron router. The answer will be the same.
Instead of doing all this, you can just put the files under your public directory. If you add the file:
app/public/images/space.jpg
You can access it from your templates like:
<img src="/images/space.jpg">
No routes are needed to make that work.
Beware of overlooking the lead slash.
<img src="images/space.jpg">
The above example will work from your top level routes.
Open devtools in Chrome
Click to "console"
You can see error space.jpg not found
See link on error to your image
Search difference between link in error and real place your image (solution 1)
If all good - play with width/heigh/background-position (solution 2)

How to Isolate some part of HTML code style & formatting? [duplicate]

I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>

Stopping imported html content overriding CSS

I have a page on my site where I'm displaying HTML email.
Some of that email seems to come with CSS that overrides my site layouts such that certain things get misplaced...
e.g. I have a toolbar at the top of the page that on some mails covers the various header information from the email.
Is there a way of creating a div where I can put the html email with a layout that effectively says 'Stay in this div and don't bugger about with anything else'?
Worth noting that I have the html content as 'text' rather than referring to an external website. (It's actually a return from an API, but assuming the same restrictions apply)
%iframe{srccode: #mail.html}
Just gives me a blank iframe
Include your mail using an IFrame similar to this:
<iframe src="http://www.w3schools.com"></iframe>
This will keep the styles separate
see http://www.w3schools.com/tags/tag_iframe.asp for options to customize the IFrame
If using html as text (rather than referencing an existing page:
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
You may be able to incorporate the scoped style:
<div>
<style scoped>
h1 { color: FireBrick; }
p { color: SaddleBrown; }
</style>
<h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
<p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>
<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>
worth noting: this feature is still experimental and is not widely supported by 2015 browsers, currently, only FireFox v21.0+ supporting this feature. (more info # w3school.com)
Reference: https://css-tricks.com/saving-the-day-with-scoped-css/
Dave's answer above
<iframe src="http://www.w3schools.com"></iframe>
is good for referencing an external site, or a page that exists as html.
If using html as text (rather than referencing an existing page):
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
And then formatting the iframe to suit does the trick.

how to apply div class to my css written in cutom.css in woocommerce

I want to apply it to div tag of product image for a woocomerce site.
I think its applied using php(from woocomerce plugin) but I am new so have no idea.
///in css
.panel .panel-overlay, .panel .overlay-background{height: 60px; padding:10px;}
.panel .overlay-background{background: #222;}
.panel .panel-overlay{color: white; font-size: 0.7em;}
//want to add this to div
<li><img src="" alt="" />
<div class="panel-overlay">
<h2>Image Title goes here</h2>
<p>information about the image.<br />
</div>
</li>
Can anyone direct me
To change template from a plugin you should at least know basics of
Wordpress template Structure
Wordpress theme editing/development
To edit template of your Woocommerce Shop follow these steps:
Find out the template which you want to edit. (wp-content/plugins/woocommerce/templates)
Your case: Detect whether its a Single Product Page (single-product.php) or Archive Product Page or Shop Page (archive-product.php) as product image is usually on these pages. There are some nested templates included inside these template files. Check if the part you want to edit is not in some nested template. If it is open that nested template file and see where you want to make the modifications.
Once you've found the template where you want to make the changes. Copy the template from wp-content/plugins/woocommerce/templates to wp-content/themes/your-theme/woocommerce. If the template is inside any other folder in woocommmerce plugin create that folder too. You have to keep the directory structure same.
Make the changes in the template which you've copied to your theme inside woocommerce folder.
This template will override the default woocommerce template.
Note: In case you are using any woocommerce enabled theme. The template must be present in your theme folder already. Take a backup of theme before you edit template in that theme.

Any way to display some heavily-styled HTML in isolation from the rest of site's styles?

I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>