Putting "categories" and "published by" in the same line

[edyy]

Hello,

In article preview we have "published by" and the "categories" each one on his own line. I want to put them in an table ( that i've managed to do it) and to be both on the same line. In the image i don't manage to put the categorie in the same line with the "published by", could anyone help me with that.

[Lynne]

Can you post the code you have added to do this along with about 2 lines above and below your added code so we can see where in the template it is. Please post the template name also and use code tags.

[edyy]

I've edited the CSS Templates -> vbcms.css and changed the .cms_article_username into this

.article_username_container .article_username {
	width: 50%;
	display:block;
	float: {vb:stylevar left};
	clear: {vb:stylevar right};
}
.cms_article_username {
        background-image: url("http://www.games-area.ro/forum/images/box_hdr_bg.gif");
        background-position: right top;
        background-repeat: no-repeat;
        height: 26px;
        text-align: right;
        width: 100%;
        padding-right: 10px;
        padding-top: 3px;
	font-size:{vb:stylevar small_fontSize};
	padding-bottom: 2px;
	width: 100%;
	display: block;
	position: relative;
	top: 2px;
}
.cms_article_published {
	color:red;
	text-align:{vb:stylevar right};
}

After that i've changed the order of things in VBulletin CMS Templates -> vbcms_content_article_preview into that

{vb:raw css}

<div class="article_preview">
<vb:if condition="!empty($categories)">
		<div class="cms_article_section_location">
			<ol class="commalist">
				<vb:each from="categories" key="categoryid" value="category">
					<li><a href="{vb:raw category.category_url}">{vb:raw category.category}</a></li>
				</vb:each>
			</ol>
		</div>
	</vb:if>

	<vb:if condition="$showuser OR $showpublishdate OR ($viewcount AND $showviewcount) OR ($showrating AND $rating!='')">
	<div class="cms_article_username">
		<vb:if condition="$showuser">
			{vb:rawphrase by_x_nolink, {vb:raw memberaction_dropdown}}
		</vb:if>

		<vb:if condition="$showpublishdate">
            <vb:if condition="!$published OR !$setpublish">
                    <span style="color:red">
                    <vb:if condition="$publishdate AND $setpublish">
                            {vb:rawphrase page_will_be_published_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
                    <vb:else />
                            {vb:rawphrase page_not_published}
                    </vb:if>
                    </span>
            <vb:elseif condition="$publishdate" />
                    {vb:rawphrase published_on_x {vb:raw publishdatelocal}}  {vb:raw publishtimelocal}
            </vb:if>

			<vb:if condition="$showupdated and $lastupdated">
				&nbsp;{vb:rawphrase updated_on_x {vb:date {vb:raw lastupdated}, {vb:raw dateformat}}}&nbsp;
			</vb:if>
		</vb:if>

		<vb:if condition="$viewcount AND $showviewcount">
			&nbsp;{vb:rawphrase number_of_views}: {vb:raw viewcount}&nbsp;
		</vb:if>

 		<vb:if condition="$showrating">
			<span class="cmsrating rating{vb:raw rating}"></span>
		</vb:if>

	</div>
	</vb:if>
	

	<vb:if condition="$showtitle">
	<div class="title">
		<h3 class="article_preview">
			<a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>&nbsp;
		<vb:if condition="$can_edit">
			<a class="edit" href="{vb:raw edit_url}">
			<img class="editimage" src="{vb:stylevar imgdir_cms}/edit_small.png" alt="{vb:rawphrase edit}" />
			</a>
		</vb:if>
		</h3>
	</div>
	</vb:if>
<vb:comment>
	<!--  Display Section Location -->
	<div class="cms_article_section_location">
		{vb:rawphrase section}: <a href="{vb:raw section_url}">{vb:var parenttitle}</a>
	</div>
</vb:comment>

	<div class="fullwidth article_preview_contents<vb:if condition="$showpreviewonly"> showpreviewonly</vb:if> restore">
		<vb:if condition="$showpreviewonly">
			<vb:if condition="$previewvideo">
				{vb:raw previewvideo}
			<vb:elseif condition="$previewimage" />
				<a href="{vb:raw page_url}">
				<img class="cms_article_preview_image" src="{vb:raw previewimage}" alt="{vb:rawphrase article_preview}" /></a>
			</vb:if>
		</vb:if>
		<div>
                        <br />
			<div class="cms_article_txt_content postcontainer">
			{vb:raw previewtext}
			<vb:if condition="$preview_chopped">...</vb:if>
			</div>
		</div>
	</div>

	<div class="fullwidth">

		<vb:if condition="$preview_chopped">
			<span class="cms_article_readmore"><a href="{vb:raw page_url}">{vb:rawphrase read_more_phrase} <img src="{vb:stylevar imgdir_cms}/read_more-{vb:stylevar right}.png" alt="{vb:rawphrase read_more_phrase}" /></a>
			</span>
		</vb:if>

		<vb:if condition="$comment_count">
			<span class="cms_article_comment_number">
				<a href="{vb:raw newcomment_url}"><img class="inlineimg" src="{vb:stylevar imgdir_button}/firstnew-comment.png" alt="{vb:rawphrase go_to_first_new_comment}" /></a>
				<a href="{vb:raw newcomment_url}"  rel="nofollow">{vb:raw comment_count}
				<vb:if condition="$comment_count == 1">
					{vb:rawphrase comment}
				<vb:else />{vb:rawphrase comments}
				</vb:if></a>
			</span>
		</vb:if>
	</div>
</div>

I hope this is the best way , because is the third methed I try and i hope is the fastest.

[Lynne]

It would be much easier to see what is going on if we had a link to the page.

[edyy]

I am sorry but the test server is on local machine is not up. The only modification is the one with ".cms_article_username" from the CSS Template. Or you you think is better that way show me how to do it on an standard board, just to put categories and publised by on the same line.

[Lynne]

You need to set .cms_article_username to only 50% (and you only need one width in there) and also float it right and make the display type inline-block. The other one, you need to float left and also make the display type inline-block. Also, since the username needs to be floated right, you actually need to have the div for that before the div for the categories.

[edyy]

I've put the site up, because i didn't manage to do what you said to me. The link is http://test.games-area.ro/content.php, i hope this will make you understand better what i want

[Lynne]

Remove the clear statement from .cms_article_section_location

[edyy]

When i make the image 100% the categories goes underline, i want it to be on the same line (like the published by ). I made the width back to 100% to see it more clear

[Lynne]

You need to add the background to the Categories strip also. What you really should do is have one div that has the background and is 100%, then inside that div, have a div for the categories and the div for the Published by.