The XHTML default template is back and the HTML5 is now an optional template. I still have some tweaking to do.

The UBBC folders have been moved out of Templates/Forum/ and into yabbfiles/UBBCbuttons so there only needs to be one copy of the UBBC buttons.
I think the 'new message' button can be styled using just css.

Dandello wrote on Oct 28^th, 2014 at 8:32pm:


We always learn something new by making mistakes...

I found the tag mismatch - I had moved the table-display styling into a class in the css file - but for the Calendar roll-up it needed to remain as a style rather than a class. 

Dandello wrote on Oct 28^th, 2014 at 2:03pm:


It obviously needs complete redesign as it is using single column table and we already decided that was bad design idea...

The Calendar XHTML rollup doesn't work in in HTML5 - probably a tag mismatch. However the Marquee rollup does work.  Go figure, the better one is the one that's deprecated.

I was playing with the top stuff using spans...

 <div class="menutop">
             <span class="small" style="display: inline-block; padding-left:1%; width: 20%; line-height:2.6em; vertical-align: top;" id="yabbclock">23. lokakuuta 2014 klo 00:52<script type="text/javascript">
 WriteClock('yabbclock','23. lokakuuta 2014 klo ',' ');
 </script></span>
             <span class="small center" style="display: inline-block; width: 57%; line-height:2.6em; vertical-align: top;">Change Template:&nbsp;
             <form name="styleswitcher" action="http://yabbforumsoftware.com/cgi-bin/yabb2/YaBB.pl" method="post">
             <input type="hidden" name="redir" value="">
             <select name="template" onchange="submit()">
         <option value="Forum default" selected="selected">Forum default</option>
 <option value="New Fall">New Fall</option>

             </select>
              <input type="hidden" name="formsession" value="477F5C5C3E5A7B687B72716E737B706A3E387F736E253E53717A6D5377757F521E0">
                     </form>
         </span>
   <span style="display: inline-block; width: 20%; padding-right: 1%">
 <span class="yabb_searchbox">
                     <form action="http://yabbforumsoftware.com/cgi-bin/yabb2/YaBB.pl?action=search2" method="post" accept-charset="UTF-8">
                         <input type="hidden" name="searchtype" value="allwords">
                         <input type="hidden" name="userkind" value="any">
                         <input type="hidden" name="subfield" value="on">
                         <input type="hidden" name="msgfield" value="on">
                         <input type="hidden" name="age" value="31">
                         <input type="hidden" name="oneperthread" value="1">
                         <input type="hidden" name="searchboards" value="!all">
                         <input type="text" name="search" size="16" id="search1" value="Haku" style="font-size: 11px;" onfocus="txtInFields(this, 'Haku');" onblur="txtInFields(this, 'Haku')">
                         <input type="image" src="http://yabbforumsoftware.com/yabbfiles/Templates/Forum/default/search.png" alt="Viestit ei vanhempia kuin  31 päivää" title="Viestit ei vanhempia kuin 31 päivää" style="background-color: transparent; margin-right: 5px; vertical-align: middle;">
                      <input type="hidden" name="formsession" value="477F5C5C3E5A7B687B72716E737B706A3E387F736E253E53717A6D5377757F521E0">
                     </form></span><span class="yabb_rss"><a href="http://yabbforumsoftware.com/cgi-bin/yabb2/YaBB.pl?action=RSSrecent" target="_blank"><img src="http://yabbforumsoftware.com/yabbfiles/Templates/Forum/default/rss.png" alt="RSS-syöte" title="RSS-syöte"></a></span>


   </span>
             <div class="clear"></div>
         </div>
  

This is uncleaned raw html straight from debugger session

20%+57%+20% = 97%, which was few pixels too small.

Dandello wrote on Oct 23^rd, 2014 at 5:28pm:


Eh... I used to be member of the IE beta team IE is the main browser using Trident engine

I think the html5 version may be offered as an add-on template rather than main-line code for some time. However, working on it has pointed out some interesting issues in terms of things being hard-coded in Mods.

There are a lot of unexpected things that have shown up in this particular exercise.
It's also been pointed out that I may have been moving too fast on this. So expect some changes as I rearrange things like templates and do some work in the AdminCenter.

Monni wrote on Oct 23^rd, 2014 at 4:45pm:

Good advice. 

Looks like a few of the "divs" are too wide... SlimBrowser uses Trident engine, which uses implicit padding of elements, and that creates weird effects when you assume the whole width of screen or outer element is 100%, when it actually is slightly less, somewhere around 99.4% depending on number of elements in a horizontal row and width of the window.

