{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title style="font-weight:bold; font-family:cursive">Font Maker </title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='ank1.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<div class="embed-responsive embed-responsive-4by3">
<body>
<div class="page-header">
<h1>FoNt MaKeR</h1>
</div>
<video autoplay loop muted="background">
<source src="//player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761"type="video/mp4"></source>
</video>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
</div>
</html>
By this, video is playing but not in background of the page. Video is playing in another section but not in background. One more thing, I am not able to play video which is downloaded in my system.
You can use iframe tag in html.
Visit:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
This is not a Django Question, but an HTML.
in case if you are looking to upload a video or image in the Django background. you need to first add that image/ video in the static folder (please read the Django documentation). and then something like the code below can be added in the index.html to add the video in Django.
background-image: url("{%static 'assets/img/team.jpg'%}");
Please note that in Django we cannot simply add any image as we can add in HTML. We have to use a special format.
Related
I am making a bootstrap site for my sister and everytime i want to change css it works or 90% of the time it don't work.
I made a new file "style.css" to overwrite bootstrap i placed it under all the other tags in my and it still doesn't work can someone explain please?
Thanks
EDIT:
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section>
than i have in the bootstrap css file this line:
section{
padding: 6rem 0;
}
I want to change that to 9 rem so in my custom css file:
section{
padding: 9rem 0;
}
i does nothing ): and that is just one example maybe i do something very very stupid but i don't think so. and its not the cache.
head:
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- tab icon -->
<link rel="icon" href="img/logo_1.png">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Thanks
Maybe your webpage is still cached, try to hit ctrl + f5 to check if it is presesting.
Otherwise just use the !important keyword in your css styles. down below you will find an example of how to use an !important statement.
.row {
padding: 15px !important;
margin: 10px auto !important;
}
An important statement overwrites files even if they come after the execution stack of the dom.
Here is some more information of the usage : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types
Edit:
Be aware that the import keyword is hard to work around with when you want to change this later, for your specific case it would be fine. But if it is for bigger clients and projects, watch your important keywords ;).
Using your same imports I don't see Bootstrap's CSS having any paddings on the section tag, the styles you defined are applying correctly, maybe it's a different stylesheet that's causing this?
Also note you are importing Bootstrap CSS twice, and maybe for different versions of it? Try deleting the import you are not using. In fact, try deleting one css import at a time to see when the problem goes away, that'll at least help you find which stylesheet is overriding your styles
section {
padding: 9rem 0;
}
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i> Download Now!
</a>
</div>
</div>
</section>
I'm using Laravel to create a web application. So I created a header.css file and it is in public/assets/css/header.css. What I am trying to do is just style the header, but it isn't working.
In my default.blade.php I have
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
#include('includes.header')
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
My head.blade.php includes the link for the external stylesheet and it is
<meta charset="utf-8">
<meta name="description" content="blah blah.">
<meta name="author" content="Hunter Marshall">
<title>Elite Training Pro</title>
<!-- load bootstrap from a cdn -->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('assets/css/header.css') }}"></link>
My header.blade.php is
<div class="navbar nav-background">
<div class="navbar-inner">
<a id="logo" href="/">Elite Training Pro</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
My header.css is
.nav-background {
background-color:green;
}
Now I've tried HTML::style(), just assets(), HTML::to() but nothing seems to work. I can see the link to the stylesheet in my head when I look at the source code, but there is no background color. I also don't see the file in the inspect source.
Just use / before the folder path directive
<link rel="stylesheet" href="/assets/css/styles.css">
In your code try like this
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('/assets/css/header.css') }}"></link>
This works
href="{{ asset('assets/css/header.css') }}
The question title describes my problem. I'm currently trying to make it work with static files, but I also tried using Bootstrap's CDN and tried using hard coded path to the Bootstrap CSS. Additional infos:
settings.py:
STATIC_PATH = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
base.html:
<!DOCTYPE html>
<html lang="en" ng-app="IA">
<head>
{% load staticfiles %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionic.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}"/>
</head>
<body ng-controller="LFSTD">
<div class="container">
<div class="jumbotron">
<div class="bar bar-header">
<button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></button>
<div class="h1 title">
<b>
{% block header_title_block %}{% endblock %}
</b>
</div>
</div>
<div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="LFSTD">
<ion-content class="has-header">
<div>
{% block body_block %}{% endblock %}
</div>
</ion-content>
</ion-side-menu-content>
<!--Left menu -->
<ion-side-menu side="left">
<ion-content class="has-header">
<div class="list">
<a class="item item-icon-left" href="{% url 'profile' %}">
<i class="icon ion-person"></i>
Profile
</a>
<a class="item item-icon-left" href="{% url 'lfstd' %}">
<i class="icon ion-person-stalker"></i>
LFSTD
<span class="badge badge-assertive">10</span>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/ionic.bundle.min.js' %}"></script>
<script src="{% static 'js/ia.js' %}"></script>
</body>
</html>
Anyone has an idea of why Bootstrap ain't loading? The container and the jumbotron divs simply don't modify the look of the page.
The network monitor gives me 304 on both the bootstrap CSS and JS files:
Edit:
Here is my BASEDIR:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Working hardcoded URL:
/static/css/bootstrap.min.css
How I call it with static files:
{% static 'css/bootstrap.min.css' %}
URL from view source:
href="/static/css/bootstrap.min.css"
Edit #2, lead to solution:
After playing around with the static files and the templates, I realized that it is AngularJS messing up my CSS. When I remove
ng-app="IA"
From my < html > tag, all formatting (except from angularJS of course) works.
I'm adapting the Blueprint CSS framework for my web site project, but I'm noticing that the blueprint isn't following some of its own rules. I've run through the tutorials on their web site and tried Googling a solution, but nothing is working.
I'm trying to set up a page layout like so:
-----------------------------------------------------------------------
| Image (header) 950px |
-----------------------------------------------------------------------
|Navbar | Body (560px) | Ad Bar|
| | |(190px)|
| 200px | | |
| | | |
... ..... ...
| | | |
-----------------------------------------------------------------------
| (footer) 950px |
-----------------------------------------------------------------------
I'd like the Body to be flanked by a Navbar (with a right-border) and Ad Bar (with a left-border) that expand in height to match the height of the Body (scaling depending on how much content is in it), and a footer that is simply tacked on to the bottom. So far, the header and body appear perfectly. However, the Navbar doesn't span the height of the body. Also, the Ad Bar does not appear on the right of the Body, but rather wraps around to the extreme left (left of the Navbar and below the Body). The Footer doesn't seem to line up with the rest of the site either, as I wrote it to center-align text, but it's off-center (slightly to the left).
Here's my HTML5 code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--Import fancy-type plugin. -->
<link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<title>My Web Site Home</title>
</head>
<body>
<div class="container">
<!------------------------------------------------------->
<div id="header" class="span-24" style="background: #F68712">
<h1 id="siteheader"><img src="logo.png" alt="Logo" id="header-image" /></h1>
</div>
<div id="sidebar" class="span-5">
<div class="span-6">
<img src="home.png" alt="Home" /></li>
</div>
<div class="span-6">
<img src="newmember.png" alt="Member Sign Up" />
</div>
<div class="span-6">
<img src="memberlist.png" alt="Member List" />
</div>
</div>
<div id="main" class="span-12 prepend-1 append-1" style="background: #F5F5DC">
<p>Some text.</p>
<p>Some more text.</p>
<p>Even more text!</p>
</div>
<div id="adbar" class="span-5 last">
Ads.
</div>
<div id="footer" class="span-24" style="text-align: center">
<h6 class="alt">Copyright ©2012 Joe Schmo.</h6>
</div>
<!------------------------------------------------------->
</div>
</body>
</html>
I've followed all of the English tutorials on the site, but can't seem to figure out why it doesn't want to cooperate. I'm developing my site with Microsoft Webmatrix, and am previewing my site both in IE9 and Chrome. If anyone could lend a hand I'd really appreciate it.
Thank you!
<hr style="clear:both; width:100%" />
try this just before footer div
For your sidebar you have a class of span-5 yet it contains 3 divs of span-6. If you remove the class attribute for the three menu divs as I assume that you want them to be the full width of the containing div, does this fix your issue?
I've got an application in jQuery Mobile. Every time a page is shown, some JavaScript must be executed to hide/show some elements (depending on the session state).
I've spent lots of time on this and cannot figure out why the JavaScript is not hiding the elements as expected, it sometime does it, sometime not. It seems a bit random. The DOM in fact seems consistent. The element that should be hidden have display: none and those visible have display: block, however it doesn't match what can be seen in the browser.
I managed to reduce the issue down to a very simple case. It's pretty much the basic boilerplate template with my added JavaScript:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 2
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 1
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
test.js
$(document).bind("pagechange", function(event, data) {
console.info('Changed to page: ' + data.toPage.attr('id'));
$('#el1').hide();
$('#el2').show();
});
You can easily test it by putting these three files on a local server. page1.html and page2.html are pretty much the same pages (just for testing), and test.js just hide #el1 and show #el2. This JavaScript is always executed successfully when the page is changed (the console statement always shows up), however #el1 is sometime hidden, sometime not, when it should always be hidden.
And again, what puzzles me the most, is that everything seems correct if I look at the DOM directly (in Chrome console). The CSS is clearly display: none, yet the element is still visible.
Any idea what could be causing this issue?
A couple of things you might try.
Use on instead of bind. Perhaps you are binding to the the document and the document is changing, loosing the bind. Using on should be able to get rid of this.
Use on directly on the page:
$('#page1').on('pagechange', function() {});