Widget - text under avatar

[romaszek]

Hey.
Sorry bad English.
As to add the text under avatar ?

Thanks.

[Lynne]

You need to move the userinfo div inside the widget_post_bit div. Then add to the additional.css some css to float it right and add a margin-right and a height. Then, get rid of the margin-right for the widget_post_bit.

[romaszek]

Very to thank :)

[romaszek]

You need to move the userinfo div inside the widget_post_bit div. Then add to the additional.css some css to float it right and add a margin-right and a height. Then, get rid of the margin-right for the widget_post_bit.

I tried. Sorry. I cannot make.
Can I ask for the guide?

Thanks.

[Lynne]

Post the template code you tried so I can see what went wrong and also post the css you added to the additional.css template for this. Please put code tags around it.

[romaszek]

Post the template code you tried so I can see what went wrong and also post the css you added to the additional.css template for this. Please put code tags around it.
I added div but this surely not is good. I do not know php and I do intuitionally.

vbcms_widget_recentarticle_page
<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3><img alt="" src="{vb:stylevar imgdir_cms}/widget-forum.png" /> {vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="articles" key="contentid" value="article">
<div class="cms_widget_post_bit widget_post_bit">
<div class="cms_widget_post_userinfo widget_post_userinfo">



</div>




<div class="cms_widget_post_useravatar widget_post_useravatar">
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<vb:if condition="$article['avatar']">
<a class="comments_member_avatar_link" href="{vb:link member, {vb:raw article}}"><img alt="{vb:raw article.username}" src="{vb:raw vboptions.bburl}/{vb:raw article.avatar.0}" {vb:raw article.avatar.1} /></a>

<vb:else />
<img alt="{vb:raw article.username}" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
<vb:else />
<img alt="" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
</div>
</div>
<div class="cms_widget_post_comment widget_post_comment">
<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
<h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
</vb:if>
<div class="cms_widget_post_content widget_post_content">{vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a></div>
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<a href="{vb:link member, {vb:raw article}}" class="username">{vb:raw article.username}</a>
</vb:if>
<a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"><vb:if condition="$article['showpublishdate'] OR $article['settingsforboth'] == 2">{vb:date {vb:raw article.publishdate}, {vb:raw vboptions.dateformat}}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:date {vb:raw article.publishdate} {vb:raw vboptions.timeformat}}</span></vb:if></vb:if></a>
<vb:comment>
<div class="searchcat">
<h4 class="searchlastpostlabel understate">{vb:rawphrase content} :</h4>
<span class="understate">{vb:rawphrase article}</span>
</div>
</vb:comment>

<vb:if condition="$article['categories']">
<div class="searchstats">
<h4 class="searchlastpostlabel">{vb:rawphrase categories}: </h4>
<vb:each from="article['categories']" key="categoryid" value="category">
<a href="{vb:raw category.category_url}">{vb:raw category.category}</a>&nbsp;
</vb:each>
</div>
</vb:if>

<vb:if condition="$article['tags']">
<div class="searchstats">
<dt>{vb:rawphrase tags}: </dt>
<vb:each from="article['tags']" key="tagid" value="tagtext">
<dd><a href="{vb:raw vboptions.bburl}/tags.php?tagid={vb:raw tagid}">{vb:raw tagtext}</a></dd>
</vb:each>
</div>
</vb:if>
</div>

</div>
</vb:each>
</div>
</div>

[Lynne]

You forgot the surrounding <divs> for the widget_post_userinfo. That whole div needs to be moved inside the other div. You should have something like:


<div class="cms_widget_post_comment widget_post_comment">
<div class="cms_widget_post_userinfo widget_post_userinfo">
all the stuff inside this div also......
</div>
<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
etc.

Then in additional.css:

.widget_post_userinfo {
float: left; height: 40px; margin-right: 40px;
}
.widget_post_comment {
margin-left: 0;}

[romaszek]

Very to thank for the help.
Now is so.


vbcms_widget_recentarticle_page
<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3><img alt="" src="{vb:stylevar imgdir_cms}/widget-forum.png" /> {vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="articles" key="contentid" value="article">
<div class="cms_widget_post_bit widget_post_bit">

<div class="cms_widget_post_comment widget_post_comment">



<div class="cms_widget_post_userinfo widget_post_userinfo">
<div class="cms_widget_post_useravatar widget_post_useravatar">
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<vb:if condition="$article['avatar']">
<a class="comments_member_avatar_link" href="{vb:link member, {vb:raw article}}"><img alt="{vb:raw article.username}" src="{vb:raw vboptions.bburl}/{vb:raw article.avatar.0}" {vb:raw article.avatar.1} /></a>
<vb:else />
<img alt="{vb:raw article.username}" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
<vb:else />
<img alt="" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
</div>
</div>







<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
<h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
</vb:if>
<div class="cms_widget_post_content widget_post_content">{vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a></div>
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<a href="{vb:link member, {vb:raw article}}" class="username">{vb:raw article.username}</a>
</vb:if>
<a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"><vb:if condition="$article['showpublishdate'] OR $article['settingsforboth'] == 2">{vb:date {vb:raw article.publishdate}, {vb:raw vboptions.dateformat}}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:date {vb:raw article.publishdate} {vb:raw vboptions.timeformat}}</span></vb:if></vb:if></a>
<vb:comment>
<div class="searchcat">
<h4 class="searchlastpostlabel understate">{vb:rawphrase content} :</h4>
<span class="understate">{vb:rawphrase article}</span>
</div>
</vb:comment>

<vb:if condition="$article['categories']">
<div class="searchstats">
<h4 class="searchlastpostlabel">{vb:rawphrase categories}: </h4>
<vb:each from="article['categories']" key="categoryid" value="category">
<a href="{vb:raw category.category_url}">{vb:raw category.category}</a>&nbsp;
</vb:each>
</div>
</vb:if>

<vb:if condition="$article['tags']">
<div class="searchstats">
<dt>{vb:rawphrase tags}: </dt>
<vb:each from="article['tags']" key="tagid" value="tagtext">
<dd><a href="{vb:raw vboptions.bburl}/tags.php?tagid={vb:raw tagid}">{vb:raw tagtext}</a></dd>
</vb:each>
</div>
</vb:if>
</div>

</div>
</vb:each>
</div>
</div>
</div>

Then, get rid of the margin-right for the widget_post_bit.
As to get rid of the margin?

Thanks.

[romaszek]

Hello.
On left hand is OK.
The right has a margin.
What one can with this make?

Thanks.

[Lynne]

Did you try the css I posted?

[romaszek]

Yes. In additional.css I added the code:


.widget_post_userinfo {
float: left;
height: 40px;
margin-right: 40px;
}
.widget_post_comment {
margin-left: 0;}

[Lynne]

Can we get a link to see this.

[romaszek]

OK.
The test-forum.
http://www.testowe.utwory.webd.pl/content.php

Thanks.

[Lynne]

Do this in the template instead:

<div class="cms_widget_post_userinfo widget_post_userinfo"> all the stuff inside this div also...... </div>

<div class="cms_widget_post_comment widget_post_comment"> <vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2"> etc.

Then also set:
.widget_post_comment { overflow: inherit;}

[romaszek]

Sorry, bad English.
A little I don′t get the idea.
it to be so?


vbcms_widget_recentarticle_page:
<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3><img alt="" src="{vb:stylevar imgdir_cms}/widget-forum.png" /> {vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="articles" key="contentid" value="article">
<div class="cms_widget_post_bit widget_post_bit">
<div class="cms_widget_post_userinfo widget_post_userinfo">
<div class="cms_widget_post_useravatar widget_post_useravatar">
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<vb:if condition="$article['avatar']">
<a class="comments_member_avatar_link" href="{vb:link member, {vb:raw article}}"><img alt="{vb:raw article.username}" src="{vb:raw vboptions.bburl}/{vb:raw article.avatar.0}" {vb:raw article.avatar.1} /></a>
<vb:else />
<img alt="{vb:raw article.username}" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
<vb:else />
<img alt="" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
</div>
</div>
<div class="cms_widget_post_comment widget_post_comment">
<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
<h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
</vb:if>
<div class="cms_widget_post_content widget_post_content">{vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a></div>
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<a href="{vb:link member, {vb:raw article}}" class="username">{vb:raw article.username}</a>
</vb:if>
<a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"><vb:if condition="$article['showpublishdate'] OR $article['settingsforboth'] == 2">{vb:date {vb:raw article.publishdate}, {vb:raw vboptions.dateformat}}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:date {vb:raw article.publishdate} {vb:raw vboptions.timeformat}}</span></vb:if></vb:if></a>
<vb:comment>
<div class="searchcat">
<h4 class="searchlastpostlabel understate">{vb:rawphrase content} :</h4>
<span class="understate">{vb:rawphrase article}</span>
</div>
</vb:comment>

<vb:if condition="$article['categories']">
<div class="searchstats">
<h4 class="searchlastpostlabel">{vb:rawphrase categories}: </h4>
<vb:each from="article['categories']" key="categoryid" value="category">
<a href="{vb:raw category.category_url}">{vb:raw category.category}</a>&nbsp;
</vb:each>
</div>
</vb:if>

<vb:if condition="$article['tags']">
<div class="searchstats">
<dt>{vb:rawphrase tags}: </dt>
<vb:each from="article['tags']" key="tagid" value="tagtext">
<dd><a href="{vb:raw vboptions.bburl}/tags.php?tagid={vb:raw tagid}">{vb:raw tagtext}</a></dd>
</vb:each>
</div>
</vb:if>
</div>

</div>
</vb:each>
</div>
</div>
</div>


additional.css
.widget_post_userinfo {
float: left;
height: 40px;
margin-right: 40px;
}
.widget_post_comment {
margin-left: 0;}
.widget_post_comment { overflow: inherit;}


So I made.
Does not work.
Works from left when I roll up Firefox left.

[Lynne]

Whoops, too quick on the copy/paste:
Change:
.widget_post_comment { overflow: inherit;}
To:
.widget_post_comment .widget_post_content { overflow: inherit;}

[romaszek]

Works superbly :up:
This should be built-in in vBulletin.
Very to thank Lynne. You are great.

Thanks :)