By eileen on

Right now, my avatars look real messy and throw the whole node out of whack. (see mess here: http://www.thewordslinger.org/your_tribe ) Can anybody help force the content to wrap around the avatar so it looks decent? I'm using gesspa; below is my current node.tpl.php I'm not a php developer, so I have no clue where to begin.

Thanks for reading my plea for help :)

Eleen

<div class="entry<?php print ($sticky) ? " sticky" : ""; ?>"> 
  <?php if ($page == 0): ?> 
  <h3 class="entrytitle"><a href="<?php print $node_url ?>" rel="bookmark" title="Permanent Link to <?php print $title ?>"><?php print $title ?></a></h3>
  <?php if ($picture): ?>
<div class="picture" align="right">
<?php print $picture ?>
</div>
<?php endif; ?>  
  <?php endif; ?> 
  <div class="entrybody">
   <strong><?php print $submitted ?></strong> 
   <?php print $content ?>
   <?php if ($links): ?> 
   <p class="comments_link"><img src="http://www.thewordslinger.org/wordslinger_callout.png" title="file" alt="*" />&nbsp;Filed Under: <?php print $terms ?><br />
<img src="http://www.thewordslinger.org/wordslinger_callout.png" title="file" alt="*" />&nbsp;<?php print $links ?> &#187;</p> 
   <?php endif; ?>
  </div>
</div>

Comments

eileen’s picture

eileen commented

just for the record - this code in my gespaa styles.css doesn't do the trick:

.node .picture {
float: left;
margin: 4px;
}

styro’s picture

styro commented

It looks like you are trying to float the outer picture div. divs are block level elements and at the moment it looks like your divs are taking up the full width. To have the text flow around the floated div, you'll need to give it a width.

A possible starting point:

.node .picture {
  float: left;
  margin: 4px;
  width: 40px; /* or whatever width works for you */
}

Also you have 2 sets of nested divs both with a class of picture. You could possibly simplify the page by removing one of them.

--
Anton
New to Drupal? | Forum posting tips | Troubleshooting FAQ
Example Knowledge Base built using Drupal

eileen’s picture

eileen commented

"Also you have 2 sets of nested divs both with a class of picture. You could possibly simplify the page by removing one of them."

I do? I only see one "picture". I'm sorry ... I don't know PHP at all ... are you referring to the

tags? Should I remove them?

Thanks so much for helping.

Eileen

styro’s picture

styro commented

but you had something in your HTML output that looked like:

<div class="picture">
  <div class="picture">
    <a href="url/to/user">
      <img src="users/picture/image" />
    </a>
  </div>
</div>

But if you gave the outer div a CSS width like in my post above, that should (barring unforeseen issues) allow the text to flow around that div regardless if there was another div inside it.

There's no PHP involved really, it is just CSS and maybe optionally removing some HTML markup from your template.

--
Anton
New to Drupal? | Forum posting tips | Troubleshooting FAQ
Example Knowledge Base built using Drupal

eileen’s picture

eileen commented

I added your code to my styles.css and put the (above) node.tpl.php back up, and it's not working.

If it helps to figure out what I've done wrong, this is the image section of my css:

/***********************************************************************
* Images                                                               *
***********************************************************************/
.node .picture {
float: left;
margin: 4px;
width: 40px; /* or whatever width works for you */
}

#header img{
	padding: 0;
	margin:0px;
	border:none;
	width:850px;
}
img {
	border: 0;
}
.imgblock img {
	background: #fff;
	border: 1px solid #585a67;
	padding: 6px;
}
.imgblock {
	background: #7A8A99;
	text-align: center;
}
.imgblock img:hover{
	border: 1px solid #354a47;
}
styro’s picture

styro commented

Do you know much CSS? I'm not familiar with the inner workings of the theme you're using, so I don't know what other CSS settings elsewhere will be affecting it. There could be styles from the main Drupal stylesheet overriding it etc etc.

You'll just have to run through the normal CSS troubleshooting / experimenting stuff to track it down. I recommend installing the webdeveloper extension in Firefox - that gives you a lot of tools for analysing and tweaking CSS problems.

--
Anton
New to Drupal? | Forum posting tips | Troubleshooting FAQ
Example Knowledge Base built using Drupal

eileen’s picture

eileen commented

