SOLVED Countdown Breaking The Template


Goto page 1, 2  Next

Subject: Countdown Breaking The Template
Hello friends I'm trying to put that countdown in a custom block below the banner on my forum, this is the same countdown that has the portal phpbb3bbcodes. I downloaded the file lwtCountdown-htm and sent the folders images, js and style to the root folder of the forum (on localhost), I edited the file code index.html contained in the folder and renamed to countdown.html (code below) and sent to the folder styles/Milky_way/template, in the file overall_header.html I added <! - INCLUDE countdown.html -> below <! - INCLUDE menu_block.html ->, this worked but the template of the forum was aligned in the center (image below).


countdown.html
Code: [Download] [Hide] [Select]
<div class="tbl-h-l"><div class="tbl-h-r"><div class="tbl-h-c"><div class="tbl-title"><!-- title --></div></div></div></div>
<table class="tablebg" width="100%" cellpadding="0" cellspacing="0">
<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="style/main.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<font size="5" color="#0000FF"><strong> Texto acima do contador </strong></font><br />

<!-- Countdown dashboard start -->
<div id="countdown_dashboard" style="text-align: center; margin: 0 auto;">
<div class="dash weeks_dash">
<span class="dash_title">semanas</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>

<div class="dash days_dash">
<span class="dash_title">dias</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>

<div class="dash hours_dash">
<span class="dash_title">horas</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>

<div class="dash minutes_dash">
<span class="dash_title">minutos</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>

<div class="dash seconds_dash">
<span class="dash_title">segundos</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>

</div>
<!-- Countdown dashboard end -->

<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day': 7,
'month': 9,
'year': 2012,
'hour': 11,
'min': 0,
'sec': 0
}
});

$('#email_field').focus(email_focus).blur(email_blur);
$('#subscribe_form').bind('submit', function() { return false; });
});
</script>

<span class="corners-bottom"></span><br />
<tr><td class="cat-bottom"></td></tr>
</table>
<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c"></div></div></div>


To centralize the countdown I changed the file
style/main.css
Code: [Download] [Hide] [Select]
#countdown_dashboard {
height: 110px;
}


changed to:
Code: [Download] [Hide] [Select]
#countdown_dashboard {
height: 110px;
margin: 100px auto;
width: 700px;
}


This change centralizes the countdown but the template (bottom of the image) is broken and can not fix without removing the countdown, someone can help me please?


countdown.jpg
Description:  
Filesize: 243.73 KB
Viewed: 260 Time(s)

countdown.jpg


Profile PM  
Subject: Re: Countdown Breaking The Template
<!-- Countdown dashboard start -->
<div id="countdown_dashboard" style="text-align: center; margin: 0 auto;">

Make that:

text-align: left;

Or simply remove

text-align: center;

And ALL of this should be in the header before </head> and the paths set accordingly.

Code: [Download] [Hide] [Select]
<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="style/main.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


Also there is no such thing as </link>

It's,

<link rel="stylesheet" type="text/css" href="style/main.css" />

Edit:

You can also remove all of these:

language="Javascript"
____________________________________

And while your at it - - - :LOL:

You could remove this:

Code: [Download] [Hide] [Select]
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day': 7,
'month': 9,
'year': 2012,
'hour': 11,
'min': 0,
'sec': 0
}
});

$('#email_field').focus(email_focus).blur(email_blur);
$('#subscribe_form').bind('submit', function() { return false; });
});
</script>


REMOVE THESE from it
<script language="javascript" type="text/javascript">
</script>

And use the rest to create a .js file called countdown.js and put it in the same place as the other .js files

Then call it with this where you removed it from.

<script type="text/javascript" src="PATH TO SCRIPT/countdown.js"></script>

Because it's not nice to have raw javascript in the html if it can be avoided.

:mrviolet:

Profile PM  
Subject: Re: Countdown Breaking The Template
Thank mort, your tip did not solve the problem but helped me improve the codes of the countdown, which solved the problem was to delete the rows below the main.css file, now the countdown is already on the my online forum. what I want now is to fix the block borders the countdown to stay in standard milk way, I appreciate any hint about it?

find and delete on the file main.css
Code: [Download] [Hide] [Select]
body {
text-align: center;
}

Profile PM  
Subject: Re: Countdown Breaking The Template
If you had posted the whole "main.css" it would have been obvious to me where the problem was. ;)

