Avatar placement in comments and nodes

By fuzzy_texan on 17 Jun 2007 at 09:10 UTC

I have avatars set to appear in comments and nodes. However they appear on the first line, and the text appears below them. How can I get the avatars to appear on the left of the first line - and the text for the comment or node appear to the right of the avatar? groups.drupal.org has it set up this way.

I'm using the aurora theme if that matters. I'm not a coder and hope there is a solution to this that may only require some lines to be modified in my css files.

Comments

i don't use the aurora

megg commented 17 June 2007 at 12:08

i don't use the aurora theme, but if you post the html source and css here, i can probably point you in the right direction.

megg, below is the

fuzzy_texan commented 19 June 2007 at 07:42

megg, below is the style.css. The html source would be fairly long too - let me know if you definitely need that as well to be able to help and I'll post that as well.

style.css

/**
 * Aurora theme for Drupal 5.x
 *
 * Authors: garamond, http://drupal.ru/user/1408
 *
 */
@import "layout.css";

/* some common styles */

html, body, table th, table td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: #393939;
  line-height: 1.7em;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 180%;
  font-weight: bold;
  margin-bottom: .5em;
  padding-bottom: .35em;
  color: #4270ae;
  border-bottom: 1px dotted #BFC4CF;
}

h2 {
  font-size: 160%;
}

h3 {
  font-size: 140%;
  font-weight: bold;
  color: #505050;
}

h4 {
  font-size: 140%;
}

h5 {
  font-size: 130%;
}

h6 {
  font-size: 120%;
}

/* links */

a:link, a:visited {
  color: #0035a3;
  text-decoration: none;
}

a:hover {
  color: #ff7713;
  border-bottom: 1px dotted #ff7713;
}

a:active, a.active {
  color: #778899;
}

/* some more items */

img, a img {
  border: none;
}

hr {
  margin: 0;
  padding: 0;
  border: none;
  height: 1px;
  background: #5294c1;
}

/* lists, menu */

ul, ul.menu, .item-list ul {
  margin: 0;
  padding: 0 0 0 0.5em;
}

ul li, ul.menu li, .item-list ul li {
  margin: 0 0 0 1em;
  padding: 0;
  list-style: circle url(images/menu-leaf.gif);
}

ul li.expanded, ul.menu li.expanded, .item-list ul li.expanded {
  list-style: disc url(images/menu-expanded.gif);
}

ul li.collapsed, ul.menu li.collapsed, .item-list ul li.collapsed {
  list-style: square url(images/menu-collapsed.gif);
}

ul.menu li ul li {
  font-size: 95%;
}

ul.menu li ul li ul li {
  line-height: 1.6em;
}

/***********************
*   layout styling
***********************/

body, #page, #front, #second {
  padding: 0;
  margin: 0 10px;
  background: url(images/bg.gif) #215d81;
}

#container {
  background-color: #2b3956;
  border-left: 3px solid #2f2f2f;
  border-right: 3px solid #2f2f2f;
  border-top: 3px solid #2f2f2f;
}

#main {
  background: url(images/note.jpg) #e7ebec top left repeat-y;
  padding: 20px 20px 20px 50px;
}

#sidebar-left {
  background-color: #2b3956;
  color: #e7ebec;
}

#sidebar-left a {
  color: #e7ebec;
}

#sidebar-right {
  background-color: #2b3956;
  color: #e7ebec;
}

#sidebar-right a {
  color: #e7ebec;
}

.withleft #main {
  border-left: 20px solid #2b3956;
}
.withright #main {
  border-right: 20px solid #2b3956;
}

/* header */

#header {
  height: 126px;
  background: url(images/header.gif) #1d1e1f center left no-repeat;
  padding: 0;
  border-right: 3px solid #2f2f2f;
  margin: 0px;
}

#logo-title {
  position: relative;
  overflow: visible;
  float: left;
  height: 126px;
  padding-left: 30px;
  z-index: 1;
}

#header #site-name, #header #site-slogan {
  position: relative;
  padding: 0;
  margin: 0;
  left: 135px;
  top: 51px;
  padding-left: 10px;
  border: 0;
}

