blogger post
Any suggestions on how to remove the white box in the attached image? I have installed a customer theme and disabled comments on the page. But cant seem to get rid of the box. Many thanks in advance.
You have disabled comments but comments div still there and has padding and background. Paste this code before </head> element to hide comments div in all static pages.
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#comments {display: none}
</style>
</b:if>
Or if you want to hide the div in a specific page use the next and change page URL to your page URL.
<b:if cond='data:blog.url == "page URL"'>
<style>
#comments {display: none}
</style>
</b:if>
Related
I'm working on a project with Django and a textarea. The textarea by default renders cols="40" and rows="10", which is not great for my page. I'm trying to use Django's widgets to change those attributes to 20 and 5 respectively. This is my code:
class NewContent(forms.Form):
content = forms.CharField(widget=forms.Textarea(attrs={"cols":20, "rows":5}))
Unfortunately, the code does not change the looks of the form at all when the page gets rendered. Meaning, it displays cols 40 and rows 10. But wait, things get really bizarre... when checking on the developer tools, on Google, I can see that the HTML code has changed to what I want! crazy!!
I also tried the following code that I found in a different chat:
attrs={"style": "height:60px; width:500px"}
Which "changes" the size of the box but... for different reasons I'm not in love with this solution.
Does anybody have an idea of what is happening here?
I have a windows 10 and use VEC.
Cheers!
you might have css style which defines width and height of your textarea
e.g.:
<html>
<head>
<style>
textarea {width: 100px; height:30px;}
</style>
</head>
<body>
<form>
<textarea cols="30" rows="5"></textarea><br/>
<textarea cols="40" rows="7"></textarea>
</form>
</body>
</html>
I also had the same issue with the Textarea. If I don't give any attrs value while creating the textarea.
pgContent = forms.CharField(widget=forms.Textarea)
It takes the default value of row=10 cols=40, defined in the django documentation for textarea. I cleared out the textarea row, col defined in css and I tried this
pgContent = forms.CharField(widget=forms.Textarea(attrs={'rows': 40, 'cols': 70})
No change in pg rendering. But the page source shows the new value of row, col.
I tried this and it worked.
attrs={"style": "height:60px; width:500px"}
css value supersedes the html value for row, col. I'm surprised why is it not taking the value defined in styles.css, which I have defined for textarea.
When i open the "/search/label/" pages, it shows "older" (sonraki) tab on the right corner of the page that goes nowhere .
Like: http://www.ahmetvarlik.com/search/label/Maketler%20ve%20Objeler
Here what happens when i click the this button: http://www.ahmetvarlik.com/search/label/Maketler%20ve%20Objeler?updated-max=2000-02-01T23:49:00-08:00&max-results=20&start=20&by-date=false
İ just want to delete this "older" (sonraki) section on my pages. (not from posts).
Can you help me?
Add this code before </body> tag to hide blog pager on label pages
<b:if cond='data:view.isSearch'>
<style>
.blog-pager { display: none; }
</style>
</b:if>
I managed to change the menus and dashboard, but how to change the "logo" (Word Django) on login and admin page?
See image:
django-admin-tools Login
Duplicate this file saving the same structure — https://github.com/django-admin-tools/django-admin-tools/blob/master/admin_tools/theming/templates/admin/base.html
Then after {% render_theming_css %} add:
<style type="text/css">
#header #branding h1 {
background-image: url("../path/to/your/image.png");
}
</style>
Here's the docs on how to overload templates — https://docs.djangoproject.com/en/dev/ref/contrib/admin/#overriding-vs-replacing-an-admin-template
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
There are lots of questions about how to get a Facebook Like button working, but I would like to know: does anyone know of an example of the Facebook Like button, coded in XFBML and Javascript, where clicking on it makes the comments box show up, in Internet Explorer? Specifically, I'm trying to figure out if this behavior is broken on IE. I know that particular behavior works under Firefox and Safari.
I see examples of the iframe version of the Like button that pops the comments box in IE when you click "Like". But that's the iframe version, not the xfbml / javascript version. Also, (weirdly enough) the iframe version of the Like button doesn't display the comments box if you don't have show_faces turned on.
The Levi's site is sort of the gold standard in Like usage. Check out http://us.levi.com/family/index.jsp?categoryId=4305605&cp=3146842.3146844.3146854 -- the Like button with comments works in Firefox and Safari, but not IE.
There are lots of different moving pieces here to track down -- for example, namespaces, app_ids, xhtml doctype, etc, etc. But before I get that far, I'm just wondering if the javascript / FBML version of the Like button with comments ever works under IE? And if does, is there an example somewhere? I have never seen one.
Thanks!
Yes, I have this working in IE on http://www.WasupPalmSprings.com. If you click on any of the stories from the home page, there is a like button at the bottom that shows the comments box in IE.
I have had issues with the comment box not showing in IE on other sites. Here is the checklist I use:
Make sure you have the right xmlns attrs in the HTML tag on your page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http:// www.facebook.com/2008/fbml" xmlns:og="http:// opengraphprotocol.org/schema/">
Make sure you have <div id="fb-root"></div> somewhere on your page.
Make sure you have set up an app for your webpage because you need an app id. If you don't have an app, create one here: http:// www.facebook.com/developers/
Use javascript to load the Facebook connect javascript file. Do not just drop a <script src="..."> tag on the page. If you use jquery or similar, ideally this would go in the onReady handler. Otherwise, put it in <script> tag at bottom of the page.
Be sure to substitute your actual app id from the Facebook app you create where it says 'INSERT YOUR APP ID HERE'
window.fbAsyncInit = function() {
FB.init({appId: 'INSERT YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Add meta tags with open graph information for your page.
<meta property="og:title" content="YOUR PAGE TITLE HERE"/>
<meta property="og:site_name" content="YOUR WEBSITE NAME HERE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="URL OF PAGE HERE"/>
<meta property="og:image" content="URL OF IMAGE YOU WANT TO SHARE"/>
<meta property="og:description" content="YOUR PAGE DESCRIPTION HERE"/>
<meta property="fb:app_id" content="YOUR FB APP ID HERE"/>
Finally add the like button wherever you want it to appear on the page. Be sure to substitute your own page URL.
<fb:like href="INSERT YOUR PAGE URL HERE" layout="button_count" show_faces="false" width="570" font="arial"></fb:like>