Social Question

a0k's avatar

Tumblr code issue for DoinWork theme Utralite: this should be HTML basics but it's giving me some complicated problems with tricky <div> between posts?

Asked by a0k (13points) April 19th, 2010

Hi there! I’m looking for some help in modifying my tumblr code to incorporate Disqus without corrupting the design of the blog theme (Doinwork’s Ultralite). I’ve managed to get Disqus in there even though the theme does not support it but now the comments line lays RIGHT on top of the following post’s header.

I would love to have someone’s help in troubleshooting a bug fix. I have tried everything I can think of and my geek ego is as tiny as a bug now. :(

Thanks for reading this!

My tumblr is @ if you want to check out the issue. let me know and i can cut / paste the code here if that helps.


Observing members: 0 Composing members: 0

12 Answers

ETpro's avatar

The <div class=“post”> above it has a bottom margin of 100 pixels, which is pushing it way down. I think you probably would want to transfer most or all of that bottom margin to the DIV the comments are supposed to go in.

a0k's avatar

hmmm. thanks for your answer. the thing is the comments are in the div they are supposed to go in—per Disqus’s instructions. here is that post bottom div code. can you let me know where I might add additional bottom margin there? happy to try taking it out of the <div class=“post”> just want to know where to put it.

<div class=“post-bottom”>

<img src=“”/>
</div> {/block:IfShowPostDividers}


<div style=“font-size: 10px; text-align: left;”><a class=“dsq-comment-count” href=”{Permalink}#disqus_thread”>Comments</a></div>
<script type=“text/javascript”>var disqus_url = ”{Permalink}”; var disqus_title =”{block:PostTitle}{PostTitle}{/block:PostTitle}”;</script>{block:Permalink}<div id=“disqus_thread”></div>
<script type=“text/javascript”>
* var disqus_identifier;
(function() {
var dsq = document.createElement(‘script’); dsq.type = ‘text/javascript’; dsq.async = true;
dsq.src = ‘’;
(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(dsq);
<noscript>Please enable JavaScript to view the <a href=“”>comments powered by Disqus.</a></noscript>
<a href=“” class=“dsq-brlink”>blog comments powered by <span class=“logo-disqus”>Disqus</span></a>
{/block:Permalink}<script type=“text/javascript”>
(function() {
var links = document.getElementsByTagName(‘a’);
var query = ’?’;
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf(’#disqus_thread’) >= 0) {
query += ‘url’ + i + ’=’ + encodeURIComponent(links[i].href) + ’&’;
document.write(’<script charset=“utf-8” type=“text/javascript” src=“’ + query + ’”></’ + ‘script>’);
<div id=“footer”>
<br />

<br />
<a href=”{PreviousPage}”>« Previous</a>   

<a href=”{NextPage}” font-size=“36px”>Next »</a>

<div id=“credit”>
<a href=“”>Ultralite</a> Powered by <a href=“”
Designed by:<a href=“”

ETpro's avatar

Looks a bit better now that <div class=“post”> has its bottom margin trimmed to 20px. I think I’d make it more like 12px, then do this with the DIV your comment is in.

<div style=“font-size: 10px; text-align: left; margin-bottom: 20px;”>

a0k's avatar

hey. that’s not working for whatever reason. thanks though

ETpro's avatar

@a0k Humm, little wonder. I just saved the page as Web Page Complete to my machine. Here is the markup of the DIV in question.

<div style=”” 10px;=”” text-align:=”” left;=”” margin-bottom:=””

It needs instead to be:
<div style=“font-size:10px; text-align:left; margin-bottom:25px;”>
I am assuming the floating 10px was for a font size. Yes? If not, modify accordingly.

Give that a try. Careful about writing code in desktop word processor that uses curly quotes and custom formatting, because it can turn simple ASCII characters into stuff like ” which doesn’t compute in HTML. :-)

a0k's avatar

@ETpro thanks for your careful checking. i made this change and i think i see a small difference. there is still some overlap and i’m not really pleased with the spacing but it’s certainly an improvement.

ETpro's avatar

Well, that is some improvement, but you are still getting gibberish into your code. Here is the source code now.

<div margin-bottom:25px;”=”” text-align:left;=”” style=””>

You are just lucky that some browsers are guessing what that line of mush was actually meant to be.

a0k's avatar

hey but i think the code you view is not what i’m inputting directly. i can screenshot the customized HTML and it looks PRISTINE. wtf is getting mashed up. i’m so exasperated. :(

a0k's avatar

DISCOVERY!!!!!! ***** the quote marks in my code were diagonal. i think maybe i cut and pasted your clean code which corrupted it when activated. i tried retyping and it looks a lot (albeit not entirely) better. can you do your cool check thing to see what it looks like. thanks so much, dude. :)

ETpro's avatar

Sure. What I see now is:
<div style=“font-size: 10px; text-align: left; margin-bottom: 25px;”>
<a href=“” class=“dsq-comment-count”>0 Comments and 0 Reactions</a></div>

Looks pretty good. How do you want to change the layout.

BTW, the cool check thing is a plugin for Firefox called Firebug. I highly recommend it if you have to sort through CSS and HTML/XHTML issues. Lets you right click any element, select Inspect Element, and see the a spit window below the actual element with the HTML source code in the left pane and the CSS controlling the selected HTML tag in the right pane. Hovering your mouse over any HTML tag in the source code highlights tha actual element in the top page-view window, and highlights padding and margin around it in a different, lighter color. VERY cool.

a0k's avatar

hey again. the spaces between the post and its tags and the link to comment is so smushed looking and gross. seems like ONLY on text posts? I wish I could fix it but again this seems confusing. Can you take a peak? Thanks.

ETpro's avatar

It sure seems Tmublr is messing with the HTML code you input. Being unfamiliar with Tumblr, I am at a loss to say why. Is there a Tumblr forum? If so, a post there miught turn up someone who knows the program’s guts.

Answer this question




to answer.
Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther