I've been trying to link up my css with the HTML code, but CSS is not working in DJANGO!
I'm sharing all the screenshots of my code!
Hope anyone can help me out with this.
Thanks in advance!
h2{
color: blue;
}
.heading {
color: blue;
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MY PROFILE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>
<body>
WELCOME HERE!
<h2 class="heading">This is CSS</h2>
<script src="" async defer></script>
</body>
</html>
Have you set the static file base directory in settings.py?
import os
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
Related
I'm trying to save a text imput from an HTML page, and then display it on a redirect. It seems that the .save() method isn't working. I'm quite new to Django and HTML in general. I've followed the official Django tutorial and trying to apply the concepts from that into this app. Basically, it is supposed to take a user input from an HTML page and then save it to a list of names. Then, I want to redirect to another page which displays a list of these names. Anyone have any ideas? Here's my code:
In views.py:
from django.shortcuts import render, HttpResponseRedirect, redirect
from .models import Contact
def addListing(request):
if request.method == 'POST':
new_contact = Contact(
full_name=request.POST['fullname'],
)
new_contact.save()
return redirect('listings')
return render(request, 'farmsearch/add_listing.html')
def listings(request):
farms = Contact.objects.all()
return render(request, 'farmsearch/listings.html', {'farms': farms})
In models.py:
from django.db import models
class Contact(models.Model):
full_name = models.CharField(max_length=250)
def __str__(self):
return self.full_name
In add_listing.html:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<form action="{% url 'farmsearch:listings' %}" method="post">
{% csrf_token %}
<label for="farm_name">Farm name: </label>
<input type="text" class="type" name="fullname" placeholder="Full Name">
<input type="submit" value="OK">
</form>
</body>
</html>
In listings.html:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
{% for farm in farms %}
<li>
<p>{{ farm.new_farm }}</p>
</li>
{% endfor %}
</body>
</html>
Thanks for your help!
First off all total n00b here.
Is it possible to skip clicking on HTML button with simple URL string?
example:
Im visiting page www.somesite.com/page1
on page1 there is a html button (type=submit, value=ADD)
when I press that button it sending me to www.somesite.com/page2
question:
Is there a way to put pressing button command in URL that gonna bring me directly to page 2 (something like www.somesite.com/page1&press button value=ADD) ???
Thanks
Try with jquery
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<form>
<input id="data" value="132">
<button class="goToPage">Save</button>
</form>
<script>
$(document).ready(function () {
$('.goToPage').click(function () {
var data = $('#data').val();
window.location = "yourUrl?data=" + data;
});
});
</script>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>
I saw there is a method to load the HTML sample in VS Code.
But I don't know what is the shortcut of it.
! + Enter would do the work for you.
type ! at the beginning and hit enter it will generate the basic HTML Structure i do it all the time
press CTRL+! and then press Tab or press ctrl + space
Another approach is to install extension
https://github.com/sidthesloth92/vsc_html5_boilerplate
it will generate this code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>
If you are using windows
simply check the language if it is HTML or not and afterward the same step shift+!..
I am creating a new site using the Initializr template. It looks great on modern web browsers. I though it was optimized for compatability but when I open it in Internet Explorer 8 (a browser I must unfortunarly support) it looks like this:
As you can see the tab navigation is not rendering properly.
I am using the default:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr.custom.82220.js"></script>
</head>
The only difference above is that I tried updating modernizr to see if it would fix the problem but the result is the same. How can I get HTML5 boilerplate to render correctly in IE 8?
The problem was resolved adding this to the css page:
#media only screen and (min-width: 480px) {
.lt-ie9 nav a { margin: 0 0.7%; }
}
I am stumped on why this sed command would not be working:
sed 's/<script id="live-reload"[\s\S]*?<\/script>/test/g' www_public/index.html > www_public/index.html.temp
It should replace the live-reload script tag of the following HTML with 'test':
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AssembleJS</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<script id="require-lib" data-main="src/config" src="src/libs/require.js"></script>
<script id="live-reload">document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script id="test"> bla bla bla </script>
</body>
</html>
Here's the regex working:
http://regexr.com?339ga
You need to use -r for ? as it's extended regex:
$ sed -r 's/<script id="live-reload".*?<\/script>/test/g' file
or escape it:
$ sed 's/<script id="live-reload".*\?<\/script>/test/g' file
Output:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AssembleJS</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<script id="require-lib" data-main="src/config" src="src/libs/require.js"></script>
test
<script id="test"> bla bla bla </script>
</body>
</html>
Notes:
Also changed [\s\S]*? to .*? as they're complimentary groups.
The g flag is only necessary for multiple matches on a single line.
If you're running Mac the -r flag is -E so check with sed
--help for the extended regex option.
Obligatory don't parse [x]html with regex warning, using a parser.