Welcome, Guest. Please Login or Register.
April 27, 2025, 11:57:26 PM
Home Help Search Log in Register
News: SMF is the next generation in forum software, almost completely re-written from the ground up, make sure you don't fall for cheap imitations that suffer from feature bloat!

YaBB SE Community  |  General Category  |  Feedback  |  Validating CSS and HTML « previous next »
Pages: [1] Reply Ignore Print
Author Topic: Validating CSS and HTML  (Read 818 times)
Michele
Beta Tester
YaBB God
*****
Posts: 584


I can't wait for YaBB SE 2!

Mad+Moya WWW
Validating CSS and HTML
« on: July 23, 2002, 05:11:55 AM »
Reply with quote

You know those links you put on the bottom of each of our YaBB SE pages on verifying the CSS on our forum pages?

Well, the default template doesn't pass. :)

It took a LOT of tweaking, but I finally got my template.php file to CSS verify. This site also fails the verification test, btw. :)

Could you look at fixing the template.php for v1.4.1? I'll be glad to share my template with you. :)

Thanks, Mad Moya
Logged

formerly Mad Moya
PfaBB - http://pfabb.lunabyte.com
groundup
Disciple of Joe, Head Cleric
Mod Team
YaBB God
*****
Posts: 2983


Error 309: Please notify the administrator of this

WWW
Re:Validating CSS and HTML
« Reply #1 on: July 23, 2002, 05:53:18 AM »
Reply with quote

can you post your template?
Logged

http://www.fastfinancialfreedom.org - financial freedom is a myth
http://www.fastfinancialfreedom.org - financial freedom is a myth
http://www.fastfinancialfreedom.org - financial freedom is a myth
fastfinancialfreedom.org
Michele
Beta Tester
YaBB God
*****
Posts: 584


I can't wait for YaBB SE 2!

Mad+Moya WWW
Re:Validating CSS and HTML
« Reply #2 on: July 23, 2002, 02:38:51 PM »
Reply with quote

Yeah, but I changed a few things. :)

1) Font sizes and colors were removed from the BODY.
2) Fonts in the stylesheet were changed from px and pt to small, x-small and medium.
3) Added .menu and set up the menu row with it to change its color and font size easier.
4) All the sblocks stuff is for YaPP, you can remove those columns and adjust the widths.
5) Added .windowbg3 for my YaPP Blocks, .editor is also for YaPP.
6) Alphabetized all the styles, first by standard CSS types then by YaBB types.
7) Added BACKGROUND-COLOR=Transparent and other attribs where needed to comply with CSS standards, and removed attribs from styles (mostly font-family) where they were not needed.
7) Removed the nested tables on the top set (logo, menu, etc) and on the copyright set on the bottom.
8 Heavily commented for use with FrontPage so the columns and rows would show up. :)

