By Andylkl on

I've seen before a Drupal sites that have avatars on the right hand side, and wrapped together with the text nicely. I can't get to do the same thing for my site though.

I made some adjustments to node.tpl.php and only suceeded in aligning the avatar to the right. I thought I had suceeded when I enclosed it in a table, but it turns out that I had also screwed up the layout slightly. I'm currently using the FriendsElectric theme and I haven't the slightest of a clue how to edit which section of the CSS template.

Here's my site. Any assistance really is appreciated. Thanks.

⋅ Categories: Drupal 4.7.x

Comments

Andylkl’s picture

Andylkl commented

Arngh, sorry about the typos and grammatical errors there. Wasn't paying attention when editing my post earlier.

Zaur Amikishiyev’s picture

Zaur Amikishiyev commented

I think this issue can be easily corrected with css.

For example you have following snippet for avatar:

<img src="image.jpg" class="avatar" />

Then add following css rules to your stylesheet:

img.avatar {
  float:left;
  display:inline;
  padding:10px;
}
Andylkl’s picture

Andylkl commented

Thanks for the tip, but how do I implement it in this?

<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">
  <?php if ($page == 0): ?>
    <h2 class="title"><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
  <?php endif; ?>
<div class="content">
    <?php print $content ?>
  </div>
<div class="picture">
  <?php print $picture ?>
 </div>
  <?php if ($picture): ?>    
<span class="clear"></span>
  <?php endif; ?>
  <?php if ($submitted): ?>
    <div class="info"><?php print theme('username', $node) . ' – ' . str_replace('-', ' – ', format_date($node->created)) ?></div>
  <?php endif; ?>
  <?php if ($terms): ?>
    <div class="terms"><?php print $terms ?></div>
  <?php endif; ?>
  <?php if ($links): ?>
    <div class="links"><?php print $links ?></div>
  <?php endif; ?>
</div>
vm’s picture

vm commented

open the css file of your theme and search the file for picture and adjust the css as necessary.

drupal refers to the "avatar" as picture.

Andylkl’s picture

Andylkl commented

That's the thing, the FriendsElectric CSS theme doesn't seem to have a section for pictures/avatars. You can take a look at the CSS file here which I recently edited. I still can't get it to work right.

vm’s picture

vm commented

you may have to steal it out of misc/drupal.css and add it in to friendselectric's style.css to override.

Andylkl’s picture

Andylkl commented

I found a way to partly fix this.

I put a div container for the appropriate stuff in node.tpl.php and I added this to the CSS file:

.container {
   position: relative;
   height: 200px;
   overflow: auto
   }

.left-element {
   position: absolute;
   left: 0;
   width: 95%;
   }

.right-element {
   position: absolute;
   right: 0;
   width: 5%;
   text-align: left;
   }

But the problem now is how do I make the container height flexible? I don't want it set at 200px or any figure because any fixed figure will overflow and overlap.