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.

[edyy]

that was my first choise but i didn't manage to make it work, and I really don't know CSS and my knowledge are verry limited in that aria. I will put that version into the test site and i will tell you when i'm finished , maybe you will help me from that point.

[edyy]

You can take a look now and see what is wrong, the link is http://test.games-area.ro/content.php.

[Lynne]

You don't have the Categories in the div you created (article_hdr). And this doesn't exist:
<img width="90" height="26" src="maxcon_assets/img/box_hdr_4.gif" class="article_hdr_icon">

[edyy]

I modified that too, now it looks like i want it, but if you take a carefull look to the categories you can see that when you hover the mouse over the categories you have to point him verry carefull to change his appeareance. Why is that and how can i repair that.

[Lynne]

float the right bar right:
.article_hdr_bar { float: right; padding-right: 10px; padding-top: 3px;}

[edyy]

everything is perfect, thank you verry much.

[edyy]

Another question if I may , on the same test site as above how can I put the title and the published by on the same line ? It looks different for the first example. I hope i was clear. i made the aproppiate modification to the test site. Thanks

[Lynne]

You'll need to rewrite the template to do that. The title is using an <h> tag and it's in it's own <div> separate from the published by stuff. You'll have to put them both in the same <div> and then adjust the CSS to allow them to both be on the same line.

[edyy]

It is ok now i made a separate div to specify the location of the localdate and put it inside the h3 tag, I hope this is the best way :). Thanks for the help.

If I may another question inside this thred:

It is posiblle to use a fixed template in the CMS and a fluid one in the forum section ? and it it is you can give me a hint to start this . Thanks!

[Lynne]

You may create a new style that is fixed and then apply it to the CMS via Home > edit Section > Style

[edyy]

yes but that will make only the section on fixed template without the widgets parts, or the header and footer.

[Lynne]

What do you mean? That is how you would apply a different style to the CMS area. Alternately, just post the CSS to make the pages fixed via a condition in one of the templates.

[edyy]

It works , is fine now. I thought that this option will not affect the rest of the page, but you are right :). Thanks.

[ashley76]

so how can I change this

<div class="article_hdr_icon">
<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>
</div>

To show section titles instead of categories?

[Lynne]

To show section titles instead of categories?
You can't just change the template - you would need to change the code also and make sure the parentnode is grabbed. This was asked about in another thread recently. I don't know if they wrote down a solution or not. Try a search.