One needs to be careful that there are no conflicting anchors in any .css they add to their styles because whichever .css gets read "Last" will be the one that will be applied to the whole theme. :(

As for your other question, you have two different image paths for the different "headers" ?

/forum/styles/milky_way/theme/images/tbl_h_l.gif
and
/forum/styles/milky_way/theme/images/bg_th.gif


So obviously the wrong vars (if any) are in place, or the MOD markup is wrong for the theme - and as I don't have phpBB3 installed or the MOD - I'll leave it to one of the phpBB3 freaks to help you sort it out. :P

Profile PM  
Subject: Re: Countdown Breaking The Template
I've had only a quick read TBH and I think for starters you did not fully understand Mort's suggestions.
The way it looks to me now is that you have 2 heads in use (one in overall_header and possibly one in the new included file)
The head code you now possibly have in the new included file should really be added in overall_header (between the head tags) and remove the double head tags you have added.

Further you should probably add the new include below:
Code: [Download] [Hide] [Select]
<div id="wrapcentre">


then you replace:
Code: [Download] [Hide] [Select]
<div class="tbl-h-l"><div class="tbl-h-r"><div class="tbl-h-c"><div class="tbl-title"><!-- title --></div></div></div></div>

by this:
Code: [Download] [Hide] [Select]
<div><div class="tbl-h-l"><div class="tbl-h-r"><div class="tbl-h-c"><div class="tbl-title"><h4>Texto acima do contador</h4></div></div></div></div>


and replace:
Code: [Download] [Hide] [Select]
<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c"></div></div></div>

by this:
Code: [Download] [Hide] [Select]
<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c"></div></div></div></div>


Last but not least you really need to update your style to match your phpbb3 version (but this is not related to your problem :roll: )

Goodluck and let us know how it worked out,
..The Freak? :LOL:

Subject: Re: Countdown Breaking The Template
PS ... since i made you add "Texto acima do contador" to the title area of the block you should also remove:

Code: [Download] [Hide] [Select]
<font size="5" color="#0000FF"><strong> Texto acima do contador </strong></font><br />

Subject: Re: Countdown Breaking The Template
mort wrote: [View Post]
As for your other question, you have two different image paths for the different "headers" ?

/forum/styles/milky_way/theme/images/tbl_h_l.gif
and
/forum/styles/milky_way/theme/images/bg_th.gif


So obviously the wrong vars (if any) are in place, or the MOD markup is wrong for the theme - and as I don't have phpBB3 installed or the MOD - I'll leave it to one of the phpBB3 freaks to help you sort it out. :P


I think this is purely portal related, there's not many sites that fully adjust portals to follow the forum-style :wink:

Subject: Re: Countdown Breaking The Template
When one sees useless markup like this.

<span style="float: center"> one has to wonder if any of it is any good? :(


Anyway, going with the existing markup (view-source) This should be awful close to making it the same as the rest of the portal. :?

Spoiler: [ Show ]

Last edited by mort on Wed 29 Aug, 2012 15:47; edited 3 times in total
Profile PM  
Subject: Re: Countdown Breaking The Template
Problem to that Mort, this counter is shown both in portal and forum pages, so if it matches the portal it won't match the other pages and vice versa :wink:

Subject: Re: Countdown Breaking The Template
Well, if it's being hooked into both phpBB3 and the stand-alone Portal for it, Then he's got problems. Because the whole portal would no doubt have to be re-written for Milky Way markup?

Or create some IF & ELSE arguments to accommodate both.

:mryellow:

Edit:

Wait a minute, he's only pulling this.

<!-- Countdown dashboard start -->

BLAH!

<!-- Countdown dashboard end -->


So you can have two sets of markup (templates).

One for the Portal, and one for the forum etc. :?:

Last edited by mort on Wed 29 Aug, 2012 15:23; edited 2 times in total
Profile PM  
Subject: Re: Countdown Breaking The Template
It just means every single portal block needs a few edits, but like I said ...not many webmasters do it the way it should be done :(

PS. offcours you are right about the " float center" thingy :wink:

Subject: Re: Countdown Breaking The Template
Read my edited post. ;)

Profile PM  
Subject: Re: Countdown Breaking The Template
I did :LOL:

What you suggest is surely possible but it doesn't create the unity it needs IMHO :oops: (unless we don't care about it at all)

Subject: Re: Countdown Breaking The Template
The penny just dropped. :oops:

I trust you mean he wants the portal to look the same as the Milky Way theme, and not the block he added to look the same as the rest of the portal. ?

Must be getting late!, or I'm getting too old for this? :LOL:

Profile PM  
Subject: Re: Countdown Breaking The Template
Hehehehe I'm in a different timezone

I think most important to The Crow is the width of the counter block (and maybe the vertical position), which is why I posted the edits above.

If he would like to correct the portal to follow the style then that would be a different topic.

Goto page 1, 2  Next

Page 1 of 2


  
You cannot post new topics
You cannot reply to topics
You cannot edit your posts
You cannot delete your posts
You cannot vote in polls
You cannot attach files
You can download files
You cannot post calendar events

   

This is a "Lo-Fi" version of our main content. To view the full version with more information, formatting and images, please click here.

Powered by Icy Phoenix based on phpBB
Generation Time: 0.0655s (PHP: 35% SQL: 65%)
SQL queries: 15 - Debug Off - GZIP Enabled