1. Open computer_list.html add class to the h1 tag of the title
<table class='table'>
<thead>
<tr>
<th>COUNT</th>
<th>CATEGORY</th>
<th>ITEM NAME</th>
<th>QUANTITY IN STORE</th>
</tr>
</thead>
{% for instance in queryset %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{instance.category}}</td>
<td>{{instance.item_name}}</td>
<td>{{instance.quantity}}</td>
</tr>
{% endfor %}
</table>2. Open stylesheet.css
Update it with the following codes:
/*Align the title to the center of the page*/
.table{
font-size: 13px;
text-align: center;
width: 95%;
margin: auto;
text-align: center;
}
/*Make alternating colors for the table rows*/
.table tr:nth-child(odd){
background: #B8CAE4
}
.table tr:nth-child(even){
background: #dae5f4
}
th {
background-color: #337ab7;
color: white;
}3. Create a <div> element to style the table container
<div class="display_table">
<table>
</table
</div><!--End of display table-->4. Style the <div> element
.display_table{
border-bottom-right-radius: 20px;
/*border-bottom-left-radius: 20px;*/
padding-left: 5px;
padding-right: 5px;
padding-bottom: 20px;
box-shadow: 12px 12px 20px 6px #2e6da4;
}5. Style the header text
<div class="header"{{header}}</div>.header {
font-family: helvetica;
color: #337ab7;
font-size: 50px;
text-align: center;
width: 100%;
text-shadow: 6px 6px 6px #c9c6c6;
display: block;
font-weight: bolder;
}6. Save and refresh the computer_list page
Followed your instructions, yet the list_items page remains unformatted. Any idea why that might be the case?
You might not import if or may be your variable assigned is not accessible. Can you please reply to this comment with the relevant section of your view? Also, show me all your import statements.
Hi Arbadjie, thanks for your clear tutorials.
I Have a HTML called Publicadores.html, wich not getting the colors, only this…
{% extends “reports/base.html” %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
Publicadores: {{ page_obj.paginator.count }}
Novo Publicador
Nome
Endereço
Celular
{% for publicador in publicador %}
{{publicador.Nome}}
{{publicador.Endereco}}
{{publicador.TelCel}}
{% endfor %}
{% endblock content %}
I Have one file called main.css
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
ul {
margin: 0;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
/*Align the title to the center of the page*/
.table{
font-size: 13px;
text-align: center;
width: 95%;
margin: auto;
}
/*Make alternating colors for the table rows*/
.table tr:nth-child(odd){
background: #B8CAE4
}
.table tr:nth-child(even){
background: #dae5f4
}
th {
background-color: #337ab7;
color: white;
}
Sometimes browsers cache old css. To a complete refresh by holding control key and click refresh. You should click refresh button on the browser while still holding the control key on the keyboard
thanks for the trick, been going crazy
You are dedicated. You will be there soon. Am sure!
Thanks!! this method worked wel!
great
Thanks for this trick
#body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
ul {
margin: 0;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
/*Align the title to the center of the page*/
.table{
font-size: 13px;
text-align: center;
width: 95%;
margin: auto;
}
/*Make alternating colors for the table rows*/
.table tr:nth-child(odd){
background: #B8CAE4
}
.table tr:nth-child(even){
background: #dae5f4
}
th {
background-color: #337ab7;
color: white;
}
#
Sometimes browsers cache old css. To a complete refresh by holding control key and click refresh. You should click refresh button on the browser while still holding the control key on the keyboard