So basically, I'm new to Django and I have been experimenting with Django in building my website portfolio. I decided to experiment with Django if I could use python, JS, Bootstrap, CSS and HTML at the same time, all went well till I came to an obstacle which has been a hassle to overcome. Initially, in my static folder, I have a folder called CSS that contains a file of CSS as main.css and another folder within the Static folder, called Images which contains some Jpg images.
So after writing my code in my base folder as home.html, I then proceeded to the main.css folder and wrote:
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
main {
font-family: Heebo,sans-serif;
}
.Landing {
min-height: 100vh;
background:url("./images/Laptop.jpg");
background-size: cover;
}
So basically where the initial problem is(Where I labeled #4), when I host my server I was expecting the image to come up in the background of the website, but it didn't. I then proceeded to think it should be a URL or calling problem, so instead of using a URL I tried:
<img src="{% static 'images/Laptop.jpg' %}" >
But this at #4 didn't show up on the background of the page either, and I had doubts that it would show up because that's more of HTML than CSS.
At this moment I'm out of ideas and wanted to see if anyone has any solution which could be helpful.
The image format is different both paces you have mentioned. One ends with .jpg and other .jpeg.
Try specifying the full path for the image
Like /static/images/Laptop.jpg
Related
running wordpress in docker on apache2 - webroot is /var/www/html/
my static site contains ./css/style.css and ./css/bootstrap.min.css and other ./js and ./lib in the webroot via index.html
I put wordpress in /var/www/html/wpress and pointed WordPress Address (URL) & Site Address (URL) to http://localhost/wpress
in wordpress I created a custom form which I want to integrate in my static site
so far everything works like expected.
I tried via iFrame like <iframe src="http://localhost/wpress/form/" scrolling="yes" style="height:800px;width:100%; display: block; border-style:none; margin: auto; text-align: center;" frameBorder="0"></iframe> but the result gave me more problems with double scrollbar etc.
I found https://stackoverflow.com/a/34111610 as the answer with <?php print file_get_contents("http://localhost/wpress/form")?> to work like expected when cp index.html to index.php
Problem: wordpress themes ./wpress/wp-content/themes/foobar/assets/css/bootstrap.css is now used and overwrite my color scheme and other customization defined in my index.php
Question: is there a way like .htaccess entry or else to block or ignore the wordpress css from overwriting my primary css?
Edit: I deleted ./wpress/wp-content/themes/foobar/assets/css/bootstrap.css and it works.
Anyway, a more cleaner way for this? Without modifying wp_enqueue_style or else?!
You can deregister style, pass id here, which can be found on view source of that css
wp_dequeue_style( 'original-enqueue-stylesheet-handle' );
wp_deregister_style( 'original-register-stylesheet-handle' );
I am creating one Angular Kendo Application.
I am planning to create a single page application.
I want to divide all the business login in multiple pages.
Different JavaScript, CSS and HTML files for each page.
I am dynamically loading these html files as per user interaction.
As per the single page architecture we need to include all the JavaScript and CSS file in the main page where we dynamically load all the pages.
So my question is, how can I divide CSS styles for each screen.
Do I need to have different class/id names for each screen?
Can I do something like below?
// Page1.html
<div id="myPage1">
<div class="something">Page</div>
</div>
// Page1.css
#myPage1 .something { color: black; }
// Page2.html
<div id="myPage2">
<div class="something">Page</div>
</div>
// Page2.css
#myPage2 .something { color: blue; }
So Page1.css and Page2.css will be loaded at one time in main layout.
And when I load Page2.html then style Page2.css will be applied.
Which is the correct way?
You should not divide each page's css into a different file, keep it all in one file to reduce latency and add reference to the css file or files in the index.html page or whatever the main page is.
For JavaScript, each Angular Controller will have its own file, at the end you should have something to bundle all these files using either Gulp, Grunt or if you are using Visual Studio you can use Web Essentials or MVC Bundling
let's say this is my server structure:
www
source
main.js
assets
img1
img2
siteLink1
index.html
siteLink2
index.html
inside both htmls, I have <script src='../source/bundle.js'/> so I can have two links with the same JS source .
The problem is that bundle.js contains all of the css, which have somehing like :
.bg{
background: url(img1.jpg)
}
and then, the webpacked JS added <style> that says:
.bg{
background: url(./assets/img1.jpg)
}
which is great, if JS and HTML were at the same place, but since they are not, the style in html points to the non-existing relative assets folder.
So what I really need, is saying to JS - when you put style tags with all of css required with css-loader, make it relative to the place of the JS, and not to the place of HTML.
What can I do?
I'm trying to display a website's content (preview) inside an admin interface. Thet requires the entire CSS stylesheet for the content (website) to be applied to the .preview DIV in the admin interface. The website.css file is not always the same as it depends which website is being previewed.
I' trying to use LESS.JS and Nested Rules but it will not work with Inline styles. I'm on a windows platform.
<style>
.preview {
<- Dynamically loading Website.css file content here ->
}
</style>
Problem is that LESS.JS will not act on inline styles. I'd like to keep the website.css file intact.
I could load the website.css, add the extra class, rename it to .less and write it back to the folder, and link the .less file... but it seems a bit too much for something so simple...
Thanks, ended up using LESS.JS which is pretty well suited for this task. I wrapped the Website.css file in a .class of the container DIV.
Less.JS compiles the CSS and adds the .class in front of all definitions, wich does the trick. – mfr just now edit
#*LESS.JS CSS*#
<style type="text/less" >
.preview
{
#File.ReadAllText(Server.MapPath(DesignHelper.GetTemplateFileName("Website.css")))
}
</style>
Notice the 'less' in <style type="text/less" >
I have come across this website:
http://www.fetchak.com/ie-css3/
It seems to work when I enter the URL in my IE6, then the "cat" in the picture further down has a "shadow" effect around it.
However, I follow instructions but can't get it to work.
I have a php file, which dynamically outputs images of classifieds.
These images has a class attribute attached to them: (something like this below)
$display_table.="<img src='-----' class='shadow'>";
echo $display_table;
The class shadow is in an external file which is included.
Here is the class:
.shadow{
border:none;
box-shadow: -2px 2px 4px #666;
border-radius:10px;
behavior: url(ie-css3.htc);
}
according to the website, this should work. But it doesn't...
Is it because I am applying it to an image?
Or maybe because it is a php file?
Any ideas?
Thanks
you may want to try the latest option at www.css3pie.com .
Basically, this site support several CSS3 setting on IE6-9. I tried your sample code and it works
Try adding position: relative; to your css statement. If it's anything like CSS3 PIE then you'll probably need to add this.
You might also want to check if the .htc file is being called with the correct header. This, again, is an issue that may occur with CSS3 Pie which may (or may not) apply here.
the path is relative to the HTML file
being viewed, not the CSS file it is
called from.
source by similar tool.
so giving behavior: url(ie-css3.htc); in fact you mean that you have the htc file in the same folder with the webpage. If it's not in the same folder, fix the path to be relative to the page, not the css file.