Avatar placement in comments and nodes

Posted by fuzzy_texan on June 17, 2007 at 9:10am

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

Posted by megg on June 17, 2007 at 12:08pm

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

Posted by fuzzy_texan on June 19, 2007 at 7:42am

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

Posted by megg on June 19, 2007 at 5:08pm

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

Posted by fuzzy_texan on June 20, 2007 at 4:08am

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...

Posted by megg on June 20, 2007 at 7:30pm

.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

Posted by fuzzy_texan on July 14, 2007 at 6:38am

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)

Posted by bensley on April 22, 2008 at 1:37pm

Try this...

Posted by TheGecko on June 17, 2007 at 2:37pm

add the following code to your style.css

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

Health treatments

Close...

Posted by fuzzy_texan on June 18, 2007 at 11:02am

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?

Posted by goldengirl on February 3, 2008 at 7:57pm

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:

Posted by bensley on April 22, 2008 at 1:36pm

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.