[ADDON] CSS3 Progress Bars (with eyecandy)

Modifications for phpBB3.
Try the Mods here and share Your own Mods
Forum rules
You dont have to use ModX or make your mod AutoMod compatible. A simple textfile is fine
But if you post Mods here You also have to give support

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by doktornotor »

Well this debate goes absolutely nowhere. Screenshot? Forum link?!

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by martin123456 »

http://phpbbpoints.dyndns.org

and yes i got told to change my test site name lmfao

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by doktornotor »

You have the whole thing installed twice and severely messed up.

view-source:http://phpbbpoints.dyndns.org/styles/pr ... _body.html

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by Flamingdevastation »

O_O Look at what happened after installing. Instead of all my forums this is what it says:
You do not have the required permissions to view the files attached to this post.

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by doktornotor »

Flamingdevastation wrote:O_O Look at what happened after installing. Instead of all my forums this is what it says:
Wipe the cache! All applicable templates and the forum one.

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by martin123456 »

doktornotor wrote:You have the whole thing installed twice and severely messed up.

view-source:http://phpbbpoints.dyndns.org/styles/pr ... _body.html
hmm twice ? il unistall it all and redoe it all not sure how its there twice but ? il post back

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by doktornotor »

Yes, twice. The jQuery thing is there twice, plus redundant <!-- IF --> <!-- ELSE --><!-- ENDIF --> for every table row. Recommend redoing everything (incl. the Forum Goal mod itself) from scratch. This is how it should look on prosilver:

Code: Select all

<!-- IF FGCSS_ENABLE and FGPBA_ENABLE -->
<script type="text/javascript">
// <![CDATA[
if (window.jQuery === undefined) {
    document.write(unescape('%3Cscript src="{ROOT_PATH}script/jquery-latest.min.js" type="text/javascript"%3E%3C/script%3E'));
}
// ]]>
</script>
<script>
// <![CDATA[
	$(function() {
		$(".meter > span").each(function() {
			$(this)
				.data("origWidth", $(this).width())
				.width(0)
				.animate({
					width: $(this).data("origWidth")
				}, 1200);
		});
	});
