Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Attached are the two screenshots. One titled "actual" is the actual screenshot where user picture can de seen not displaying correctly. You can see the picture starting after the "title" and "submitted by" captions ends, which makes the theme looks displeasing.
I am asking for a fix to that so that the Title and Picture could get aligned. Moreover check the second image "Output.jpg" attached here which is the layout that I want to make for it. There should be some fixed width assigned to the Title so that picture could get adjusted in the left over space
I hope it is easy to do. Please guide me on how to do this. I will be thanksful to you as I have always been.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | capture1.jpg | 57.45 KB | nikmahajan |
| output.jpg | 13 KB | nikmahajan | |
| actual.jpg | 144.02 KB | nikmahajan |
Comments
Comment #1
gausarts commentedI haven't tested it, but you can do it with css. You can put a fixed/percent width to the title, and make it float left, while giving some space for the thumbnail to show up.
But if you need to have username beneath the thumbnail, I guess you have to go to node.tpl, and add a custom call to username there, and wrap the thumbnail and username in a div to tight them together :) It will be easier.
Comment #2
nikmahajan commentedthanks gausarts. I will give it a try and will let you know the outcome. BtW by title do you mean h1.title or there is some other one.
Comment #3
nikmahajan commentedtried various css wrappers but couldn't achieve. Check the screenshot to see what I get after putting width and float properties in content-header and h1.title wrappers.
Would be thanksful if you can provide me with required CSS.
thanks
Nikhil
Comment #4
gausarts commentedPlease bear in mind that in zen, perhaps in some other themes too, h1.title for full-node title is placed in page.tpl (while at the same time changing your h1#site-name to just a div#site-name). It is outside of node.tpl.
So you have to do more work, either to disable that title for full-node (say,
if ($title && arg(0) !== 'node'): print '<h1 class="title">'. $title .'</h1>'; endif;) and place you new full-node title inside node.tpl conditioning that it should be full-node, or you have to make $picture available in page.tpl which is more work to do :)If you see the teaser listings, they already behave as you expected save for the username placement. So putting this as an example you can try the former rather than the latter.
Comment #5
gausarts commentedFeel free to reopen if still a problem.