YaBB 2.6 Forum - Now on HTML5

(UTC)

YaBB 2.6 Forum › YaBB Development › HTML5 and CSS › Now on HTML5

‹ Previous Topic | Next Topic ›

Page Index Toggle

Pages: 1 2 [3]

Very Hot Topic (More than 25 Replies)

Now on HTML5 (Read 29833 times)

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Re: Now on HTML5 Reply #8 - Oct 21^st, 2014 at 8:42pm	Print Post
	MORE display.template Code $mysend_top = qq~ <form action="$scripturl?action=sendtopic2" method="post" name="sendtopic" onsubmit="return CheckSendTopicFields();"> -<table class="tabtitle" style="width:70%"> - <tr> - <td style="padding-left:20px"> - <img src="$micon_bg{'email'}" alt="" /> - <b>$sendtopic_txt{'707'}  « {yabb subject} »  $sendtopic_txt{'708'}</b> - </td> - </tr> -</table> -<table class="pad_3px" style="width:70%"> +<div style="margin: 0 15%"> + <div class="tabtitle" style="padding-left:1em; line-height:3em; vertical-align:bottom"> + <img src="$micon_bg{'email'}" alt="" /> <b>$sendtopic_txt{'707'}  « {yabb subject} »  $sendtopic_txt{'708'}</b> + </div> +<table class="pad_3px"> <colgroup> <col style="width:30%" /> <col style="width:70%" /> @@ -454,6 +363,7 @@ </tr> </tbody> </table> +</div> </form>{yabb my_jschecks}~; $mysend_valcode = qq~<tr> @@ -483,26 +393,14 @@ </tr>~; $my_guest_limit = qq~ -<table class="pad_4px" style="margin-bottom:10px"> - <tr> - <td class="tabtitle" style="height:22px"><img src="$micon_bg{'xx'}" alt=""> $display_txt{'guest_message'}</td> - </tr><tr> - <td class="windowbg"> - $display_txt{'guest_message_block'} - </td> - </tr> -</table>~; +<div class="tabtitle" style="line-height:3em; vertical-align:bottom"><img src="$micon_bg{'xx'}" alt=""> $display_txt{'guest_message'}</div> +<div class="windowbg padd_4px" style="margin-bottom:1em">$display_txt{'guest_message_block'}</div> +~; $guest_view_limit_w = qq~ -<table class="pad_4px" style="margin-bottom:10px"> - <tr> - <td class="tabtitle" style="height:22px"><img src="$micon_bg{'xx'}" alt=""> $display_txt{'guest_message'}</td> - </tr><tr> - <td class="windowbg"> - $display_txt{'guest_message_warn'} - </td> - </tr> -</table>~; +<div class="tabtitle" style="line-height:3em; vertical-align:bottom"><img src="$micon_bg{'xx'}" alt=""> $display_txt{'guest_message'}</div> +<div class="windowbg padd_4px" style="margin-bottom:1em">$display_txt{'guest_message_warn'}</div> +~; $my_bookmarks = qq~<div style="margin: 5px auto 5px;"><b>$display_txt{'bookmarks'}</b>: {yabb bookmarks}</div>~; @@ -516,9 +414,10 @@ $visel_3a = q~<td class="small" style="height: 14px; padding-left: 4px;">~; $visel_4 = q~</tr></table>~; -$gtalk = qq~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="$abbr_lang" lang="$abbr_lang" style="overflow-x:hidden;overflow-y:hidden"> +$gtalk = qq~<!DOCTYPE html> +<html lang="{yabb xml_lang}" style="overflow-x:hidden;overflow-y:hidden"> <head> + <meta charset="{yabb mycharset}"> <title>$display_txt{'google'}</title> {yabb style} <style type="text/css">

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Re: Now on HTML5 Reply #7 - Oct 21^st, 2014 at 8:40pm	Print Post
	Display Template: Code $mymove_top = qq~<!DOCTYPE html> -<html lang='en-US'> +<html lang="$abbr_lang"> <head> <title>$sstxt{'1'}</title> - <meta charset="{yabb mycharset}"> + <meta charset="$yymycharset"> <link rel="stylesheet" href="$yyhtml_root/Templates/Forum/$usestyle.css" type="text/css" /> <script type="text/javascript" src="$yyhtml_root/ubbc.js" ></script> </head> <body> - <div id="maincontainer"> - <div id="container"> + <div id="maincontainer"> <script type="text/javascript"> function NoPost(op) { if (document.getElementById("newboard").options[op].className == "nopost") { @@ -320,109 +259,79 @@ } } </script> -<form }" method="post" name="split_splice" onsubmit="return submitproc()" accept-charset="$yymycharset"> + <form }" method="post" name="split_splice" onsubmit="return submitproc()" accept-charset="$yymycharset"> <input type="hidden" name="formsession" value="{yabb formsession}" /> - <table class="tabtitle" style="width:90%"> - <tr> - <td style="padding-left:20px"><img src="$imagesdir/$admin_move" alt="$sstxt{'1'}" /> <b>$sstxt{'1'}</b></td> - </tr> - </table> - <table class="pad_8px cs_thin" style="width:90%"> - <tr> - <td class="catbg"><b>$sstxt{'2'}:</b></td> - </tr><tr> - <td class="windowbg"><b>$sstxt{'3'}</b></td> - </tr><tr> - <td class="windowbg2"> - <label for="oldposts">$sstxt{'14'}<br /> - <select name="oldposts" id="oldposts" size="$size1" multiple="multiple">{yabb postlist}</select><br /> - <span class="small">$sstxt{'14a'}</span></label> - </td> - </tr><tr> - <td class="windowbg"><b>$sstxt{'4'}</b></td> - </tr><tr> - <td class="windowbg2"> - <label for="leave">$sstxt{'15'}</label><br /> - <select name="leave" id="leave">{yabb leavelist}</select> - </td> - </tr><tr> - <td class="catbg"><b>$sstxt{'5'}:</b></td> - </tr><tr> - <td class="windowbg"><b>$sstxt{'6'}</b></td> - </tr><tr> - <td class="windowbg2"> - <label for="newcat">$sstxt{'16'}</label><br /> - <select name="newcat" id="newcat" onchange="document.split_splice.submit();">{yabb catlist}</select> - </td> - </tr><tr> - <td class="windowbg"><b>$sstxt{'7'}</b></td> - </tr><tr> - <td class="windowbg2"> - <label for="newboard">$sstxt{'17'}</label><br /> - <select name="newboard" id="newboard" onchange="NoPost(this.selectedIndex); document.split_splice.submit();">{yabb boardlist}</select> - </td> - </tr><tr> - <td class="windowbg"><b>$sstxt{'8'}</b></td> - </tr><tr> - <td class="windowbg2"> - <label for="newthread">$sstxt{'18'}</label><br /> - <select name="newthread" id="newthread" onchange="document.split_splice.submit();">{yabb threadlist}</select> - </td> - </tr> - {yabb my_output} - <tr> - <td class="windowbg"><b>$sstxt{'4'}</b></td> - </tr><tr> - <td class="windowbg2"> - <input type="checkbox" name="newinfo" id="newinfo" value="1"{yabb my_checked} /> <label for="newinfo">$sstxt{'15a'}</label> - </td> - </tr><tr> - <td class="catbg center"> - <input type="submit" name="ss_submit" value="$sstxt{'24'}" />     <input type="reset" value="$sstxt{'25'}" /> - </td> - </tr> - </table> - </form> - <br /> - <br /> + <div style="width:90%; margin:0 auto"> + <div class="tabtitle" style="line-height:3em; vertical-align:bottom; padding-left:.5em"><img src="$imagesdir/$admin_move" alt="$sstxt{'1'}" /> <b>$sstxt{'1'}</b></div> + <div class="catbg padd_8px"><b>$sstxt{'2'}:</b></div> + <div class="windowbg padd_8px"><b>$sstxt{'3'}</b></div> + <div class="windowbg2 padd_8px"> + <label for="oldposts">$sstxt{'14'}<br /> + <select name="oldposts" id="oldposts" size="{yabb size1}" multiple="multiple">{yabb postlist}</select> + <br /><span class="small">$sstxt{'14a'}</span></label> + </div> + <div class="windowbg padd_8px"><b>$sstxt{'4'}</b></div> + <div class="windowbg2 padd_8px"> + <label for="leave">$sstxt{'15'}</label><br /> + <select name="leave" id="leave">{yabb leavelist}</select> + </div> + <div class="catbg padd_8px"><b>$sstxt{'5'}:</b></div> + <div class="windowbg padd_8px"><b>$sstxt{'6'}</b></div> + <div class="windowbg2 padd_8px"> + <label for="newcat">$sstxt{'16'}</label><br /> + <select name="newcat" id="newcat" onchange="document.split_splice.submit();">{yabb catlist}</select> + </div> + <div class="windowbg padd_8px"><b>$sstxt{'7'}</b></div> + <div class="windowbg2 padd_8px"> + <label for="newboard">$sstxt{'17'}</label><br /> + <select name="newboard" id="newboard" onchange="NoPost(this.selectedIndex); document.split_splice.submit();">{yabb boardlist}</select> + </div> + <div class="windowbg padd_8px"><b>$sstxt{'8'}</b></div> + <div class="windowbg2 padd_8px"> + <label for="newthread">$sstxt{'18'}</label><br /> + <select name="newthread" id="newthread" onchange="document.split_splice.submit();">{yabb threadlist}</select> + </div> + {yabb my_output} + <div class="windowbg padd_8px"><b>$sstxt{'4'}</b></div> + <div class="windowbg2 padd_8px"> + <input type="checkbox" name="newinfo" id="newinfo" value="1"{yabb my_checked} /> <label for="newinfo">$sstxt{'15a'}</label> + </div> + <div class="catbg center" style="line-height:4em; vertical-align:bottom"> + <input type="submit" name="ss_submit" value="$sstxt{'24'}" />     <input type="reset" value="$sstxt{'25'}" /> + </div> </div> - </div> - </body> + </form> + <br /> + <br /> + </div> +</body> </html>~; -$mymove_output_a = qq~<tr> - <td class="windowbg"><b>$sstxt{'9'}</b></td> - </tr><tr> - <td class="windowbg2"> +$mymove_output_a = qq~ + <div class="windowbg padd_8px"><b>$sstxt{'9'}</b></div> + <div class="windowbg2 padd_8px"> <label for="newthread_subject">$sstxt{'20'}</label><br /> <input type="text" name="newthread_subject" id="newthread_subject" size="50" value="{yabb newthread_subject}" /> <input type="hidden" name="position" value="{yabb position}" /> <input type="hidden" name="old_position_thread" value="{yabb old_position_thread}" /> - </td> - </tr>~; + </div>~; -$mymove_output_b = qq~<tr> - <td class="windowbg"><b>$sstxt{'10'}</b></td> - </tr><tr> - <td class="windowbg2"> +$mymove_output_b = qq~ + <div class="windowbg padd_8px"><b>$sstxt{'10'}</b></div> + <div class="windowbg2 padd_8px"> <label for="position">$sstxt{'19'}</label><br /> <select name="position" id="position">{yabb positionlist}</select> <input type="hidden" name="newthread_subject" value="{yabb newthread_subject}" /> <input type="hidden" name="old_position_thread" value="{yabb newthread}" /> - </td> - </tr>~; + </div>~;

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Re: Now on HTML5 Reply #6 - Oct 21^st, 2014 at 8:38pm	Print Post
	Code Index: Display.template =================================================================== --- Display.template (revision 1598) +++ Display.template (working copy) @@ -32,7 +32,7 @@ ~; if($threadtools) { - $threadhandelstyle = qq~ class="post_tools center" style="width:100px;"~; + $threadhandelstyle = q~ class="post_tools center" style="width:100px"~; $my_fixed = q~ style="table-layout: fixed;"~; } else { $threadhandelstyle = qq~ style="text-align:right"~; @@ -47,20 +47,9 @@ {yabb guestview} <!-- Navigation Bar start --> <div class="navbarcontainer"> - <table> - <tr> - <td> - <div class="small"> - {yabb moderators} - </div> - </td> - <td class="bottom right"> - <span class="small"> - $display_txt{'lft'} {yabb prev} \| {yabb next} $display_txt{'rgt'} - </span> - </td> - </tr> - </table> + <div class="small padd_4px" style="float:left">{yabb moderators}</div> + <div class="bottom right small padd_4px">$display_txt{'lft'} {yabb prev} \| {yabb next} $display_txt{'rgt'}</div> + <div class="clear"></div> </div> <!-- Navigation Bar end --> <!-- Poll start --> @@ -67,7 +56,6 @@ {yabb pollmain} <!-- Poll end --> <!-- Threads Button Bar start --> -<div class="displaycontainer"> <table class="tabtitle pad_4px"$my_fixed> <tr> <td>{yabb pageindex top}</td> @@ -78,19 +66,10 @@ <td style="width: 1%;"> </td> </tr> </table> -</div> <!-- Threads Button Bar end --> <!-- Threads Title Bar start --> -<div class="displaycontainer"> - <table class="pad_4px"> - {yabb topicviewers} - <tr> - <td class="titlebg"> - {yabb threadimage} {yabb threadurl} ($display_txt{'641'} {yabb views} $display_txt{'642'}) - </td> - </tr> - </table> -</div> + {yabb topicviewers} + <div class="titlebg padd_4px">{yabb threadimage} {yabb threadurl} ($display_txt{'641'} {yabb views} $display_txt{'642'})</div> <!-- Threads Title Bar end --> <!-- Threads block start, should be left as is --> {yabb multistart} @@ -98,8 +77,6 @@ {yabb multiend} <!-- Threads block end, should be left as is --> <!-- Threads Button Bar start --> -<div class="displaycontainer"> -<div style="clear: both;"></div> <table class="tabtitle-bottom pad_4px"$my_fixed> <tr> <td>{yabb pageindex bottom}</td> @@ -110,31 +87,11 @@ <td style="width:1%"> </td> </tr> </table> -</div> <!-- Threads Button Bar end --> -<!-- Navigation Bar start --> -<div class="navbarcontainer"> - <table> - <tr> - <td class="right vtop small"> - $display_txt{'lft'} {yabb prev} \| {yabb next} $display_txt{'rgt'} - </td> - </tr> - </table> -</div> -<!-- Navigation Bar end --> -<!-- Social Bookmarks start --> +<div class="navbarcontainer right small">$display_txt{'lft'} {yabb prev} \| {yabb next} $display_txt{'rgt'}</div> {yabb bookmarks} -<!-- Social Bookmarks end --> <!-- Threads Admin Button Bar start --> -<div style="margin: 4px;"> - <table class="pad_4px cs_thin"> - <tr> - <td class="vtop small">{yabb adminhandellist} - </td> - </tr> - </table> -</div> +<div class="small padd_4px" style="margin: 4px;">{yabb adminhandellist}</div> <!-- Threads Admin Button Bar end --> ~; @@ -151,13 +108,13 @@ ~; if($posttools) { - $posthandelstyle = qq~ class="post_tools center dividerbot" style="width:100px; height: 2em; vertical-align:middle"~; + $posthandelstyle = q~ class="post_tools center dividerbot" style="width:100px; height: 2em; vertical-align:middle"~; $posthandeladmin = qq~<div style="float:right; vertical-align:bottom; height:100%;">{yabb admin}</div>~; $postcol= 3; - $padd_right = '; padding-right:0; padding-bottom:0; padding-top:0; vertical-align:middle'; + $padd_right = q~; padding-right:0; padding-bottom:0; padding-top:0; vertical-align:middle~; } else { - $posthandelstyle = qq~ class="dividerbot" style="text-align:right; height:2em" colspan="2"~; + $posthandelstyle = q~ class="dividerbot" style="text-align:right; height:2em" colspan="2"~; $posthandellist .= qq~ {yabb admin}~; $postcol = 3; $posttoola = ' width:1%'; @@ -172,14 +129,14 @@ $messageblock = qq~ <div class="displaycontainer"> - <div class="postcontainer"> - <table class="bordercolor pad_4px" style="table-layout:fixed;"> - <colgroup> + <article class="postcontainer"> + <table class="bordercolor pad_4px fixed"> + <colgroup> <col style="width:13em" /> <col style="width:auto" /> <col style="width:auto" /> <col style="width:auto" /> - </colgroup> + </colgroup> <tbody> <tr class="{yabb css}"> <td class="vtop post-userinfo" rowspan="4"> @@ -237,7 +194,7 @@ </div> </td> </tr><tr> - <td class="{yabb css} bottom" style="background-color: #D7DBEA;"> + <td class="{yabb css} bottom post-userinfo"> <span onclick="toTop(0)" class="cursor"><img src="$top_img" alt="$display_txt{'643'}" title="$display_txt{'643'}" /></span> </td> <td class="{yabb css} bottom dividertop" colspan="$postcol"> @@ -251,67 +208,49 @@ </tr> </tbody> </table> - </div> + </article> </div> ~; #Recent Posts/Topics $myrecent = qq~ -<table class="tabtitle"> - <colgroup> - <col style="width:5%" /> - <col style="width:95%" /> - </colgroup> - <tbody> - <tr> - <td class="center h_30px">{yabb counter}</td> - <td> <a href="$scripturl?catselect={yabb catbrd}"><span class="under">{yabb catname}</span></a>{yabb boardtree} / <a href="$scripturl?num={yabb tnum}"><span class="under">{yabb msub}</span></a><br /> -  <span class="small">$maintxt{'30'}: {yabb mdate}</span> </td> - </tr> - </tbody> -</table> -<table style="table-layout: fixed"> - <tr> - <td> - <table class="titlebg"> - <tr class="search"> - <td style="padding-left:5px">$maintxt{'109'} {yabb tname} \| $maintxt{'197'} {yabb mname}</td> - {yabb my_tstate} - </tr> - </table> - </td> - </tr><tr> - <td class="windowbg2 vtop h_80px" style="padding:5px"> - <div class="message" style="float: left; width: 99%; overflow: auto;">{yabb message}</div> - </td> - </tr> -</table><br />~; +<div class="tabtitle"> + <div class="center" style="float:left; width:5%; line-height:3em; vertical-align:top">{yabb counter}</div> + <div class="padd_4px" style="float:right; width:94%"> <a href="$scripturl?catselect={yabb catbrd}"><span class="under">{yabb catname}</span></a>{yabb boardtree} / <a href="$scripturl?num={yabb tnum}"><span class="under">{yabb msub}</span></a> + <br /> <span class="small">$maintxt{'30'}: {yabb mdate}</span> </div> + <div class="clear"></div> +</div> +<div class="titlebg"> + <div class="search" style="padding:2px 5px; float:left">$maintxt{'109'} {yabb tname} \| $maintxt{'197'} {yabb mname}</div> + {yabb my_tstate} + <div class="clear"></div> +</div> +<div class="windowbg2 h_80px" style="padding:5px; margin-bottom:.5em"> + <div class="message" style="float: left; width: 99%; overflow: auto;">{yabb message}</div> +</div> +~; $myrecent_mess = qq~ - <td class="right">  - <a href="$scripturl?board=$board;action=post;num={yabb tnum}/{yabb c}#{yabb c};title=PostReply">$img{'reply'}</a>$menusep<a href="$scripturl?board=$board;action=post;num={yabb tnum};quote={yabb c};title=PostReply">$img{'recentquote'}</a>$notify   - </td>~; + <div class="right" style="float:right">  + <a href="$scripturl?board=$board;action=post;num={yabb tnum}/{yabb c}#{yabb c};title=PostReply">$img{'reply'}</a>$menusep<a href="$scripturl?board=$board;action=post;num={yabb tnum};quote={yabb c};title=PostReply">$img{'recentquote'}</a>$notify   + </div>~; -$mydisp_topicview = qq~ <tr> - <td class="windowbg"> - $display_txt{'644'} ({yabb topviewers}): {yabb template_viewers} - </td> - </tr>~; +$mydisp_topicview = qq~ + <div class="titlebg padd_4px">$display_txt{'644'} ({yabb topviewers}): {yabb template_viewers}</div>~; -$mydisp_modify_message = qq~ +$mydisp_modify_message = q~ ~;

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Re: Now on HTML5 Reply #5 - Oct 21^st, 2014 at 8:37pm	Print Post
	Code Index: Calendar.template =================================================================== --- Calendar.template (revision 1598) +++ Calendar.template (working copy) @@ -3,7 +3,7 @@ ############################################################################### # YaBB: Yet another Bulletin Board # # Open-Source Community Software for Webmasters # -# Version: YaBB 2.6.1 # +# Version: YaBB 2.6.2 # # Packaged: September 1, 2014 # # Distributed by: http://www.yabbforum.com # # =========================================================================== # @@ -36,10 +36,10 @@ $mycalout_gottobox = qq~ <table class="tabtitle tabtitle-text"> - <colgroup> + <colgroup> <col style="width:30%" /> <col style="width:70%" /> - </colgroup> + </colgroup> <tr> <td style="padding-left:1%"> <!--<img src="$yyhtml_root/Templates/Forum/default/$cal_eventcal" alt="" /> --> $var_cal{'caltitle'} @@ -158,7 +158,7 @@ </tr> </table> {yabb my_postsection_ajx} -<table class="bordercolor" style="table-layout: fixed;"> +<table class="bordercolor fixed"> <colgroup> <col style="width:160px" /> <col style="width:auto" />

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Re: Now on HTML5 Reply #4 - Oct 21^st, 2014 at 8:35pm	Print Post
	Code Index: BoardIndex.template =================================================================== --- BoardIndex.template (revision 1587) +++ BoardIndex.template (working copy) @@ -3,7 +3,7 @@ ############################################################################### # YaBB: Yet another Bulletin Board # # Open-Source Community Software for Webmasters # -# Version: YaBB 2.6.1 # +# Version: YaBB 2.6.2 # # Packaged: September 1, 2014 # # Distributed by: http://www.yabbforum.com # # =========================================================================== # @@ -47,20 +47,15 @@ get_micon(); $boardindex_template .= qq~ <!-- Board Index Button Bar start --> - <table class="bordercolor pad_4px"> - <colgroup> - <col style="width:50%" span="2" /> - </colgroup> - <tr class="windowbg"> - <td class="small"> - <span class="small bold"><img src="$imagesdir/$newload{'brd_new'}" id="no_edit" alt="$boardindex_txt{'333'}" title="$boardindex_txt{'333'}" /> $boardindex_txt{'333'}   - <img src="$imagesdir/$newload{'brd_old'}" alt="$boardindex_txt{'334'}" title="$boardindex_txt{'334'}" /> $boardindex_txt{'334'}</span> - </td><td class="right small"> - {yabb boardhandellist} - </td> - </tr> - </table> -<!-- Board Index Button Bar end --> + <div class="windowbg"> + <div class="small padd_4px" style="float:left; line-height:2em; vertical-align:bottom; padding-left:10px"> + <span class="small bold"><img src="$imagesdir/$newload{'brd_new'}" id="no_edit" alt="$boardindex_txt{'333'}" title="$boardindex_txt{'333'}" /> $boardindex_txt{'333'}   + <img src="$imagesdir/$newload{'brd_old'}" alt="$boardindex_txt{'334'}" title="$boardindex_txt{'334'}" /> $boardindex_txt{'334'}</span> + </div> + <div class="small padd_4px" style="float:right; text-align:right">{yabb boardhandellist}</div> + <div class="clear"></div> + </div> + <!-- Board Index Button Bar end --> ~; } @@ -67,16 +62,7 @@ if(!$subboard_sel) { $boardindex_template .= qq~ <!-- Info Center block start --> - <table class="tabtitle tabtitle-text" style="margin-top:1em"> - <colgroup> - <col style="width:1%" /> - <col style="width:99%" /> - </colgroup> - <tr> - <td> </td> - <td>$boardindex_txt{'200'}</td> - </tr> - </table> + <div class="tabtitle tabtitle-text" style="margin-top:1em; padding-left:1%; line-height:3em; vertical-align:bottom">$boardindex_txt{'200'}</div> <table class="bordercolor pad_4px cs_thin"> <colgroup> <col style="width:${brdpicwidth}px" /> @@ -112,16 +98,7 @@ </td> </tr> </table> - <table class="tabtitle tabtitle-text" style="margin-top:10px"> - <colgroup> - <col style="width:1%" /> - <col style="width:99%" /> - </colgroup> - <tr> - <td> </td> - <td>$boardindex_txt{'158'}</td> - </tr> - </table> + <div class="tabtitle tabtitle-text" style="margin-top:1em; padding-left:1%; line-height:3em; vertical-align:bottom">$boardindex_txt{'158'}</div> <table class="bordercolor pad_4px cs_thin mar-bot"> <colgroup> <col style="width:${brdpicwidth}px" /> @@ -131,7 +108,7 @@ <td class="windowbg info-center center"> <img src="$imagesdir/$brd_online" alt="" /> </td> - <td class="windowbg2 info-center"> + <td class=" windowbg2 info-center"> <div class="small" style="float: left; width: 59%; text-align: left;"> {yabb users}<br /> {yabb onlineusers} @@ -143,6 +120,7 @@ <div style="float: left; width: 40%; text-align: left;"> {yabb groupcolors} </div> + <div class="clear"></div> </td> </tr> </table> @@ -163,15 +141,13 @@ $catheader = qq~ <table class="tabtitle tabtitle-text"> <colgroup> - <col style="width:1%" /> - <col style="width:59%" /> + <col style="width:60%" /> <col style="width:8%" /> <col style="width:8%" /> <col style="width:24%" /> </colgroup> <tr> - <td> </td> - <td>{yabb catimage} {yabb catrss} {yabb catlink}</td> + <td style="padding-left:1%">{yabb catimage} {yabb catrss} {yabb catlink}</td> <td class="center">$boardindex_txt{'330'}</td> <td class="center">$boardindex_txt{'21'}</td> <td class="center">$boardindex_txt{'22'}</td> @@ -178,10 +154,9 @@ </tr> </table> <table {yabb colboardtable} class="bordercolor pad_4px cs_thin mar-bot"> - <tr><td style="display:none" colspan="5"> </td></tr> - {yabb newmsg start}{yabb newmsg icon}{yabb newmsg}{yabb newmsg end} + <tr><td style="display:none"> </td></tr>{yabb newmsg start}{yabb newmsg icon}{yabb newmsg}{yabb newmsg end} </table> - <table {yabb boardtable} class="bordercolor pad_4px cs_thin mar-bot;" style="table-layout:fixed"> + <table {yabb boardtable} class="bordercolor pad_4px cs_thin mar-bot fixed"> <colgroup> <col style="width:${brdpicwidth}px" /> <col style="width:auto" />

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Re: Now on HTML5 Reply #3 - Oct 21^st, 2014 at 8:32pm	Print Post
	Code Index: Bdaylist.template =================================================================== --- Bdaylist.template (revision 1583) +++ Bdaylist.template (working copy) @@ -41,21 +41,16 @@ <td class="windowbg2 center">{yabb sternzeichen}</td>~; $mybdlist_calgoto = qq~ -<table class="tabtitle tabtitle-text"> - <colgroup> - <col style="width:30%" /> - <col style="width:70%" /> - </colgroup> - <tr> - <td style="padding-left:1%">$var_cal{'caltitle'}</td> - <td class="right" style="padding-right:1%">{yabb calgotobox}</td> - </tr> -</table> -<table class="bordercolor pad_4px cs_thin"> - <tr> - <td class="windowbg"> - <br /> - <span class="small">$var_cal{'calbirthdayinfo'}<br /><br /> +<div class="tabtitle tabtitle-text"> + <div style="float:left; padding-left:1%; width:29%; line-height:3em; vertical-align:bottom">$var_cal{'caltitle'}</div> + <div class="right" style="float:right; padding: 2px 1% 1px 0; width:68%">{yabb calgotobox}</div> + <div class="clear"></div> +</div> +<div class="windowbg small padd_8px"> + $var_cal{'calbirthdayinfo'} + {yabb my_bdtoday} +</div> +<div class="catbg center padd_4px" style="font-size:110%"><b>$var_cal{'calbirthdays'}</b></div> ~; $mybdlist_viewmont2 = qq~ @@ -63,16 +58,9 @@ {yabb cal_col} <tr> <td class="titlebg" colspan="{yabb cal_colspan}"> - <table> - <colgroup> - <col style="width:50%" /> - <col style="width:50%" /> - </colgroup> - <tr> - <td class="left"><img class="bottom" src="$imagesdir/$cal_eventbd" alt="$var_cal{calbirthday}" /> <b>{yabb calmont}</b> ({yabb countmont}) {yabb page}</td> - <td class="right" style="padding-right:1%">{yabb input_letters}</td> - </tr> - </table> + <div class="left" style="float:left; padding: 2px 0 1px 1%"><img class="bottom" src="$imagesdir/$cal_eventbd" alt="$var_cal{calbirthday}" /> <b>{yabb calmont}</b> ({yabb countmont}) {yabb page}</div> + <div class="right" style="float:right; padding: 2px 1% 1px 0">{yabb input_letters}</div> + <div class="clear"></div> </td> </tr> {yabb cal_info_header} @@ -81,15 +69,9 @@ ~; $mybdlist_nobd = qq~ -<table class="pad_4px cs_thin"> - <tr> - <td class="titlebg" colspan="{yabb cal_colspan}"> - <img src="$imagesdir/$cal_info" alt="$var_cal{calbirthday}" /> <b>$var_cal{'calbirthday1'}</b> - </td> - </tr><tr> - <td class="windowbg2" colspan="{yabb cal_colspan}">{yabb nobdays}</td> - </tr> -</table>~; + <div class="titlebg padd_4px"><img src="$imagesdir/$cal_info" alt="$var_cal{calbirthday}" /> <b>$var_cal{'calbirthday1'}</b></div> + <div class="windowbg2 padd_4px">{yabb nobdays}</div> +~; $mybdlist_calinfoheader = qq~<tr> @@ -107,27 +89,12 @@ <td class="windowbg2 center">{yabb cdate}</td> </tr>~; -$mybdlist_sort = qq~ - </span> - </td> - </tr><tr> - <td class="catbg center" style="font-size:110%"><b>$var_cal{'calbirthdays'}</b></td> -~; - $mybdlist_notbmember = qq~<tr> <td class="windowbg2 center" colspan="{yabb cal_colspan}"><b><i>$var_cal{'calbirthday1'}</i></b></td> </tr>~; -$mybdlist_alpha_c = qq~ - </tr> -{yabb viewbirthdays} -</table> +$mybd_months = qq~ +<div class="catbg center padd_4px" style="font-size:110%">{yabb bdmonthlink}\|</div> ~; -$mybd_months = qq~ - </tr><tr> - <td class="catbg center" style="font-size:110%"> - {yabb bdmonthlink}\| -</td>~; - -1; \ No newline at end of file +1;

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Re: Now on HTML5 Reply #2 - Oct 21^st, 2014 at 8:25pm	Print Post
	Okay - default.html Code Index: default.html =================================================================== --- default.html (revision 1591) +++ default.html (working copy) @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang='{yabb xml_lang}'> +<html lang="{yabb xml_lang}"> <head> <!-- YaBB 2.6.2 $Revision$ --> <meta charset="{yabb mycharset}"> @@ -7,12 +7,12 @@ {yabb style} <script type="text/javascript" src="{yabb html_root}/YaBB.js"></script> <script type="text/javascript" src="{yabb html_root}/cache.js"></script> + <!--[if lt IE 9]> + <script type="text/javascript" src="{yabb html_root}/element.js"></script> + <![endif]--> <script type="text/javascript"> {yabb javascript} {yabb javascripta} - if (top.location != self.location) { - top.location = self.location.href; - } </script> {yabb syntax_js} {yabb grayscript} @@ -26,89 +26,46 @@ </div> <div id="maincontainer"> <div id="container"> - <table class="menutop" style="table-layout:fixed"> - <colgroup> - <col style="width:auto" /> - <col style="width:250px" /> - <col style="width:auto" /> - </colgroup> - <tr> - <td class="small h_23px" style="padding-left:1%"><div id="yabbclock">{yabb time}</div></td> - <td class="small">{yabb langChooser}</td> - <td class="right vtop">{yabb searchbox} - <div class="yabb_rss">{yabb rss}</div> - </td> - </tr> - </table> - <table id="header" class="pad_4px"> - <colgroup> - <col style="width:1%" /> - <col style="width:auto" /> - <col style="width:460px" /> - </colgroup> - <tr> - <td class="vtop h_40px"> </td> - <td>{yabb uname}<br />{yabb im}{yabb admin_alert}</td> - <td class="right" rowspan="2"> - <a href="http://www.yabbforum.com"><img src="{yabb images}/yabblogo_26.png" alt="YaBB - Yet another Bulletin Board" title="YaBB - Yet another Bulletin Board" /></a> - </td> - </tr><tr> - <td class="vtop h_60px"> </td> - <td class="small vtop">{yabb newstitle} <span id="newsdiv"></span> - </td> - </tr> - </table> - <div id="fixmenu" style="position: relative; width:100%; z-index: 1000; top: 0;"> - <table> - <colgroup> - <col style="width:auto" /> - <col style="width:100px" /> - </colgroup> - <tr> - <td class="tabmenu"> + <div class="menutop" style="height:2.5em"> + <div class="small" style="float:left; padding-left:1%; line-height:2.5em; vertical-align:middle" id="yabbclock">{yabb time}</div> + <div style="float:right">{yabb searchbox} <div class="yabb_rss">{yabb rss}</div></div> + <div class="small center">{yabb langChooser}</div> + <div class="clear"></div> + </div> + <header id="header" style="padding-left:1%"> + <div class="padd_4px" style="float:left; min-height:5em; line-height:1.5em"> + {yabb uname}<br />{yabb im}{yabb admin_alert} + <br /><span class="small" style="line-height:3em; vertical-align:bottom">{yabb newstitle} <span id="newsdiv"></span></span> + </div> + <div style="float:right; padding:4px"> + <a href="http://www.yabbforum.com"><img src="{yabb images}/yabblogo_26.png" alt="YaBB - Yet another Bulletin Board" title="YaBB - Yet another Bulletin Board" /></a> + </div> + <div class="clear"></div> + </header> + <nav id="fixmenu" class="tabmenu" style="position: relative; width:100%; z-index: 1000; top: 0;"> + <div class="tabmenu" style="float:left"> {yabb tabmenu} - <div class="navmenu" id="navmen" style="display: none;"> - <img src="{yabb images}/back_to_top.png" id="navtotop" alt="{yabb fixtop}" title="{yabb fixtop}" onclick="toTop(0)" class="cursor" style="margin-top:5px;" /> - </div> - </td> - <td class="tabmenu vtop">{yabb tabadd}</td> - </tr> - </table> - </div> + <div class="navmenu" id="navmen" style="display: none;"> + <img src="{yabb images}/back_to_top.png" id="navtotop" alt="{yabb fixtop}" title="{yabb fixtop}" onclick="toTop(0)" class="cursor" style="margin-top:5px;" /> + </div> + </div> + <div class="tabmenu vtop" style="width:100px; float:right">{yabb tabadd}</div> + <div class="clear"></div> + </nav> {yabb addtab} <div id="brcrumb" style="top: 0;"> - <table> - <colgroup> - <col style="width:2%" /> - <col style="width:98%" /> - </colgroup> - <tr> - <td class="nav h_30px"> </td> - <td class="nav">{yabb boardlink} {yabb navigation} <a href="#bottom">{yabb bottom}</a></td> - </tr> - </table> + <div class="nav" style="padding-left:2%; width:98%; line-height:3em; vertical-align:middle">{yabb boardlink} {yabb navigation} <a href="#bottom">{yabb bottom}</a>{yabb recentmark}</div> </div> <div class="yabb_main">{yabb main} <div class="yabb_forumjump">{yabb forumjump} </div> </div> - <div class="mainbottom"> - <table> - <colgroup> - <col style="width:2%" /> - <col style="width:98%" /> - </colgroup> - <tr> - <td> </td> - <td><span id="bottom">{yabb navback}</span></td> - </tr> - </table> - </div> + <nav class="mainbottom" style="padding-left:1%; width:99%" id="bottom">{yabb navback}</nav> </div> - <div class="copyright" style="width: 100%; text-align: center;"> + <div class="copyright center" style="width: 100%"> <br /> {yabb copyright}<br />{yabb freespace}<br /> <a href="http://validator.w3.org/feed/" target="_blank"><img src="{yabb images}/valid-rss.png" alt="Valid RSS" title="Valid RSS" height="18" /></a> - <a href="http://validator.w3.org/check/referer" target="_blank"><img src="{yabb images}/xhtml.gif" alt="Valid XHTML" title="Valid XHTML" /></a> + <a href="http://validator.w3.org/check/referer" target="_blank">HTML 5</a> <a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img src="{yabb images}/css.gif" alt="Valid CSS" title="Valid CSS" /></a> <a href="http://www.perl.org" target="_blank"><img src="{yabb images}/perl.gif" alt="Powered by Perl" title="Powered by Perl" /></a> <a href="http://sourceforge.net/projects/yabb/" target="_blank"><img src="{yabb images}/sf.gif" alt="Source Forge" title="Source Forge" /></a><br /> In order to keep from completely frustrating the templaters we may just go from 2.6.1 to 2.8.0.

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Monni Senior Member Offline Min izāmō Posts: 413 Location: Kaarina, Finland Joined: Jul 16^th, 2014 Gender:	Re: Now on HTML5 Reply #1 - Oct 21^st, 2014 at 8:15pm	Print Post
	You should post the changes that you have made, so people can see what are the most important adjustments that needs to be done on custom templates so people can test the various parts of their own forums before it is all updated on repository...


	GTalkSkype/VoIP Facebook Twitter YouTube ICQ YIM IP Logged

Dandello Forum Administrator Offline I love YaBB 2.7! Posts: 1759 Location: The Land of YaBB Joined: Feb 12^th, 2014 Gender:	Now on HTML5 Oct 20^th, 2014 at 5:06am	Print Post
	You'll see some slight differences in vertical spacing as we also move to using ems for font sizes and vertical spacing. The marquee tag is deprecated and throws errors when validated, so replacing the marquee with javascript is probably a good idea - if it works. Single row/cell tables have been replaced by divs (saving on quite a few lines of html). I found some 'hard-coded' colors and the css file needs to be cleaned up and reorganized a bit.

	Perfection is not possible. Excellence, however, is excellent.
	WWW IP Logged

Page Index Toggle

Pages: 1 2 [3]

‹ Previous Topic | Next Topic ›

« Board Index ‹ Board Top

Top

YaBB 2.6 Forum » Powered by YaBB 2.6.12!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid XHTML

Valid CSS

Powered by Perl

Source Forge