Sometimes using spans instead of divs makes things look better, especially if everything is supposed to be fit and align on same physical horizontal row.

Moving to divs creates some interesting vertical alignment issues.
I'm still tweaking this one.

Hello

I know  .... SlimBrowser is 

But new Template looks funywith SlimBrowser 
With Chrome looks ok 

lg XTC

I just lost my testbed server so I can't do anything until that's squared away.
Edited:

Dandello wrote on Oct 21^st, 2014 at 8:25pm:


Or 2.7.0 ... I went through the patches today... Some changes looked weird (for example Polls) and some just simply incomplete (for example Registration)... I can't make a clean diff until the code is on subversion, the diff would in current state be too big.

Ok... I will import the changes to my local checkout tree after I come back from work and look at it more.... It's getting really late here...

This one needs more work to get the font sizes and other heights to be more responsive.

Index: default.css
 ===================================================================
 --- default.css	(revision 1763)
 +++ default.css	(working copy)
 @@ -141,6 +141,10 @@
      border-spacing: 1px;
  }

 +table.fixed {
 +    table-layout:fixed;
 +}
 +
  #maincontainer {
      border-top: 0;
      margin-bottom: 10px;
 @@ -234,7 +238,7 @@
  }

  .menutop {
 -    height: 25px;
 +    height: 2.25em;
      background-color: #6499d0 ;
      font-weight: bold;
      text-align: left;
 @@ -242,7 +246,7 @@
  }

  .mainbottom {
 -    height: 25px;
 +    height: 2.25em;
      width: 100%;
      background-color: #2d2d2d;
      font-weight: bold;
 @@ -783,7 +787,7 @@

  .displaycontainer {
      background-color: #fff;
 -    padding: 1px;
 +    padding: 1px 0;
      width: 100%;
  }

 @@ -1291,7 +1295,6 @@
      display: inline-block;
  }

 -
  span.ubbcbutton {
      height: 22px;
      width: 23px;
 @@ -1305,6 +1308,7 @@
      display: inline-block;
  	float:left;
  }
 +
  .ubbcbuttonback {
  	background-image: url(./default/UBBC/ubbc2.png);
  }
 @@ -1971,10 +1975,13 @@
      margin: 0 auto;
  }

 +.system-body {
 +    margin: 0 auto;
 +    width: 80%;
 +}
 +
  .system-info {
 -    margin: 0 auto;
      height: 35px;
 -    width: 80%;
      font-size: 12px;
      font-family: Verdana, Arial, Sans-Serif;
      color: #eee;
 @@ -1983,9 +1990,6 @@
      -moz-border-radius: 5px 5px 0 0;
      border-radius: 5px 5px 0 0;
      border-bottom: 1px solid #195392;
 -}
 -
 -.system-info td {
      text-align: center;
      font-weight: bold;
      vertical-align: middle;
 @@ -1992,22 +1996,10 @@
  }

  .system-info-body {
 -    width: 80%;
      background-color: #dee4ec;
 -    padding: 1px;
 -    border-collapse: separate;
 -    border-spacing: 1px;
 +    padding: 8px;
  }

 -.system-info-body td {
 -    background-color: #eee;
 -    font-size: 12px;
 -    font-weight: 400;
 -    font-style: normal;
 -    color: #2d2d2d;
 -    padding: 1em;
 -}
 -
  .smiley_box {
      height: 65px;
      width: 120px;
 @@ -2041,18 +2033,30 @@

  .off-color { color:#ccc;}

 -span.mood {
 -border: 1px #000 solid;
 -border-radius: 5px;
 -height:12px;
 -padding: 0 3px 0 2px;
 -vertical-align:top;
 -color:#000;
 -font-size:10px;
 +span.NewLinks {
 +background-image: url(./default/new-l.png);
 +height:11px;
 +display: inline-block;
 +vertical-align:middle;;
 +padding: 0 0 0 2px;
 +background-position: left bottom;
 +background-repeat: no-repeat;
  }
 -
 -span.mood img {
 -margin-left:-1px;
 -margin-top:-2px;
 +span.NewLinks_r {
 +background-image: url(./default/new-r.png);
 +height:11px;
 +display: inline-block;
 +vertical-align:baseline;
 +padding: 0 2px 0 0;
 +background-position: right top;
 +background-repeat: no-repeat;
 +}
 +span.NewLinks_c {
 +background-image: url(./default/new-c.png);
 +color:#fff;
 +font-size:8px;
 +height:11px;
 +display: inline-block;
  vertical-align:top;
 +padding: 0 2px;
  }
 \ No newline at end of file