#header #site-name a, #header #site-name a:visited, #header #site-name a:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  color: #ff9b10;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none;
  border: 0;

}
#header #site-name a:hover {
  color: #ff7713;
}

#header #site-slogan {
  text-align: left;
  font-size: 16px;
  padding-top: 10px;
  font-weight: bold;
  color: #a9a9a9;
  letter-spacing: 2px;
}

#header #logo {
  position: absolute;
  padding-top: 23px;
}

#logo a, #logo a:visited, #logo a:hover {
  text-decoration: none;
}

#logo a img {
  border: 0;
}


/* primary links */

#primary{ 
  background-color: #ff7713;
  padding: 0 0 0 255px;
  margin: 0 0 0 0px;
  border-top: 3px solid #2f2f2f;
  border-left: 3px solid #2f2f2f;
  border-right: 3px solid #2f2f2f;
  
}

#primary ul {
  right: 3px;
  font-size: 90%;
}

#primary ul li {
  float: left;
  margin: 0;  
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  
}

#primary ul li a, #primary ul li a:visited {
  display: block;
  margin: 0 4px 0 0px;
  padding: 6px .8em 6px .8em;
  color: #ff9b10;
  font-weight: bold;
  height: 12px;
  border-bottom: none;
  float: left;
  line-height: 12px;
  font-size: 12px;
  background-color: #2f2f2f;
  
}

#primary ul li a:hover {
  color: #465775;
  background-color: #A0BBDB;
}

/* secondary links */

#secondary ul {
  position: absolute;
  margin-right: 3px;
  right: 20px;
  top: 0px;
  text-align: right;
  padding: 5px 5px 5px 5px;
  background-color: #2f2f2f;
  height: 12px;
}

#secondary ul li {
  margin: 0;
  padding-right: 0;
  list-style-type: none;
  list-style-image: none;
  float: left;
  color: #F8FEFF;
  line-height: 1em;
}

#secondary ul li a, #secondary ul li a:visited {
  display: block;
  margin: 0 .5em 0 .5em;
  padding: 0;
  color: #a4a4a4;
  float: left;
  font-size: 90%;
}

#secondary ul li a:hover {
  color: #ff7713;
  text-decoration: none;
  border: 0;
}

/* sidebars, regions */

.sidebar {
  text-align: left;
}

.sidebar .block {
  margin-bottom: 1.5em;
}

.sidebar .block h2 {
  background-color: #2f2f2f;
  font-size: 13px;
  font-weight: bold;
  margin: 10px -8px 8px -8px;
  padding: 4px 2px 4px 6px;
  color: #ff9b10;
}

.sidebar .block h3, .sidebar .block div.title {
  font-size: 12px;
  color: #6C7A8D;
  font-weight: bold;
}

#header-region {
  position: absolute;
  top: 10px;
  left: 122px;
  height: 28px;
  line-height: 28px;
  vertical-align: bottom;
  padding: 0;
  color: #F1F5F9;
}

#header-region * {
  display: inline;
  vertical-align: bottom;
}

#header-region h2, #header-region h3, #header-region div, #header-region ul, #header-region li {
  display: inline;
  padding-right: .5em;
  line-height: 20px;
  font-size: 10px;
}

#header-region h2, #header-region h3 {
  font-weight: bold;
}

#header-region h2 {
  font-size: 13px;
}

#header-region input, #header-region select {
  background-color: #B4D1F1 !important;
  border-color: #8EACCE !important;
  color: #476281 !important;
}


/* footer */

#footer {
  text-align: center;
  vertical-align: middle;
  line-height: 37px;
  height: 37px;
  background: url(images/bg-footer.gif) #1d1e1f repeat-x;
  margin: 0 0 10px 0;
  color: #a9a9a9;
  border: 3px solid #2f2f2f;
}

/***********************
*   styling
***********************/

/* tabs */

ul.primary {
  text-align: right;
  border-bottom: 1px solid #DADCE0;
}

ul.primary li a {
  background: #EBEFF7;
  border-color: #CFD5E3;
}