// ]]>
</script>
<!-- ENDIF -->
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
	<ul class="topiclist">
		<li class="header">
			<dl class="icon">
				<dt>{L_FORUM_GOALS}</dt>
			</dl>
		</li>
	</ul>
	<ul class="topiclist forums">
	<li>
	<table style="text-align: left; width: 100%; padding:4px;" border="0" cellpadding="2" cellspacing="4">
	  <tbody>
			<!-- IF FPG_ENABLE -->
			<tr>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_POST_GOAL} <strong>{FORUM_POST_GOAL}</strong></td>
				<td style="width: 160px; font-size:12px;">{TOTAL_POSTS}</td>
				<td style="width: 160px; font-size:12px;"><!-- IF FORUM_POST_PERCENT < 100 -->{L_GOAL_REMAINING} <strong>{FORUM_POST_REST}</strong><!-- ELSE --><em>{L_GOAL_REMAINING_ZERO}</em> <img src="{ROOT_PATH}images/forum_goal_ok.png" width="12" height="12" alt="" /><!-- ENDIF --></td>

				<!-- IF FGCSS_ENABLE -->
				<td><div class="meter <!-- IF FGPBA_ENABLE -->animate <!-- ENDIF --><!-- IF not FGPBS_ENABLE and not FGPBA_ENABLE -->nostripes <!-- ENDIF --><!-- IF FORUM_POST_PERCENT < 34 -->red<!-- ELSEIF FORUM_POST_PERCENT < 67 -->orange<!-- ELSE --><!-- ENDIF -->" style="font-weight: bold;"> <span style="max-width:97%; width:{FORUM_POST_PERCENT}%; padding-left:25px; font-size:10px;">{FORUM_POST_PERCENT}%<!-- IF FGPBA_ENABLE --><span></span><!-- ENDIF --></span></div></td>
				<!-- ELSE -->
				<td><div style="background:url('{ROOT_PATH}images/forum_goal_grey.png') repeat-x; background-color: #cccccc; border: 1px solid black; width:100%;"><div style="background:url('{ROOT_PATH}images/forum_goal_<!-- IF FORUM_POST_PERCENT < 34 -->red<!-- ELSEIF FORUM_POST_PERCENT < 67 -->yellow<!-- ELSE -->green<!-- ENDIF -->.png') repeat-x;background-color: #008040; color: white; font-weight:bold;<!-- IF FORUM_POST_PERCENT < 100 --> border-right: 1px solid black;<!-- ENDIF --> max-width:100%;  width:{FORUM_POST_PERCENT}%; height:12px;"><span style="padding-left:25px; font-size:10px; line-height:12px;">{FORUM_POST_PERCENT}%</span></div></div></td>
				<!-- ENDIF -->
			</tr>
			<!-- ENDIF -->
			<!-- IF FTG_ENABLE -->
			<tr>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_TOPIC_GOAL} <strong>{FORUM_TOPIC_GOAL}</strong></td>
				<td style="width: 160px; font-size:12px;">{TOTAL_TOPICS}</td>
				<td style="width: 160px; font-size:12px;"><!-- IF FORUM_TOPIC_PERCENT < 100 -->{L_GOAL_REMAINING} <strong>{FORUM_TOPIC_REST}</strong><!-- ELSE --><em>{L_GOAL_REMAINING_ZERO}</em> <img src="{ROOT_PATH}images/forum_goal_ok.png" width="12" height="12" alt="" /><!-- ENDIF --></td>

				<!-- IF FGCSS_ENABLE -->
				<td><div class="meter <!-- IF FGPBA_ENABLE -->animate <!-- ENDIF --><!-- IF not FGPBS_ENABLE and not FGPBA_ENABLE -->nostripes <!-- ENDIF --><!-- IF FORUM_TOPIC_PERCENT < 34 -->red<!-- ELSEIF FORUM_TOPIC_PERCENT < 67 -->orange<!-- ELSE --><!-- ENDIF -->" style="font-weight: bold;"> <span style="max-width:97%; width:{FORUM_TOPIC_PERCENT}%; padding-left:25px; font-size:10px;">{FORUM_TOPIC_PERCENT}%<!-- IF FGPBA_ENABLE --><span></span><!-- ENDIF --></span></div></td>
				<!-- ELSE -->
				<td><div style="background:url('{ROOT_PATH}images/forum_goal_grey.png') repeat-x; background-color: #cccccc; border: 1px solid black; width:100%;"><div style="background:url('{ROOT_PATH}images/forum_goal_<!-- IF FORUM_TOPIC_PERCENT < 34 -->red<!-- ELSEIF FORUM_TOPIC_PERCENT < 67 -->yellow<!-- ELSE -->green<!-- ENDIF -->.png') repeat-x;background-color: #008040; color: white; font-weight:bold;<!-- IF FORUM_TOPIC_PERCENT < 100 --> border-right: 1px solid black;<!-- ENDIF --> max-width:100%;  width:{FORUM_TOPIC_PERCENT}%; height:12px;"><span style="padding-left:25px; font-size:10px; line-height:12px;">{FORUM_TOPIC_PERCENT}%</span></div></div></td>
				<!-- ENDIF -->
			</tr>
			<!-- ENDIF -->
			<!-- IF FUG_ENABLE -->
			<tr>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_USER_GOAL} <strong>{FORUM_USER_GOAL}</strong></td>
				<td style="width: 160px; font-size:12px;">{TOTAL_USERS}</td>
				<td style="width: 160px; font-size:12px;"><!-- IF FORUM_USER_PERCENT < 100 -->{L_GOAL_REMAINING} <strong>{FORUM_USER_REST}</strong><!-- ELSE --><em>{L_GOAL_REMAINING_ZERO}</em> <img src="{ROOT_PATH}images/forum_goal_ok.png" width="12" height="12" alt="" /><!-- ENDIF --></td>

				<!-- IF FGCSS_ENABLE -->
				<td><div class="meter <!-- IF FGPBA_ENABLE -->animate <!-- ENDIF --><!-- IF not FGPBS_ENABLE and not FGPBA_ENABLE -->nostripes <!-- ENDIF --><!-- IF FORUM_USER_PERCENT < 34 -->red<!-- ELSEIF FORUM_USER_PERCENT < 67 -->orange<!-- ELSE --><!-- ENDIF -->" style="font-weight: bold;"> <span style="max-width:97%; width:{FORUM_USER_PERCENT}%; padding-left:25px; font-size:10px;">{FORUM_USER_PERCENT}%<!-- IF FGPBA_ENABLE --><span></span><!-- ENDIF --></span></div></td>
				<!-- ELSE -->
				<td><div style="background:url('{ROOT_PATH}images/forum_goal_grey.png') repeat-x; background-color: #cccccc; border: 1px solid black; width:100%;"><div style="background:url('{ROOT_PATH}images/forum_goal_<!-- IF FORUM_USER_PERCENT < 34 -->red<!-- ELSEIF FORUM_USER_PERCENT < 67 -->yellow<!-- ELSE -->green<!-- ENDIF -->.png') repeat-x;background-color: #008040; color: white; font-weight:bold;<!-- IF FORUM_USER_PERCENT < 100 --> border-right: 1px solid black;<!-- ENDIF --> max-width:100%;  width:{FORUM_USER_PERCENT}%; height:12px;"><span style="padding-left:25px; font-size:10px; line-height:12px;">{FORUM_USER_PERCENT}%</span></div></div></td>
				<!-- ENDIF -->
			</tr>
			<!-- ENDIF -->
			<!-- IF FFG_ENABLE -->
			<tr>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_FILES_GOAL} <strong>{FORUM_FILES_GOAL}</strong></td>
				<td style="width: 160px; font-size:12px;">{TOTAL_FILES}</td>
				<td style="width: 160px; font-size:12px;"><!-- IF FORUM_FILES_PERCENT < 100 -->{L_GOAL_REMAINING} <strong>{FORUM_FILES_REST}</strong><!-- ELSE --><em>{L_GOAL_REMAINING_ZERO}</em> <img src="{ROOT_PATH}images/forum_goal_ok.png" width="12" height="12" alt="" /><!-- ENDIF --></td>

				<!-- IF FGCSS_ENABLE -->
				<td><div class="meter <!-- IF FGPBA_ENABLE -->animate <!-- ENDIF --><!-- IF not FGPBS_ENABLE and not FGPBA_ENABLE -->nostripes <!-- ENDIF --><!-- IF FORUM_FILES_PERCENT < 34 -->red<!-- ELSEIF FORUM_FILES_PERCENT < 67 -->orange<!-- ELSE --><!-- ENDIF -->" style="font-weight: bold;"> <span style="max-width:97%; width:{FORUM_FILES_PERCENT}%; padding-left:25px; font-size:10px;">{FORUM_FILES_PERCENT}%<!-- IF FGPBA_ENABLE --><span></span><!-- ENDIF --></span></div></td>
				<!-- ELSE -->
				<td><div style="background:url('{ROOT_PATH}images/forum_goal_grey.png') repeat-x; background-color: #cccccc; border: 1px solid black; width:100%;"><div style="background:url('{ROOT_PATH}images/forum_goal_<!-- IF FORUM_FILES_PERCENT < 34 -->red<!-- ELSEIF FORUM_FILES_PERCENT < 67 -->yellow<!-- ELSE -->green<!-- ENDIF -->.png') repeat-x;background-color: #008040; color: white; font-weight:bold;<!-- IF FORUM_FILES_PERCENT < 100 --> border-right: 1px solid black;<!-- ENDIF --> max-width:100%;  width:{FORUM_FILES_PERCENT}%; height:12px;"><span style="padding-left:25px; font-size:10px; line-height:12px;">{FORUM_FILES_PERCENT}%</span></div></div></td>
				<!-- ENDIF -->
			</tr>
			<!-- ENDIF -->
			<!-- IF FGG_ENABLE and TOTAL_IMAGES -->
			<tr>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_GALLERY_GOAL} <strong>{FORUM_GALLERY_GOAL}</strong></td>
				<td style="width: 160px; font-size:12px;">{TOTAL_IMAGES}</td>
				<td style="width: 160px; font-size:12px;"><!-- IF FORUM_GALLERY_PERCENT < 100 -->{L_GOAL_REMAINING} <strong>{FORUM_GALLERY_REST}</strong><!-- ELSE --><em>{L_GOAL_REMAINING_ZERO} <img src="{ROOT_PATH}images/forum_goal_ok.png" width="12" height="12" alt="" /></em><!-- ENDIF --></td>

				<!-- IF FGCSS_ENABLE -->
				<td><div class="meter <!-- IF FGPBA_ENABLE -->animate <!-- ENDIF --><!-- IF not FGPBS_ENABLE and not FGPBA_ENABLE -->nostripes <!-- ENDIF --><!-- IF FORUM_GALLERY_PERCENT < 34 -->red<!-- ELSEIF FORUM_GALLERY_PERCENT < 67 -->orange<!-- ELSE --><!-- ENDIF -->" style="font-weight: bold;"> <span style="max-width:97%; width:{FORUM_GALLERY_PERCENT}%; padding-left:25px; font-size:10px;">{FORUM_GALLERY_PERCENT}%<!-- IF FGPBA_ENABLE --><span></span><!-- ENDIF --></span></div></td>
				<!-- ELSE -->
				<td><div style="background:url('{ROOT_PATH}images/forum_goal_grey.png') repeat-x; background-color: #cccccc; border: 1px solid black; width:100%;"><div style="background:url('{ROOT_PATH}images/forum_goal_<!-- IF FORUM_GALLERY_PERCENT < 34 -->red<!-- ELSEIF FORUM_GALLERY_PERCENT < 67 -->yellow<!-- ELSE -->green<!-- ENDIF -->.png') repeat-x;background-color: #008040; color: white; font-weight:bold;<!-- IF FORUM_GALLERY_PERCENT < 100 --> border-right: 1px solid black;<!-- ENDIF --> max-width:100%;  width:{FORUM_GALLERY_PERCENT}%; height:12px;"><span style="padding-left:25px; font-size:10px; line-height:12px;">{FORUM_GALLERY_PERCENT}%</span></div></div></td>
				<!-- ENDIF -->
			</tr>
			<!-- ENDIF -->
			<!-- IF FTVG_ENABLE -->
			<tr>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_VIEW_GOAL} <strong>{FORUM_VIEW_GOAL}</strong></td>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_VIEWS} <strong>{TOTAL_VIEWS}</strong></td>
				<td style="width: 160px; font-size:12px;"><!-- IF FORUM_VIEW_PERCENT < 100 -->{L_GOAL_REMAINING} <strong>{FORUM_VIEW_REST}</strong><!-- ELSE --><em>{L_GOAL_REMAINING_ZERO}</em> <img src="{ROOT_PATH}images/forum_goal_ok.png" width="12" height="12" alt="" /><!-- ENDIF --></td>

				<!-- IF FGCSS_ENABLE -->
				<td><div class="meter <!-- IF FGPBA_ENABLE -->animate <!-- ENDIF --><!-- IF not FGPBS_ENABLE and not FGPBA_ENABLE -->nostripes <!-- ENDIF --><!-- IF FORUM_VIEW_PERCENT < 34 -->red<!-- ELSEIF FORUM_VIEW_PERCENT < 67 -->orange<!-- ELSE --><!-- ENDIF -->" style="font-weight: bold;"> <span style="max-width:97%; width:{FORUM_VIEW_PERCENT}%; padding-left:25px; font-size:10px;">{FORUM_VIEW_PERCENT}%<!-- IF FGPBA_ENABLE --><span></span><!-- ENDIF --></span></div></td>
				<!-- ELSE -->
				<td><div style="background:url('{ROOT_PATH}images/forum_goal_grey.png') repeat-x; background-color: #cccccc; border: 1px solid black; width:100%;"><div style="background:url('{ROOT_PATH}images/forum_goal_<!-- IF FORUM_VIEW_PERCENT < 34 -->red<!-- ELSEIF FORUM_VIEW_PERCENT < 67 -->yellow<!-- ELSE -->green<!-- ENDIF -->.png') repeat-x;background-color: #008040; color: white; font-weight:bold;<!-- IF FORUM_VIEW_PERCENT < 100 --> border-right: 1px solid black;<!-- ENDIF --> max-width:100%;  width:{FORUM_VIEW_PERCENT}%; height:12px;"><span style="padding-left:25px; font-size:10px; line-height:12px;">{FORUM_VIEW_PERCENT}%</span></div></div></td>
				<!-- ENDIF -->
			</tr>
			<!-- ENDIF -->
			<!-- IF (DONATION_INDEX_ENABLE and S_DONATE_ENABLED and DONATION_INDEX_BOTTOM) and (DONATION_ACHIEVEMENT_ENABLE or DONATION_GOAL_ENABLE) -->
			<tr>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_DONATION_GOAL} <strong>{DONATION_GOAL}</strong> {DONATION_GOAL_CURRENCY}</td>
				<td style="width: 160px; font-size:12px;">{L_TOTAL_FORUM_DONATIONS} <strong>{DONATION_ACHIEVEMENT}</strong> {DONATION_GOAL_CURRENCY}</td>
				<td style="width: 160px; font-size:12px;"><!-- IF DONATION_GOAL_NUMBER < 100 -->{L_GOAL_REMAINING} <strong>{DONATION_GOAL_REST}</strong> {DONATION_GOAL_CURRENCY}<!-- ELSE --><em>{L_GOAL_REMAINING_ZERO}</em> <img src="{ROOT_PATH}images/forum_goal_ok.png" width="12" height="12" alt="" /><!-- ENDIF --></td>

				<!-- IF FGCSS_ENABLE -->
				<td><div class="meter <!-- IF FGPBA_ENABLE -->animate <!-- ENDIF --><!-- IF not FGPBS_ENABLE and not FGPBA_ENABLE -->nostripes <!-- ENDIF --><!-- IF DONATION_GOAL_NUMBER < 34 -->red<!-- ELSEIF DONATION_GOAL_NUMBER < 67 -->orange<!-- ELSE --><!-- ENDIF -->" style="font-weight: bold;"> <span style="max-width:97%; width:{DONATION_GOAL_NUMBER}%; padding-left:25px; font-size:10px;">{DONATION_GOAL_NUMBER}%<!-- IF FGPBA_ENABLE --><span></span><!-- ENDIF --></span></div></td>
				<!-- ELSE -->
				<td><div style="background:url('{ROOT_PATH}images/forum_goal_grey.png') repeat-x; background-color: #cccccc; border: 1px solid black; width:100%;"><div style="background:url('{ROOT_PATH}images/forum_goal_<!-- IF DONATION_GOAL_NUMBER < 34 -->red<!-- ELSEIF DONATION_GOAL_NUMBER < 67 -->yellow<!-- ELSE -->green<!-- ENDIF -->.png') repeat-x;background-color: #008040; color: white; font-weight:bold;<!-- IF DONATION_GOAL_NUMBER < 100 --> border-right: 1px solid black;<!-- ENDIF --> max-width:100%;  width:{DONATION_GOAL_NUMBER}%; height:12px;"><span style="padding-left:25px; font-size:10px; line-height:12px;">{DONATION_GOAL_NUMBER}%</span></div></div></td>
				<!-- ENDIF -->
			</tr>
			<!-- ENDIF -->
	  </tbody>
	</table>
	</li>
	</ul>
	<span class="corners-bottom"><span></span></span></div>
</div>

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by Solidjeuh »

Thank you! Just installed it
Works great!

http://i43.tinypic.com/160yi51.png

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by Flamingdevastation »

Code: Select all

// Empty sql cache for forums table because options changed
		$cache->destroy('sql', FORUMS_TABLE);
	}
$template->assign_vars(array(
	'FGCSS_ENABLE'	=> (!empty($config['forum_goals_css_enable'])) ? true : false,
	'FGPBA_ENABLE'	=> (!empty($config['forum_goals_animation_enable'])) ? true : false,
	'FGPBS_ENABLE'	=> (!empty($config['forum_goals_stripes_enable'])) ? true : false,
));

}

?>
Apparently something is wrong with this line:
$template->assign_vars(array(
I get this when I try to go to the board features. Read the error:
Screen shot 2011-12-04 at 8.46.05 PM.png
You do not have the required permissions to view the files attached to this post.

[ADDON] CSS3 Progress Bars (with eyecandy)

Post by Vox Populi »

Code: Select all

$template->assign_vars(array(
Possibly should be:

Code: Select all

$template->assign_vars(array)