Anton,

Thanks for your patience with my confusion.

So you think it's the css that is creating my two

tags in the html? (Now that I put it back, it's doing it again.)
I thought it was the node.tpl.php that placed the image in the node, then the css controls the way it looks. Right now I can't even get the picture to appear below the user name and date/time -- isn't that the work of node.tpl.php?

I think, perhaps totally wrongly, that the picture may float just fine if there was text around it, but as it is now, it seems to be stuck under the headline and over the user/time stamp. Do you know how to move it so it's just below the user name? Every time I try I get a parse error.

Eileen

eileen’s picture

eileen commented

So I managed to move the picture, but it's still not wrapping. I'll now go work on the css ... thanks again for all your advice.

My node.tpl.php now looks like this:


<div class="entry<?php print ($sticky) ? " sticky" : ""; ?>"> 
<?php if ($page == 0): ?> 
<h3 class="entrytitle"><a href="<?php print $node_url ?>" rel="bookmark" title="Permanent Link to <?php print $title ?>">
<?php print $title ?></a></h3>
<?php endif; ?> 
<div class="entrybody">
<strong><?php print $submitted ?></strong>
<?php if ($picture): ?>
<?php print $picture ?>
<?php endif; ?>  
<?php print $content ?>
<?php if ($links): ?>
<img src="http://www.thewordslinger.org/wordslinger_callout.png" title="file" alt="*" />&nbsp;<?php print $links ?> »</p> 
<?php endif; ?>
</div>
</div>
styro’s picture

styro commented

So you think it's the css that is creating my two tags in the html?

No, CSS can't do that.

I thought it was the node.tpl.php that placed the image in the node, then the css controls the way it looks.

Yep thats correct.

Right now I can't even get the picture to appear below the user name and date/time -- isn't that the work of node.tpl.php?

Yep that is in node.tpl.php

OK looking at the original version of your theme:
http://cvs.drupal.org/viewcvs/drupal/contributions/themes/gespaa/
It looks like there were no user pictures in there - did you add that later? That changes things a little - I'm no longer assuming that the theme was doing user pictures properly at some previous point.

It looks like you put the $picture section in the wrong place. You have it above the $submitted section, and it should probably go below it. eg:

  <?php if ($page == 0): ?>
  <h3 class="entrytitle"><a href="<?php print $node_url ?>" rel="bookmark" title="Permanent Link to <?php print $title ?>"><?php print $title ?></a></h3>
  <?php endif; ?>
  <div class="entrybody">
  <strong><?php print $submitted ?></strong>
  <?php if ($picture): ?>
  <div class="picture" align="right">
  <?php print $picture ?>
  </div>
  <?php endif; ?> 
  <?php print $content ?>
  <?php if ($links): ?>

Also you had the picture section nested inside the <?php if ($page == 0): ?> ... <? php endif; ?> section which meant that it would only show when $page equaled 0 ie when the node was in a listing and not on its own.

Now that the picture is now inside the same div (ie entrybody) as the nodes text, hopefully it should now be able to float left and have the text flow around its right hand side. If it doesn't, there is probably some thing overriding the CSS elsewhere - you will need to use a more specific selector in your themes stylesheet to overcome that.

As for the nested div - From this link, you can see that the div is already included in $picture:
http://drupaldocs.org/api/4.6/function/theme_user_picture

So you can remove the div from the template - eg:

<?php if ($picture): ?>
  <?php print $picture ?>
<?php endif; ?>

That should start getting you somewhere.... :)

--
Anton
New to Drupal? | Forum posting tips | Troubleshooting FAQ
Example Knowledge Base built using Drupal

oct376’s picture

oct376 commented

Untill i went to the drupal-support IRC channel for an unrelated issue.

If you're using firefox, I was turned onto firebug.
Install it.
It's a real time debugging program that lets you see what .css or php file is being used and it shows you the code to edit.

I needed to fix the code in my common.css file and it worked.

code edited - (yours may be different):
.node .picture img, .comment .picture img {
float: left;
clear: right;
border: 1px solid #000;
margin: 10px;
padding: 0;

Let me know if you have any questions.
--

kcpcrepair.com
Growing community. Oddly enough... not about fixing pc's. Go figure.

green monkey’s picture

green monkey commented

thanks for this