load static css into django

PHOTO

Sun Aug 02 2020 02:24:12 GMT+0000 (UTC)

Saved by @_ferasbaig #django #css #html

// template.html
<link rel="stylesheet" href="{% static '/bulma-css/bulma-divider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static '/bulma-css/bulma-switch.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/bulma-css/bulma.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/css/main.css' %}" type="text/css"> 


// settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'avon/static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

// views.py

def template(request, self):
	return render(request, "template.html")
    
//  urls.py

urlpatterns [] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

setup config to import static files for django

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Bootstrap Starter Template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Make a circle with just CSS

<style>

 .circle:before {
                    content: ' \25CF';
                    font-size: 50px;
                    color: black;
                }
</style>

<span class="circle"></span>

Add a Mask in CSS

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

Text Rotation in CSS

 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don

#css #webdev #text

How to "truncate" long strings with an ellipsis (...) for text that overflows its container

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#html #javascript

Stop YouTube Embedded Video from Playing with Javascript

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

#django,python,django #django

# Git Commands

## git init
initialize git and create a new local repository

## git add .
track all the files in the local repo for changes

## git add filename
track a specific file in the repo for changes

## git commit -m "first commit" -m "the description"
take a snapshot of the files in the repo

## git status
check the status of your code

## git remote add origin https-link
add a new remote repository

## git push origin master
push the local repository to github

## git push -u origin master
push the local repository to github and also set upstream (enables you to use git push only in future)

## git branch
check the current branch and available branches

## git checkout -b new-branch-name
go to another new branch

## git checkout existing-branch
switch to an existing branch

## git diff feature
see the difference between files you want to merge

## git config --global user.name "[name]"
Sets the name you want attached to your commit transactions

## git config --global user.email "[email address]"
Sets the email you want attached to your commit transactions

## git config --global color.ui auto
Enables helpful colorization of command line output

## git push
use this cmd when pushing a new branch to see how it should be done

## git pull
when upstream is set , to pull from github when changes made on the github and want them to reflect on local machine

## git pull origin master
to pull from github when changes made on the github and want them to reflect on local machine

## git branch -d branch-name
delete a branch

## git commit -am "message"
commit and add at the same time

/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;


// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}

Ribbon | CSS-Tricks

<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>

Navbar: Bootstrap 4 Reference

<!--logo and text (title) -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/startupcache_logo.svg" width="90" height="90" class="d-inline-block align-top" alt="">
    Startup Cache
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  	<ul class="navbar-nav">
    	<li class="nav-item active">
        	<a class="nav-link" id="about-link" href="/templates/about.html">About</a>
        </li>
    </ul>
  </div>
</nav>

.dynamic-shadow {

  position: relative;

  width: rem;

  height: 10rem;

  background: linear-gradient(5deg, #d7ff, #00ffb8);
6
  z-index: 1;
7
}
8
.dynamic-shadow::after {

  content: '';
10
  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  top: 0.5rem;

  filter: blur(0.4rem);

  opacity: 0.7;

  z-index: -1;

}

https://madeusblack.github.io/projects/Library-js/index.html

Browse more snippets >>