ul.primary li a.active {
  border-color: #CFD5E3;
  border-bottom: 0;
}

ul.primary li a:hover {
  background-color: #FBFCFE;
  border-color: #BABFC6;
}

ul.secondary {
  padding: 0;
  
}
ul.secondary li {
  margin: 0;
}
ul.secondary li.active a, ul.secondary li a:hover {
  border-bottom: 3px solid #BABFC6;
}

/* tables */

table {
  margin: 0.5em 0 1em 0;
  width: 100%;
}

thead th {
  border-bottom: 2px solid #AAB5C3;
  color: #678;
  font-size: 90%;
  font-weight: bold;
  background: url(images/bg-thead.gif) repeat-x bottom left;
  padding: 4px 5px 0 5px;
}

tr.even, tr.odd {
  border-color: #DADCE0;
}

tr.even {
  background-color: #fbfcfe;
}

tr.odd {
  background-color: #fff;
}

td.active {
  background: #e4ecf5;
}

td {
  padding: 3px;
}

td.menu-disabled {
  background-color: #E5E5E5;
}

/* forms */

form {
  margin-bottom: .5em;
}

input, textarea, select, textfield {
  font: 11px/160% "Verdana", sans-serif;
  color: #555;
  padding: 1px 3px 1px 3px;
}

fieldset {
  border: solid #DADCE0 1px;
  background-color: #F8F9FA;
  margin: 1em 0 1em 0;
}

fieldset.collapsed {
  background-color: transparent;
  padding: 0;
}

.form-item input.error, .form-item textarea.error {
  font: 11px/100% "Verdana", sans-serif;
  border: 1px dashed #E1471D;
  color: #555;
}

#node-form, #node-form .node-form {
  overflow:auto;
}

#search  {
  margin: 5px -8px 5px -8px;
  background: url(images/crystal-search.gif) left bottom no-repeat;
  border-bottom: 1px solid #2f2f2f;
  padding: 3px 3px 0 26px;
  vertical-align: bottom;
  height: 22px;
}

#search .form-item {
  display: inline;
  padding: 0;
  margin: 0;
}

#search input.form-text, #user-login-form input.form-text  {
  height: 18px;
  width: 95px;
  padding: 2px 3px 0 3px;
  border: 1px solid #2f2f2f;
  border-bottom: 0;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  color: #9CA6B4;
  background-color: #FBFCFE;
  vertical-align: bottom;
}

#search input.form-submit, #user-login-form input.form-submit  {
  width: 49px;
  margin: 0;
  height: 22px;
  padding: 0 2px 0 2px;
  border: 1px solid #2f2f2f;
  border-bottom: none;
  vertical-align: bottom;
  background-color: #FBFCFE;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #6C7A8D;
}

#user-login-form {
  text-align:left;
}

#user-login-form .form-item {
  margin: 0 0 .5em 0;
}

#user-login-form .item-list {
  margin-top: .5em;
  font-size: 90%;
}

#user-login-form input.form-text {
  border: 1px solid #2f2f2f;
  text-align: left;
}

#user-login-form input.form-submit {
  border: 1px solid #2f2f2f;
}

#user-login-form label {
  font-size: 90%;
  font-weight: normal;
}

#user-login-form .form-required {
  display: none;
}

#search input.form-submit:hover, #search input.form-submit:focus,
#search input.form-text:hover, #search input.form-text:focus,
#user-login-form input.form-text:hover, #user-login-form input.form-text:focus,
#user-login-form input.form-submit:hover, #user-login-form input.form-submit:focus {
  background-color: #fff;
  color: #485F7E;
  border-color: #B7C7E2;
}

/* add icons to user listing blocks */

#block-user-2 ul li, #block-user-3 ul li {
  list-style-type:none;
  list-style-image: none;
  margin-left: -5px;
  padding-left: 18px;
  background-image: url(images/mini-user-light-blue.png);
  background-repeat: no-repeat;
  background-position: 0 3px;
}

/* progress bar */

.progress .bar {
  background: #fff url(images/progressbar.gif) repeat;
  border: 1px solid #00375a;
}

/* messages */

