Upgrading your Vivvo v.4.1.6 to v.4.5

Filed under:

Published: August 09, 2010

Following tutorial will show you how to upgrade your templates and themes from version 4.1.6 to latest 4.5 version.

Before starting, we strongly recommend making a backup of your Vivvo site and files prior to overwriting files and running the Upgrade.
While every attempt has been made to ensure that Upgrade is bug-free, due to the number of different hardware and software configurations around today, it is impossible to guarantee that it will perform error-free on your particular system. As a result, it is strongly recommended that you make a backup before trying an upgraded version of Vivvo.

Please be careful about your custom work when overwriting files. All customized templates should be upgraded manually.

Rotating headlines

In order to make your rotating headlines box work on v4.5, you need to edit box/rotating_headlines.tpl template, and remove following parameter from params block:

<vte:param name="search_status" value="2" />

After that, you need to add following two parameters:

<vte:param name="search_topic_id" value="1" />
<vte:param name="search_all_tag_ids" value="1,2" />

DHTML and sections templates

To support new functionality of Vivvo sections you need to change following thing to your box/dhtml_menu.tpl and box/sections.tpl templates:

dhtml_menu.tpl

Around line 14 remove href="{category.get_href}" from <a> element.

Next, replace <vte:value select="{category.category_name}" /> within <a> element with following code:

<vte:attribute name="href">
  <vte:if test="{category.redirect}">
  <vte:value select="{category.redirect}" />
  <vte:else>
    <vte:value select="{category.get_href}" />
  </vte:else>
  </vte:if>
</vte:attribute>
<vte:value select="{category.category_name}" />

Repeat the same for the code located around line 27.

sections.tpl

The above procedure also applies to sections.tpl template, the only difference is that you need to place following code within second <a> tag right bellow </vte:attribute>:

&#8250;<vte:value select="{prefix}" />

Enabling Web analytics (powered by Google) in your templates

To enable Web analytics feature on your website, following templates needs to be edited:

- system/html_header.tpl
- box/footer.tpl
- article/default.tpl (or any other custom article template)
- category/default.tpl (or any other custom category template)

system/html_header.tpl

Due to additional changes other than Web analytics, it's recommended that you overwrite entire template.

box/footer.tpl

Right above closing </vte:template> tag, add following code:

<vte:if test="{VIVVO_ANALYTICS_TRACKER_ID}">
  <script type="text/javascript">(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(ga);})();</script>
</vte:if>

article/default.tpl

Right above </body> tag add following code:

<vte:if test="{VIVVO_ANALYTICS_TRACKER_ID}">
  <script type="text/javascript">_gaq.push(['_trackEvent', 'Article', 'View', '<vte:value select="{article.get_id}" />', 1]);</script>
</vte:if>

category/default.tpl

Right above </body> tag add following code:

<vte:if test="{VIVVO_ANALYTICS_TRACKER_ID}">
  <script type="text/javascript">_gaq.push(['_trackEvent', 'Category', 'View', '<vte:value select="{category.get_id}" />', 1]);</script>
</vte:if>

Article tags box

You need to edit your box/article_tags.tpl template, replacing everything within <div class="box_content"> with following code:

<vte:if test="{article.get_tag_links}">
  <vte:foreach from="{article.get_tag_links}" item="tag" key="comma">
    <a href="{tag.get_href}" title="{LNG_IN} {tag.get_group_name}"><vte:value select="{tag.get_name}" /></a><vte:if test="{comma}!={comma_count}">, </vte:if>
  </vte:foreach>
  <vte:else>
    <vte:value select="{LNG_NO_TAGS_FOR_ARTICLE}" />
  </vte:else>
</vte:if>

Article Rating box

In Your box/article_vote.tpl template, You need to replace entire Java Script block with following code:

