View Full Version : Align CMS preview title right to image
Bram H
08-27-2011, 12:30 PM
How can I change the position of the preview titles on the CMS home. I would like to display the title link directly right to the preview image instead of above.
Lynne
08-27-2011, 03:30 PM
I believe you will need to edit the template itself to do this.
To find the template to modify, do this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code. (Sometimes the template is the one mentioned at the very top of the page source.)
Bram H
08-27-2011, 03:36 PM
The issue is I don't know anything about CSS :) Total noob with such things.
I added a screenie to show what I would like to achieve
https://vborg.vbsupport.ru/external/2011/08/20.png
Lynne
08-27-2011, 04:10 PM
It might have nothing to do with CSS, just html. You would need to move the html for the title into the div that holds the previewtext/image.
Bram H
08-27-2011, 04:27 PM
Beyong my knowledge Lynne :)
Oh well, ill just have to wait until my fellow admin returns from vacation. I am more the "find this code" and "replace with that" kind of guy I think :)
Lynne
08-27-2011, 04:39 PM
Just open the template vbcms_content_article_preview.
Move this code:
<vb:if condition="$showtitle">
<div class="title">
<h3 class="article_preview">
<a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>
*** a bunch of stuff edited out ***
<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>
to right after this div:
<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>
I would add a line break after the div first, but that is up to you.
Bram H
08-27-2011, 10:55 PM
Lynn you are a Goddess!!:up::) All seems to work now and I think it looks much more pretty than before (demo (http://www.racedepartment.com)).
Hopefully more people will use your tips above! Thanks a lot!
Lynne
08-27-2011, 10:56 PM
That really does look very nice on your site!
MudRacing
09-01-2011, 08:51 PM
Just open the template vbcms_content_article_preview.
Move this code:
<vb:if condition="$showtitle">
<div class="title">
<h3 class="article_preview">
<a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>
*** a bunch of stuff edited out ***
<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>
to right after this div:
<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>
I would add a line break after the div first, but that is up to you.
I was trying to make this change on my site, but did not succeed, can you help me?
I will put my vbcms_content_article_preview:
{vb:raw css}
<div class="article_preview">
<vb:if condition="$showtitle">
<div class="title">
<h3 class="article_preview">
<a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>
<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: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">
{vb:rawphrase updated_on_x {vb:date {vb:raw lastupdated}, {vb:raw dateformat}}}
</vb:if>
</vb:if>
<vb:if condition="$viewcount AND $showviewcount">
{vb:rawphrase number_of_views}: {vb:raw viewcount}
</vb:if>
<vb:if condition="$showrating">
<span class="cmsrating rating{vb:raw rating}"></span>
</vb:if>
</div>
</vb:if>
<vb:if condition="!empty($categories)">
<div class="cms_article_section_location">
{vb:phrase in_category}
<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: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>
Thanks.. :o
Lynne
09-01-2011, 11:14 PM
You didn't edit the template at all so how am I supposed to see what you did wrong?
setishock
09-02-2011, 06:50 AM
Most excellent idea Bram H!
Lynne will this work in 4.1.2?
Lynne
09-02-2011, 02:47 PM
Most excellent idea Bram H!
Lynne will this work in 4.1.2?
I don't have a 4.1.2 test site to see if it would.
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.