.messages {
  min-height: 32px;                 /* icon height */
  padding: 1.3em 1em .3em 52px;
  border: 2px solid #DADCE0;
  background: #fbfcfe;
  margin: 10px 0;
}

.messages ul {
  padding: 0 0 0 20px;
  margin: 0;
}

div.status {
  background: url(images/icon-info.png) .5em 50% no-repeat;
}

div.error {
  border: 2px solid #E1471D;
  background: #FCD295 url(images/icon-alert.png) .5em 50% no-repeat;
}

div.error ul li, div.status ul li {
  list-style-type: square;
  list-style-image: none;
}

/* mixed elements */

div.meta, .description, .breadcrumb, .submitted, .taxonomy {
  font-size: 92%;
  color: #494949;
  line-height: 1.6em;
}


pre {
  background: #fbfcfe;
  border: 1px solid #DADCE0;
  padding: 0.75em 1.5em;
}

blockquote {
  border: 1px #DADCE0 solid;
  margin: 0.5em 1em;
  padding: 0.3em;
  font-style: italic;
}

code {
  font-size: 1em;
  font-family: Profont, 'lucida console', 'Courier New', Monaco, monospace;
}

.blockinner {
  padding: 0;
  margin: 0;
}

.preview .node, .preview .comment {
  border: 1px solid #BABFC6;
  padding: 10px;
  margin: 5px 0 10px 0;
  background-color: #FAF4E1;
}

#mission {
  padding: 10px 15px 10px 15px;
  margin: 0 0 10px 0;
  border: 2px solid #96ADC8;
  background-color: #c2e2f2;
}

.new {
  float: right;
  color: red;
  vertical-align: super;
  font-size: 80%;
  font-weight: bold;
}

/* admin panel */

div.admin-panel {
  border: 1px solid #DADCE0;
  background-color: #fbfcfe;
  margin: 0;
  padding: 0;
  padding-bottom: 15px;
  margin-top: 15px;
}

div.admin-panel h3 {
  padding: 5px 5px 5px 30px;
  margin: 0 0 5px 0;
  border-bottom: 2px solid #DADCE0;
  background: #E6EAF2 url(images/crystal-run.gif) no-repeat 2px 2px;
}

/* node links */

div.links {
    text-align: right;
}

ul.links {
  text-align: right;
}

ul.links li.first {
  padding-left:0px;
}

.node div.links {
  padding-top: 1px;
  padding-bottom: 2px;
  border-bottom: dashed #DADCE0 1px;
}

.sticky div.links {
  border-bottom: none;
}

.comment .links {
  font-size: 90%;
}

li.comment_add a, li.comment_comments a {
  background: url(images/mini-comment.png) no-repeat 0 1px;
  padding-left: 15px;
}

li.node_read_more a {
  background: url(images/mini-readmore.png) no-repeat 0 2px;
  padding-left: 15px;
}

li.upload_attachments a {
  background: url(images/mini-attachment.png) no-repeat 0 2px;
  padding-left: 15px;
}

li.comment_delete a {
  background: url(images/mini-trash.png) no-repeat 0 0;
  padding-left: 15px;
}

li.comment_edit a {
  background: url(images/mini-edit.png) no-repeat 0 0;
  padding-left: 15px;
}

li.comment_reply a {
  background: url(images/mini-comment.png) no-repeat 0 0;
  padding-left: 15px;
}

/* node, content styles */

.node {
  margin-bottom:15px;
  padding-bottom:15px;
}

.node h2.title a {
  color: #333;
  font-weight:normal;
  margin-bottom: 0;
}

.node h2.title a:hover {
  text-decoration: underline;
  border-bottom: 0;
  color: #345;
}

.meta, .submitted, .taxonomy {
  color: #666;
}

.meta {
  padding-bottom: 1em;
}

.node .submitted {
  text-align: left;
  float: left;
  width: 99%;
}

.node .with-taxonomy .submitted {
  width: 48%;
}

.node .taxonomy {
  text-align: right;
  float: right;
  width: 48%;
}

.taxonomy .links a {
  text-decoration:none;
  border-bottom: dotted 1px #9cf;
}