<script type="text/javascript" language="javascript">
	new Starry('stars', {
		showNull: false,
		startAt: <vte:value select="{article.get_vote_average}" />,
		voted: <vte:if test="{article.is_voted}">true<vte:else>false</vte:else></vte:if>,
		callback: <vte:if test="{article.is_voted}">Prototype.emptyFunction<vte:else>function (index) {
			var voteParam = {};
			voteParam.action = 'article';
			voteParam.cmd = 'vote';
			voteParam.ARTICLE_id = <vte:value select="{article.get_id}" />;
			voteParam.ARTICLE_vote = index;
			voteParam.template_output = 'box/article_vote';

			new Ajax.Updater('box_article_rating', document.location.toString(), {
				parameters: voteParam,
				evalScripts: true,
				insertion: Element.replace
				<vte:if test="{VIVVO_ANALYTICS_TRACKER_ID}">
				,onSuccess: function(xhr) {
					if (xhr.getResponseHeader('X-Vivvo-Action-Status') == 1) {
						_gaq.push(['_trackEvent', 'Article', 'Rate', '<vte:value select="{article.get_id}" />', index]);
					}
				}
				</vte:if>
			});
		}</vte:else></vte:if>,
		sprite: '<vte:value select="{VIVVO_THEME}" />img/stars.gif'
	});
</script>

Comments

Due to numerous features added to comments in v.4.5. it’s highly recommended that you overwrite following templates:

- box/comments.tpl
- box/comments_add.tpl

You also need to add following template to your /box directory:

- comment_responses.tpl

Following CSS code needs to be copied to your css/style.css file:

/*** Article comments ***/
.bbcodebox ul.bbc_buttons {
	background:#efefef url(../img/gradient_light.gif) top repeat-x;
	padding:3px;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	width:592px;
	margin:0;
	height:24px;
}

.bbcodebox ul.bbc_buttons li {
	display:block; 
	float:left; 
	width:22px; 
	height:20px; 
	line-height:20px; 
	border:1px solid transparent; 
	background:none; 
	position:relative; 
	text-align:center;
}

.bbcodebox ul.bbc_buttons li ul {
	position:absolute;
	left:0;
	top:22px;
	padding:5px;
	background:#E1E1E2;
	width:270px;
	display:none;
	border:1px solid #316AC5;
}

.bbcodebox ul.bbc_buttons li li, 
.bbcodebox ul.bbc_buttons li li a {float:none; display:inline;}

.bbcodebox ul.bbc_buttons li:hover ul, 
.bbcodebox ul.bbc_buttons li.ie-hover ul {display:block;}

	display:block; 
	float:left; 
	width:21px; 
	height:20px; 
	line-height:20px; 
	border:1px solid transparent; 
	background:none; 
	padding:0;
}



.bbcodebox ul.bbc_buttons li a img {vertical-align:middle;}

.box_link {
	width:580px;
	padding:5px 9px;
	color:#777;
	background:#efefef;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}

/*** BB code styles ***/
span.bold {font-weight:bold;}
span.italic {font-style:italic;}
span.underlined {text-decoration:underline;}
div.quote {
	font-style:italic;
	color:#777;
	padding:10px;
	background:#fff;
	border-left:3px solid #e1e1e2;
	border-right:3px solid #e1e1e2;
	border-bottom:1px solid #e1e1e2;
	border-top:1px solid #e1e1e2;
}

h4.title_comments {
	font-size:20px;
	font-weight:normal;
	border-top:2px solid #000;
	padding:5px 0;
	margin:15px 0px;
}

h4.title_comments span {font-size:16px; color:#949494;}

img.comment_feed {float:right;}

h4.title_comments span.no_comments {display:block; font-size:12px; font-weight:normal;}


	border-bottom:1px solid #d2d2d2; 
	border-top:1px solid #d2d2d2; 
	padding:15px 0; 
	margin:15px 0 0 50px;
}



.comment_stamp {color:#949494;}


.avatar {float:left;}



.comment_actions {margin-left:50px; font-size:11px;}

.comment_actions a {float:left; margin-right:4px; font-weight:bold;}

.comment_reply {background:url(../img/comment_reply.gif) 0 0 no-repeat; padding:1px 8px 1px 18px;}

.comment_actions div.result {
	float:left;
	border:1px solid #ccc;
	background-color:#fff;
	padding:0px 4px;
	color:#555;
	font-weight: bold;
	margin-right:4px;
}

div#writing_reply {padding:5px; color:#666; border-bottom:1px solid #eee; margin-bottom:5px; background:#fffdd1;}

span#writing_reply_to {font-style:italic;}

div#writing_reply a {color:#ca0002; padding:0 5px;}

.result span.error {font-weight:normal; font-size:11px; color:#ca0002;}

div#comment_dump {
	font-size:14px;
	color:#172973;
	background-color:#f8f8f8;
	border:1px solid #ebebeb;
	padding:6px;
}

div#comment_dump span.error {color:#ca0002;}