The Arcive of Official vBulletin Modifications Site.

Bram H · #1 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 · #2 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 · #3 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

Lynne · #4 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 · #5 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 · #6 08-27-2011, 04:39 PM

Just open the template vbcms_content_article_preview.

Move this code:

HTML Code:

    <vb:if condition="$showtitle">
    <div class="title">
        <h3 class="article_preview">
            <a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>&nbsp;
*** 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:

HTML Code:

    <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 · #7 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).

Hopefully more people will use your tips above! Thanks a lot!

Lynne · #8 08-27-2011, 10:56 PM

That really does look very nice on your site!

MudRacing · #9 09-01-2011, 08:51 PM

Quote:

Originally Posted by Lynne

Just open the template vbcms_content_article_preview.

Move this code:

HTML Code:

    <vb:if condition="$showtitle">
    <div class="title">
        <h3 class="article_preview">
            <a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>&nbsp;
*** 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:

HTML Code:

    <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:

HTML Code:

{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>&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: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="!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..

Lynne · #10 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?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04292 seconds Memory Usage 2,292KB Queries Executed 11 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (5)bbcode_html (1)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!