I think that's about it, and with that said, here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE><yabb title></TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META name="description" content="<yabb title>" >
<META name="keywords" content="YaPP, YaBB SE, php, color scheme, template, css" >
<STYLE type="text/css">
<!--
A:link {COLOR: #005177; FONT-WEIGHT: bold;BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;}
A:visited {COLOR: #005177; FONT-WEIGHT: bold; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;}
A:hover {COLOR: #CC3333; FONT-WEIGHT: bold; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline;}
BODY {COLOR: #000000; FONT-SIZE: small; FONT-FAMILY: Verdana, arial, helvetica, serif; BACKGROUND-COLOR: #FFFFFF;}
INPUT {COLOR: #000000; FONT-SIZE: x-small; BACKGROUND-COLOR: #AFC6DB;}
SELECT {COLOR: #000000; FONT-SIZE: x-small; BACKGROUND-COLOR: #AFC6DB;}
TD {COLOR: #000000; BACKGROUND-COLOR: transparent; }
TEXTAREA {COLOR: #000000; FONT-SIZE: x-small; BACKGROUND-COLOR: #AFC6DB;}

.bordercolor {BACKGROUND-COLOR: #6394BD;}
.catbg  {FONT-SIZE: small; COLOR: #000000; FONT-WEIGHT: bold; BACKGROUND-IMAGE: url(YaBBImages/catbg.gif); BACKGROUND-COLOR: transparent;}
.code   {FONT-SIZE: small; COLOR: #000000; BACKGROUND-COLOR: #CCCCCC; }
.editor {width : 100%; }
.help    {CURSOR: help; BACKGROUND-COLOR: transparent; }
.hr       {COLOR: #000000; BACKGROUND-COLOR: transparent; }
.meaction {COLOR: red; BACKGROUND-COLOR: transparent; }
.menu {FONT-SIZE: x-small; BACKGROUND-IMAGE: url(YaBBImages/catbg.gif); BACKGROUND-COLOR: transparent;}
.nav          {COLOR: #000000; FONT-WEIGHT: bold; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none; }
.nav:link       {COLOR: #000000; FONT-WEIGHT: bold; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none; }
.nav:visited    {COLOR: #005177; FONT-WEIGHT: bold; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none; }
.nav:hover       {COLOR: #CC3333; FONT-WEIGHT: bold; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; }
.quote {COLOR: #000033; FONT-SIZE: small; BACKGROUND-COLOR: #DEE7EF; }
.text1 {COLOR: #FFFFFF; FONT-SIZE: small; FONT-WEIGHT: bold; BACKGROUND-COLOR: transparent; }
.titlebg   {COLOR: #FFFFFF; FONT-SIZE: small; BACKGROUND-COLOR: #6394BD;}
.windowbg  {COLOR: #000000; FONT-SIZE: small; BACKGROUND-COLOR: #AFC6DB;}
.windowbg2 {COLOR: #000000; FONT-SIZE: small; BACKGROUND-COLOR: #F8F8F8;}
.windowbg3 {COLOR: #000000; FONT-SIZE: small; BACKGROUND-COLOR: #6394BD;}
// -->
</STYLE>
</HEAD>

<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="99%" align=center border=0>
   <TR>
      <TD valign=middle align=center><!--webbot bot="PurpleText" PREVIEW="<yabb logo>" --><yabb logo></td>
   </tr>
   <tr>
       <TD vAlign=middle align=right><!--webbot bot="PurpleText" PREVIEW="&lt;yabb uname&gt; &lt;yabb im&gt;" -->
        <yabb uname><yabb im><BR><!--webbot bot="PurpleText" PREVIEW="&lt;yabb mute&gt;" -->
        <yabb mute></TD>
   </TR>
   <TR vAlign=middle align=center >
       <TD class=menu><!--webbot bot="PurpleText" PREVIEW="&lt;yabb menu&gt;" -->
        <yabb menu></TD>
   </TR>
   <tr>
       <td align=left height="22" ><!--webbot bot="PurpleText" PREVIEW="&lt;yabb news&gt;" --><br><yabb news></td>
   </tr>
</TABLE>
<BR>
<TABLE cellSpacing=0 cellPadding=0 width="99%" align=center border=0>
  <TR>
    <TD>
      <TABLE cellSpacing=1 cellPadding=0 width="100%" align=center border=0>
        <TR>
          <TD>
            <TABLE cellSpacing=0 cellPadding=3 width="100%" align=center border=0>
              <TR>
                 <TD vAlign=top width="15%">
                      <yabb sblocksl><!--webbot bot="PurpleText" PREVIEW="LEFT Blocks" -->
                 </TD>
                  <TD vAlign=top width="70%">
                      <yabb sblocksc><!--webbot bot="PurpleText" PREVIEW="CENTER Blocks" -->
                      <br>
                      <yabb main><!--webbot bot="PurpleText" PREVIEW="OR FORUM Tables" -->
                      <br>
                      <yabb sblocksbc><!--webbot bot="PurpleText" PREVIEW="and BOTTOM Center Blocks" -->
                  </TD>
                      <td vAlign=top width="15%">
                      <yabb sblocksr><!--webbot bot="PurpleText" PREVIEW="RIGHT Blocks" -->
                 </td>
               </TR>
             </TABLE>
          </TD>
        </TR>
       </TABLE>
    </TD>
   </TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
  <TR>
    <TD noWrap align=right><yabb VBStyleLogin><!--webbot bot="PurpleText" PREVIEW="VBStyleLogin " --></TD>
  </TR>
</TABLE>
<BR>
<TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
  <TR>
       <TD vAlign=middle align=right width="25%" >
   <A href="http://www.mysql.com/"><IMG height=31 alt="Powered by MySQL" src="YaBBImages/mysql.gif" width=88 border=0></A>
   <A href="http://www.php.net/"><IMG height=31 alt="Powered by PHP" src="YaBBImages/php.gif" width=88 border=0></A></TD>

      <TD vAlign=middle align=center width="50%"><!--webbot bot="PurpleText" PREVIEW="Copyright Info" --><yabb copyright></TD>

       <TD vAlign=middle align=left width="25%">
   <A href="http://validator.w3.org/check/referer"><IMG height=31 alt="Valid HTML 4.01!" src="YaBBImages/vhtml.gif" width=88 border=0></A>
   <A href="http://jigsaw.w3.org/css-validator/check/referer"><IMG height=31 alt="Valid CSS!" src="YaBBImages/vcss.gif" width=88 border=0></A>
       </TD>
  </TR>
</TABLE>
</BODY>
</HTML>

I'm not sure I have the new font size types set exactly the way you did originally, but I liked the look of them better. Feel free to modify them back... with this template, it's easier for us to change things. I think I also got the colors back to the original template, but may have missed one or two.

HTH, Mad Moya
« Last Edit: July 23, 2002, 02:44:33 PM by Mad Moya » Logged

formerly Mad Moya
PfaBB - http://pfabb.lunabyte.com
zrski
Noobie
*
Posts: 24


I'm a Mini!

ICQ - 149279194 WWW
Re:Validating CSS and HTML
« Reply #3 on: July 23, 2002, 03:08:54 PM »
Reply with quote

He Moya,

That looks sharp, I've been busy all day tweaking our new forum. (old one is still the one in my sig).

I noticed that a lot of "font size=" tags have been used all around the code.

Does anyone wanna join me in trying to get the code clean again so that it only uses the stylesheets? I guess it's a BIG job ;)
Logged

http://www.higherlevel.nl
het forum voor Nederlandse technostarters!
http://www.higherlevel.nl
Spaceman-Spiff
Mod Team
YaBB God
*****
Posts: 3689


My $txt[228]

Re:Validating CSS and HTML
« Reply #4 on: July 23, 2002, 06:29:48 PM »
Reply with quote

i thought groundup or someone else has posted the HTML 4.01 compliant fix before...
Logged

   My mods, ysePak, codes, tutorials
    Support question IMs = bad.
Spaceman-Spiff
Mod Team
YaBB God
*****
Posts: 3689


My $txt[228]

Re:Validating CSS and HTML
« Reply #5 on: July 23, 2002, 06:38:53 PM »
Reply with quote

it was by compuart, not groundup, sorry
link is http://www.yabb.info/community/index.php?board=172;action=display;threadid=9935
Logged

   My mods, ysePak, codes, tutorials
    Support question IMs = bad.
groundup
Disciple of Joe, Head Cleric
Mod Team
YaBB God
*****
Posts: 2983


Error 309: Please notify the administrator of this

WWW
Re:Validating CSS and HTML
« Reply #6 on: July 24, 2002, 02:20:09 AM »
Reply with quote

mad moya, you just posted the YaPP HTML compliant template :)
Logged

http://www.fastfinancialfreedom.org - financial freedom is a myth
http://www.fastfinancialfreedom.org - financial freedom is a myth
http://www.fastfinancialfreedom.org - financial freedom is a myth
fastfinancialfreedom.org
Michele
Beta Tester
YaBB God
*****
Posts: 584


I can't wait for YaBB SE 2!

Mad+Moya WWW
Re:Validating CSS and HTML
« Reply #7 on: July 24, 2002, 03:31:05 AM »
Reply with quote

Quote from: groundup on July 24, 2002, 02:20:09 AMmad moya, you just posted the YaPP HTML compliant template :)

Hehe, yup! But all you have to do is remove the sblocks stuff and it's back to being a YaBB SE. CSS compliant template. :)

I actually added a few styles of my own (.windowbg3 and .menu), but the main point of the changes was to get rid of the font size=1 stuff in the body, and change all the px/pt to small and x-small. And I cleaned up the entire CSS section, not just by alphabetizing it, but by standardizing the attribs of each style (order, caps, etc).

I left the YaPP stuff in, in case others reading this thread were also using YaPP, they wouldn't have to change anything... well, they'd have to change the block function in SSubs.php to use .windowbg3, but that's all. :)

IOW, I made it pretty - you gonna argue with that? LOL

Have fun, MM
Logged

formerly Mad Moya
PfaBB - http://pfabb.lunabyte.com
Pages: [1] Reply Ignore Print 
YaBB SE Community  |  General Category  |  Feedback  |  Validating CSS and HTML « previous - next »
 


Powered by MySQL Powered by PHP YaBB SE Community | Powered by YaBB SE
© 2001-2003, YaBB SE Dev Team. All Rights Reserved.
SMF 2.1.4 © 2023, Simple Machines
Valid XHTML 1.0! Valid CSS

Page created in 0.062 seconds with 21 queries.