I can't change the background color with my css stylesheet.
Here is the HTML (using Django); there are at present three listings in listings.
{% for listing in listings %}
<ul>
<li class="item"><img src="{{ listing.pic}}"> {{ listing }}</li>
<div class="item-description">{{ listing.description }}</div>
</ul>
{% endfor %}
Here is the CSS
body {
padding: 10px;
background-color: green !important;
}
ul {
list-style: none;
background-color: green !important;
}
.item {
background-color: blue !important;
height: 200px;
}
.item-description {
background-color: purple !important;
}
As you can see I have already tried adding !important and giving elements a height. There is also a link for bootstrap which I tried deleting. However, nothing has any effect; the page and all elements remain white.
Related
I have implemented a css only back to top button, but on shorter pages it shows when it is not needed.
.top {
position: sticky;
bottom: 9px;
padding: 9px;
place-self: end;
margin-top: 109vh;
font-weight:700;
border-radius: 9px;
color: var(--a1);
background: var(--c2);
}
.top:hover {
color: var(--c2);
background: var(--a1);
text-decoration: none;
}
You can see it in the bottom left corner here: https://abridge.netlify.app/overview-abridge/ (don't need to see it when the page is this short)
It works fine so long as its a longer page: https://abridge.netlify.app/overview-code-blocks/
I have thought of artificially increasing the size of short pages, but that just seems kinda hacky, also I know I can easily resolve this with javascript, but I am trying to find a solution that does not rely on javascript. I tried playing around with media queries but could not find any that actually query how much content is in a viewport.
If you are familiar with zola, the repo is here: https://github.com/Jieiku/abridge
If you have zola installed you can clone the repository and run zola serve from the directory, to test changes locally.
Here is the file with the back to top: https://github.com/Jieiku/abridge/blob/master/sass/include/_top.scss
EDIT: for the moment I have discovered a creative way of resolving this, because its a SSG and zola has readtime value I did this:
{%- block gotop %}
{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
⋏
{%- endif %}
{%- endif %}
{%- endblock gotop %}
The only thing to resolve now is to somehow get it over on the right side of the page instead of the left side.
This is the solution I used:
.topout {
position: sticky;
bottom: 1px;
padding: 20px;
place-self: end;
margin-top: 110vh;
pointer-events: none;
}
.topleft {
margin-left: calc(100% - 80px);
}
.top {
pointer-events: all;
padding: 9px;
border-radius: 9px;
font-weight:700;
color: #FF9900;
background: #222222;
}
.top:hover {
text-decoration: none;
color: #222222;
background: #FF9900;
}
Then in Zola Template page:
{%- block gotop %}
{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<span class="topout">
<span class="topleft"> </span>⋏
</span>
{%- endif %}
{%- endif %}
{%- endblock gotop %}
You can see it here: https://abridge.netlify.app/overview-code-blocks/
I would have liked to avoid using calc() however this does work without issue in: Firefox, Chrome, Android Chrome
I think the cleanest solution would be to utilize #media screen and (max-height: 110vh)
Here is my suggestion:
#media screen and (max-height: 110vh){
.top{
display:none;
}
}
The idea here is that if the page's viewport is currently within that max-height of 110vh then we want to set .top to no longer display on the page.
I am trying to build a paywall using HTML and CSS in Django, but somehow the CSS that is supposed to fade portions of the text does not render. Here is what I have:
<style>
.adjust-image {
display: block;
width: auto;
max-width: 100%;
max-height: 1000px;
}
.blur-text {
filter: blur(5px);
user-select: none;
pointer-events: none;
}
.fade-out {
user-select: none;
position: relative;
}
.fade-out:after {
content: "";
height: 75%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
#paywall-wrapper {
padding: 35px;
border-radius: 5px;
position: relative;
margin-bottom: 30px;
box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.20);
}
#paywall-wrapper * {
text-align: center;
}
#paywall-wrapper .btn {
left: 50%;
transform: translateX(-50%);
position: relative;
}
</style>
<div class="display-margins">
<div>
<h5>{{solution.questionToProblem}}</h5>
<h6><b>Solution</b></h6>
{% if request.user.is_anonymous or solution.free != True and request.user.is_subscriber != True %}
<p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>
<div id="paywall-wrapper">
<h4>Premium Subscription</h4>
<p>To view this solution, get our subscription for just <strong>$17</strong>.</p>
<a class="btn btn-primary text-light" href = "{% url 'subscribe' %}">Subscribe</a>
</div>
{% else %}
<p class="noselect format-paragraph">{{solution.solutionToProblem|safe}}</p>
{% for s in solution_images %}
<img class = "adjust-image noselect" src="{{ s.photo.url }}">
<br></br>
{% endfor %}
{% endif %}
{% render_comments solution request %}
<br class= "extra_spacing"></br>
</div>
</div>
Ideally, the text for paywall is supposed to fade out like this:
But it doesn't render when I have template variables in my <p> tags:
Surprisingly enough, if I type out content in my <p> tags manually, it works. But when I use <p>{{random content}}</p>, it doesn't work.
What am I doing wrong with my CSS or my HTML when I say <p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>?
Make sure when you want CSS integrated in Django, and you have HTML in your template variable, use:
{{put_your_template_variable|striptags}}
instead of safe.
I'm trying to override the parent settings of a dropdown menu using a child class in CSS. Unfortunately, when I try to do this it gives me an "unknown property name" error on the child class, even though I use the exact same property on the parent class.
The CSS code looks like:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
overflow: hidden;
min-width: 160;
min-heigth: 100;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
left:20%;
}
.test {
min-width: 1080;
min-heigth: 480;
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
And the HTML code (django template format) looks like:
{% for info in infos %}
<div class="dropdown">
dropdown item
<div class="dropdown-content">
{% if info.2 == "img" %}
<!-- display image -->
{% elif info.2 == "gif" %}
<div class="test">Gifs and Videos are disabled for preview.</div>
{% endif %}
</div>
</div>
{% endfor %}
In which info.2 will always contain either the string "gif" or "img". I have not yet implemented the image yet.
However, if I use inspect element I get the following error:
Which does not make any sense to me, as the css within the dropdown-content class does correctly work. What is going wrong here?
Because 1080 can be 1080 potatoes or elephants, You need to specifiy px or whatever unit you prefer
I´m trying to add a kind of animation to some images in my Django app, what I want to do is that when the user moves the mouse around the image it gets bigger.
I tried adding some code in my CSS but the image won't change
Thank you for your help.
My index.html
{%block contenido %}
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 1 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 2 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 3 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
{% endblock %}
The Images SRCs are urls that I take from the internet, I guess it does not really matter whether they are taken from the internet or stored in your proyect.
my CSS
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
I added this new lines to my CSS but the image won't change.
.foto_pelicula > img:hover {
transform: scale(1.1);
}
Maybe I'm not using the proper lines in the CSS as I'm a junior programmer.
Help is much appreciated
This question has no connection to Django. In future try to create working html template for your purposes and then add it to django template.
You setup .foto_pelicula > img:hover to transform image. But > selector finds only direct child. See documentation on selectors.
And in your code direct child is a, but not img. Therefore you don't see result. You can change your css rule to .foto_pelicula > a > img:hover
See demo:
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
.foto_pelicula > a > img:hover {
transform: scale(1.1);
}
<div id="container" class="foto_pelicula">
<img src="https://via.placeholder.com/289" width="289" height="289"/>
</div>
IMPORTANT
In your html code I see several divs with id="container". You can setup only one id with certain name to each page. That's why it called identifier.
So change your ids to classes or give different id names for this divs.
I have a nav tab that looks like this:
I am using ellipses however I don't like how my nav is scattered in second line. I don't want to use nav-justfied instead be able to squeeze my so it fits in screen and user don't have to scroll horizontally.
like below
My code so far
.nav-tabs>li:not(.active)>a {
background-color: white;
border: 1px solid #ddd;
border-bottom: none;
border-top: 3px solid #9d9d9d;
text-overflow: ellipsis;
max-width: 10em;
overflow: hidden;
display: block;
}
.nav-tabs {
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
white-space: nowrap;
}
<ul class="nav nav-tabs">
<div class="btn-toolbar pull-right">
{% block tab_buttons %}
{% endblock %}
</div>
<li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse">Hosts</li>
{% for tab in event.benchmarks.all %}
<li role="presentation" class="{% if 'summary' in request.path and tab == benchmark %}active {% endif %}inverse">{{ tab.name }}</li>
{% endfor %}
</ul>
I'm not 100% sure what you're asking but it sounds like you could benefit from using:
display flex on your nav.
If you're loading the content on the same page (like an admin panel), I'd highly recommend Jquery Tabs.
Use Display:inline-flex; css property on tabs.