.taxonomy .links a:hover {
  border-bottom: solid 1px #9cf;
}

.taxonomy li.first {
  background: url(images/mini-category.png) no-repeat 0 2px;
  padding-left: 15px !important;
}

.sticky {
  border: 1px solid #DADCE0;
  background-color: #F7FAFF;
  padding: 10px 15px 5px 15px;
}

/* book styles */

div.node div.content .book-navigation {
  background: #eee;
  margin:0;
  padding:0;
}

div.node div.content .book-navigation ul.menu {
  border:0;
  border-top:1px solid #2763A5;
  margin:0;
  padding-bottom:10px;
}

div.node div.content .book-navigation .page-links{
  background: #C1D4EA;
  border:1px solid #2763A5;
  border-width:1px 0 1px 0;
  padding:5px;
  margin:0;
}

/* forum styles */

#forum table {
  width: 100%;
}

/* aggregator styles */

.feed-item-meta {
  font-size: 90%;
  color: #666;
  text-align: right;
}

h3.feed-item-title  a {
  color: #333;
  font-weight:normal;
  margin-bottom: 0;
  font-size: 13pt;
}

h3.feed-item-title a:hover {
  text-decoration: underline;
  border-bottom: 0;
  color: #345;
}

/* poll styles */

.poll .bar {
  height: 16px;
  background-color: #D4E2F2;
}

.poll .bar .foreground {
  background: url(images/bg-poll.gif) repeat-x;
  height: 16px;
  clear: none;
  float: left;
}

.poll .vote-form {
  text-align: center;
}

.poll .vote-form .choices {
  padding-left: 5%;
  text-align: left;
  display: block;
}

/* pager */

.pager {
  text-align: center;
  font-size: 90%;
}

.pager a, .pager a:visited  {
  padding: 2px 3px 2px 3px;
  margin-left: 5px;
  border: 1px solid #DADCE0;
  background-color: #FFFFFF;
  color: #5294C1;
}

.pager .pager-current {
  padding: 2px 3px 2px 3px;
  margin-left: 5px;
  border: 1px solid #DADCE0;
  background-color: #F7F8FA;
  color: #555;
}

.pager a:hover {
  border-color: #BABFC6;
  color: #555555;
}

.copy {
	FONT-SIZE: 9px; COLOR: #2b3956;
}
.copy A {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 0px; COLOR: #246aa4; PADDING-TOP: 0px; BACKGROUND-COLOR: #2b3956; TEXT-DECORATION: none
}

just a little bit of html

megg commented 19 June 2007 at 17:08

i'll still need to see the html, i'm afraid, but you don't have to post the whole thing, just the bit with the user image and the comment and a few lines above and below...

html

fuzzy_texan commented 20 June 2007 at 04:08

For the page

<div class="node" id="node-41">
  
  <div class="picture"><a href="/user/chipper" title="View user profile."><img src="http://mysite.servaus.net/files/pictures/picture-7.jpg" alt="Chipper&#039;s picture" title="Chipper&#039;s picture"  /></a></div>  
  
    <div class="meta">
  
          <div class="submitted">Posted June 12th, 2007 by <a href="/user/chipper" title="View user profile.">Chipper</a></div> 
        
        
  </div>

    
  <div class="content">
    <p>Anyone that knows some guy will know what a huge fan of some girl he is.  It's true... from an early age some guy has been star struck by this outstanding member of our civic community.  So some guy this page is for you; it's your tribute to some girl.</p>
<p><b>Some Guy</b></p>

snip...
And now for the comments

<a id="comment-34"></a>
<div class="comment">
<h3 class="title"><a href="/some+guy+page#comment-34" class="active">WTF</a></h3>
<div class="picture"><a href="/user/sha8dow" title="View user profile."><img src="http://mysite.servaus.net/files/pictures/picture-3.jpg" alt="Sha8doW&#039;s picture" title="Sha8doW&#039;s picture"  /></a></div>    <div class="submitted">On June 19th, 2007 <a href="/user/sha8dow" title="View user profile.">Sha8doW</a> says:</div>

    <div class="content"><p>Stupid auto sign in!<br />
