I am trying to set up a cookie policy pop-up on site.
I followed an online tutorial to the letter (I thought) but it doesn't work.
The banner shows up as expected, but on clicking accept, the page seems to refresh but no cookie is set and the banner is still there.
I have looked through the tutorial and all seems to be as he typed. Maybe someone could suggest what could be wrong.
The styles were placed in the css file, but I think the issue must be with the php. I have looked for alternative codes but they are so different I am not sure they would work with this method.
I wonder whether it has something to do with the isset commands.
Also, is there a way to ensure that when the cookie is set and is acknowledged that you stay on the same page rather than going to the root directory?
This is on the top of the html code i.e. before doctype
if (isset($_GET['accept-cookies'])) {
setcookie('accept-cookies', 'true', time() + 31557600);
header('Location: ./');
}
?>
This is the section with the banner (I like the way it looks so prefer not to change the style codes)
if (!isset($_COOKIE['accept-cookies'])) {
?>
<div class="cookie-banner">
<div class="cookie-container">
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: medium;">We use cookies to track usage and preferences. By using this website we will assume that you consent to their use as per our <u>Privacy and Cookie Policy</u>.</p>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 600; font-size: medium;">Okay</p>
</div>
</div>
<?php
}
?>
Just in case you need it, here are the css parts
background-color: #abd1ff;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
border: 2px solid #4a6894;
border-bottom: 2px solid #4a6894;
}
.cookie-banner {
background: #6c9bd3;
position: fixed;
top: 0;
left: 0;
width: 98%;
}
.cookie-banner .cookie-container {
margin: 0 auto;
width: 70%;
padding-bottom: 10px;
color: #1f2b3a;
padding: 15px;
}
I was going to add a slide down function, but when I added for it not to display initially in the css code, the banner disappeared even when the js file was referred to with the slide down code.
Any help on what I could add to make it work, what is missing, would be great.
THANK YOU!!!!
No error messages have been seen. Banner just won't disappear and cookie is not set.
Related
When I run the app in localhost, it works fine. but after deployed to pythonanywhere, Login with Facebook button doesn't work.
when I refresh Login page, in console, it shows =>
Failed to load resource: https://username.pythonanywhere.com/static/facebook/js/fbconnect.js the server responded with a status of 404 (Not Found)
Refused to execute https://username.pythonanywhere.com/static/facebook/js/fbconnect.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
in template:
<button class="effect" style="width: 100%; background-color: rgb(58, 110, 255); height: 36px; border: none; color: white; border-radius: 3px; display: flex; justify-content: center;align-items: center;"><img style="height: 24px; width: 24px; background-color: white; padding: 1px; border-radius: 50%;" src="{% static 'images/fblogo.png' %}" alt=""><span style="margin-top: 2px; display: block; margin-left: 8px; font-size: 16px;"> Login with Facebook</span></button> <br>
Another problem is: CSS doesn't load in admin page
how to fix this?
Edit: now if i click "Login with facebook" button, it shows, ReferenceError: Can't find variable: allauth
what to do now?😖
I currently have a variable that contains a string HTML which resembles this
myvar = "<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style="font-size: xx-large; font-weight: 600; color: #5e9ca0;"> ..."
I am passing this string to my template like so
return render(request, "rendered.html", {
'result': myvar,
})
In the template I am simply doing
{{myvar}}
This shows me on the screen the exact html as text but not rendered. When I investigated the source this is what i got
<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style ...
while I was suppose to get
<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style="font-size: xx-large; font-weight: 600; color: #5e9ca0;">
Any solution on how I can fix this issue ?
What is happening ?
Django by default is escaping your html thinking that it might be harmful hence escaping it by default.
Since you need to NOT escape it. Wrap your variable within autoescape filter
{% autoescape off %}
{{ myvar}}
{% endautoescape %}
I've run across a problem when creating a custom template for MailChimp - when editing links inside the emails content MailChimp overrides their styles. Here's a part of the template,
<a mc:edit="cta_link" target="_blank" href="*|CUSTOM_URL|*" style="font-family: 'Helvetica', 'Arial', sans-serif !important; font-size: 11px; color: #000000 !important; border-bottom: 1px solid #000000 !important; text-transform: uppercase !important; padding-bottom: 1px;">Read more</a>
As you can see I've also added !important rules to some of the styles to try and avoid any overrides but with no effect. I've switched between having a static example href src and the MailChimp custom url variable, doesn't seem to make any difference.
After updating the link the font changes to a default Times typeface.
Anything I'm missing?
4 years later and it's still happening.
The styles you apply to a link element are overridden by the global link styles.
My solution: insert a span tag inside the link.
<a mc:edit="cta_link" target="_blank" href="*|CUSTOM_URL|*"><span style="font-family: 'Helvetica', 'Arial', sans-serif !important; font-size: 11px; color: #000000 !important; border-bottom: 1px solid #000000 !important; text-transform: uppercase !important; padding-bottom: 1px;">Read more</a>
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
I am going through some minor issues here. I am using a standard container height and css code for all pages. For most pages there is enough content to fill it and for some the content may only take 10-20% of the page. So is it a good idea for those pages to use a different min-height? Below is the code:
#wrapper {
background-color: #999999;
margin:0 auto;
min-height: 600px;
width:770px;
font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", Arial, Helvetica,
sans-serif;
font-size:15px;
color: #222222;
margin-left:60px;
margin-bottom:60px;
}
It might be better to declare the lesser min-height in a separate class.
Then, you could do <div id="wrapper" class="smallerContent">.
#wrapper.smallerContent {
min-height: 300px
}