it doesnt auto sign in!<br />
just puts my details in the fields but i still gotta hit <span class="caps">LOGIN</span><br />
pffft 1 click... i dont have that much extra time at the moment</p>
<p>i do like the dig chip.... although i think we a dedicating too much space on the page to that Norwegian VVanker!</p>
<p>PS great work on the site people!<br />
sorry i cant get more involved at the moment!<br />
great effort to Chip, Ltmon and Fuzz as always!</p>

half way there...

megg commented 20 June 2007 at 19:30

.comment { clear:left; }
.comment .picture, 
.comment .meta, 
.comment .content { float:left; }
.comment .picture { width:15%; }
.comment .meta, 
.comment .content { width:84%; }

stick this at the bottom of your stylesheet (quick + dirty), or add it to the existing styles (better).

let me explain:

the first style clears the "floating" that's going on inside the .comment div.

the second style is where all the floating is defined, for the picture div, the meta div and the content div.

the next two styles define widths to the divs so that they can float next to each other. if they were all left at 100%, they would expand to the width of their container and therefore not leave any room to float next to each other. now, i don't know how wide the container div is - maybe it's liquid, and doesn't have a fixed width, even. so you'll have to play around with these widths. you can even make them fixed if you like.

you could apply the same css to the first bit of html you posted as well (instead of .comment, put .node), but then it's going to mess up stuff in the rest of your site because it will apply to all divs with classname 'node'. so you'll have to find a way of giving that node another classname. if you can get the html for that node to print out the classname class="node comment" (note the space), the above styles should work for it as well!

Thanks

fuzzy_texan commented 14 July 2007 at 06:38

Thanks Megg. That's a great help. That's got me a lot closer. There's still a bit I want to do to pretty it up, including subject line appear above the text rather than above the image and the text. But thanks - thats a great start.

(No subject)

bensley commented 22 April 2008 at 13:37

Try this...

TheGecko commented 17 June 2007 at 14:37

add the following code to your style.css

.node .picture, .comment .picture {
	  float: left;
	  padding-right: 1em;
}

Close...

fuzzy_texan commented 18 June 2007 at 11:02

Thanks a lot for your help. It's very close, but the user post info is still below the avatar, with the regular text starting to the left. I'm looking for getting the user post info on the right of the picture on the first line, then the text below that (but still starting to the right of the avatar).

Very close... Wish I understood this so I could be of more use.

Did you figure this out?

goldengirl commented 3 February 2008 at 19:57

Hi There

It would be a great help if you have figured this out to paste the code :)

Thanks

I think this is what you're after:

bensley commented 22 April 2008 at 13:36

The two files that need to be edited are style.css and comment.tpl.php (which should be in the themes/aurora folder)

First the code in the comment.tpl.php file should be:

<div class="comment<?php if ($comment->status == COMMENT_NOT_PUBLISHED) print ' comment-unpublished'; ?>">
<?php if ($picture) print $picture; ?>
<?php if ($new != '') { ?><span class="new"><?php print $new; ?></span><?php } ?>
<h3 class="title"><?php print $title; ?></h3>
<div class="submitted"><?php print t('On ') . format_date($comment->timestamp, 'custom', 'F jS, Y'); ?> <?php print theme('username', $comment) . t(' says:'); ?></div>
<div class="content"><?php print $content; ?></div>
<div class="links"><?php print $links; ?></div>
</div>

Its the same as it was before, just re-arranged a little so that the comment title will appear alongside the picture.
Second, forget the css code megg told you to put at the bottom of style.css. Put this instead:

.comment { clear:left; }
.comment .picture { float:left; width: 90px; text-align: center;}
.comment .content { margin-left: 90px;}

probably a good idea to backup those two files before you go messing with them, just in case.

Avatar placement in comments and nodes

Comments

i don't use the aurora

megg, below is the

just a little bit of html

html

half way there...

Thanks

(No subject)

Try this...

Close...

Did you figure this out?

I think this is what you're after:

New forum topics

News items

Our community

Documentation

Drupal code base

Governance of community