Welcome, Guest. Please Login or Register.
April 30, 2025, 01:36:29 PM
Home Help Search Log in Register
News: If you are still using YaBB SE, please consider upgrading to SMF as soon as possible.

YaBB SE Community  |  Development  |  Graphics and Templates  |  Style sheets and tables « previous next »
Pages: [1] 2 Reply Ignore Print
Author Topic: Style sheets and tables  (Read 1196 times)
Taildragger
Full Member
***
Posts: 158


WWW
Style sheets and tables
« on: February 08, 2003, 12:49:25 AM »		 Reply with quote
I don't really know much about CSS, so maybe this is stupid...  should I be able to make changes in my template to the "TABLE" entry in the style sheet, and have it reflected throughout the forum?  I tried making a few changes, but it didn't do anything.  If I look at the source for the index page of my site, it doesn't look like the TABLE style is called in the code.

Does it mean I have to get into all the separate PHP files to make table changes?  That's fine until YaBB is upgraded again, then all is lost.

Thanks for any tips.
Logged
We're designed to be hunters and we're in a society of shopping. There's nothing to kill anymore, there's nothing to fight, nothing to overcome, nothing to explore. In that social emasculation this everyman is created.
Spaceman-Spiff
Mod Team
YaBB God
*****
Posts: 3689


My $txt[228]
Re:Style sheets and tables
« Reply #1 on: February 08, 2003, 02:19:45 AM »		 Reply with quote
if u want to change the style, u can just change the css part, no need to change the html part
unless if u're creating a new css class, then u'll need to add it in the html
whatever u change in
table {
}
will affect all the <table> tags in your forum
Logged
   My mods, ysePak, codes, tutorials
    Support question IMs = bad.
Taildragger
Full Member
***
Posts: 158


WWW
Re:Style sheets and tables
« Reply #2 on: February 08, 2003, 02:39:20 AM »		 Reply with quote
Hmm.  I wonder what's wrong then.  I did this in my template:

TABLE {
   border-collapse: separate; border-spacing: 5px; border: 1px; empty-cells: show
}

and it made no difference at all.  It should, shouldn't it?

Thanks!
Logged
We're designed to be hunters and we're in a society of shopping. There's nothing to kill anymore, there's nothing to fight, nothing to overcome, nothing to explore. In that social emasculation this everyman is created.
Spaceman-Spiff
Mod Team
YaBB God
*****
Posts: 3689


My $txt[228]
Re:Style sheets and tables
« Reply #3 on: February 08, 2003, 02:56:40 AM »		 Reply with quote
hmm... i dont know what it was before
or what do u want to make...
Logged
   My mods, ysePak, codes, tutorials
    Support question IMs = bad.
Taildragger
Full Member
***
Posts: 158


WWW
Re:Style sheets and tables
« Reply #4 on: February 08, 2003, 04:07:33 AM »		 Reply with quote
All it had before was

TABLE {
  empty-cells: show
}

I'm just experimenting with how it would look with the cells separated a little.
Logged
We're designed to be hunters and we're in a society of shopping. There's nothing to kill anymore, there's nothing to fight, nothing to overcome, nothing to explore. In that social emasculation this everyman is created.
Michele
Beta Tester
YaBB God
*****
Posts: 584


I can't wait for YaBB SE 2!

Mad+Moya WWW
Re:Style sheets and tables
« Reply #5 on: February 08, 2003, 05:13:22 AM »		 Reply with quote
Actually, it won't change ALL the tables, since some already have class="xxx" in them.

YSE has <table class="xxx"> scattered throughout the Sources files, so changing the default <table> style in the CSS doesn't change about 90% of the tables. :(

On top of that, the darn NTS (nested table syndrome) is throughout the code too, I'm guessing to simulate fancy borders, and that also destroys any table CSS you attempt to use in template.php, even if you did manage to strip the classes from the tables in the Sources directory.

Everyone repeat after me... Down with NTS! Down with NTS!

As much as I love using YSE, those nested tables have driven me crazy for over a year now. NTS is right up there with non-scalable fonts for me, and I've been trying to prod these guys into changing the template and source files for almost a year too.  ::)
Logged
formerly Mad Moya
PfaBB - http://pfabb.lunabyte.com
Spaceman-Spiff
Mod Team
YaBB God
*****
Posts: 3689


My $txt[228]
Re:Style sheets and tables
« Reply #6 on: February 08, 2003, 05:44:50 AM »		 Reply with quote
some uses the bordercolor class, to create borders, obviously
Logged
   My mods, ysePak, codes, tutorials
    Support question IMs = bad.
Michele
Beta Tester
YaBB God
*****
Posts: 584


I can't wait for YaBB SE 2!

Mad+Moya WWW
Re:Style sheets and tables
« Reply #7 on: February 08, 2003, 06:11:05 AM »		 Reply with quote
Yes, but that's not how you're supposed to create borders... tables are not style options, they're layout options and they make alternative input/output devices go crazy. If you're blind and have a text reader, it spits out TABLE every time it gets to one, then it looks for title= and doesn't find one, then it looks for summary= and doesn't find one, then it looks for caption= and doesn't find one. Then it goes to the next nested table and repeats, then the third, and sometimes fourth before the text reader actually has anything intelligent to say. :)

There are border-style: and border-color: and border-width: and a few more border options to play with in CSS to create the look you want. Browsers that can't read CSS properly will ignore them, and folks with alternative devices for Accessibility ignore what it needs to too. But none of them are designed to ignore tables, because tables are important in the presentation of information. When they're misused by being nested "just for effect" it reduces the number of people who can "view" your site and make any sense of it.

Look how simple my template.php is compared to the default one:

Code Select

<body>
<div align="center">
<img alt="logo image" src="YaBBImages/selogo.gif" /><br /><br />
<yabb menu></div>
<hr /><b><yabb news></b><hr />

<table border="0" cellspacing="5" cellpadding="10" width="100%" align="center" >
 <caption></caption>
 <tr>
 <td class="leftblock" width="18%" valign="top"><yabb sblocksl></td>
 <td width="67%" valign="top">
   <yabb sblocksc><br />
   <yabb main><br />
    <yabb sblocksbc></td>
 <td class="rightblock" width="15%" valign="top"><yabb sblocksr></td>
 </tr>
</table>
<table cellspacing="0" cellpadding="0" width="90%" align="center" border="0">
 <tr>
   <td nowrap="nowrap" align="right"><yabb VBStyleLogin></td>
 </tr>
</table>
<br />
<table class="maintable" cellspacing="0" cellpadding="3" width="90%" border="1" align="center">
 <tr>
 <td valign="middle" align="right" width="25%" bgcolor="#ffffff">
   <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%" bgcolor="#ffffff"><yabb copyright></td>
 <td valign="middle" align="left" width="25%" bgcolor="#ffffff">
   <a href="http://validator.w3.org/check/referer">
   <img height="31" alt="Valid XHTML 1.0!" src="YaBBImages/valid-xhtml10.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>


Three tables, and not one of them nested. Of course I haven't gone through all the code in YSE to remove the rest of the nested tables, but I'd like to. :)
Logged
formerly Mad Moya
PfaBB - http://pfabb.lunabyte.com
haase
Full Member
***
Posts: 224


Do you feel lucky?
Re:Style sheets and tables
« Reply #8 on: February 08, 2003, 12:42:44 PM »		 Reply with quote
I think a lot of times, coders are resorting to NTS because they have a bunch of rows that have 2 columns, then all of the sudden they have a row that needs 10 columns.  Rather than go back through the code and adjust all of the other rows to expand over 10 columns:
Code Select

<tr>
    <td colspan="5">content</td>
    <td colspan="5">more content</td>
</tr>


they just next a table for that one row and are done with it:
Code Select

<tr>
    <td colspan="2">
         <table>
              <tr>
                   <td>column 1</td>
                   <td>column 2</td>
                   <td>column 3</td>
                   <td>column 4</td>
                   <td>column 5</td>
                   <td>column 10</td>
              </tr>
         </table>
    </td>
</tr>

If you just close your table and open another one, then you are going to have a break in whatever border you're trying to use.  The only way I can see around that is to put all of those other consecutive tables inside another table (again NTS).

Perhaps I should have a closer look at your site and at your template.php and see if there's a better way.
« Last Edit: February 08, 2003, 12:50:31 PM by greghaase » Logged
haase
Full Member
***
Posts: 224


Do you feel lucky?
Re:Style sheets and tables
« Reply #9 on: February 08, 2003, 12:52:48 PM »		 Reply with quote
* Greg looks at his own template.php, sees that there are no nested tables there, scratches his head...

I guess that was a dead end.  Show me some code o' masterful one.
Logged
Taildragger
Full Member
***
Posts: 158


WWW
Re:Style sheets and tables
« Reply #10 on: February 08, 2003, 04:14:17 PM »		 Reply with quote
So all these guys with heavily modified sites are totally screwed each time a new version comes out?  I'm already kind of stressed about upgrading because I went through the source a little to make a font white that was fixed as black.

I wonder if the new YaBB (2.0?) will be a little more style-friendly?  

Regarding nested tables, I think it's mostly done to get the one pixel wide border.  I've done it myself on my own projects.  In hindsight, I think the YaBB team should have found another look instead of the 1px border, because tables nested 6 deep really cause people grief with old browsers or slow CPU's.  I'd be willing to give up this particular look to get the speed up and make things more simple/readable.
Logged
We're designed to be hunters and we're in a society of shopping. There's nothing to kill anymore, there's nothing to fight, nothing to overcome, nothing to explore. In that social emasculation this everyman is created.
Michele
Beta Tester
YaBB God
*****
Posts: 584


I can't wait for YaBB SE 2!

Mad+Moya WWW
Re:Style sheets and tables
« Reply #11 on: February 08, 2003, 07:47:31 PM »		 Reply with quote
border-width: 1px

in the Styles section will give you a one pixel border. In the html, use:

border="1px"

to get the same effect. The size should always have a size type with it anyway (1pt, 1em, 1px, etc, not just 1). If you just want borders on the left and right, use:

border-width: 0px 1px 0px 1px

Greg, I'm guessing you're not using the default template.php then, because it's FULL of nested tables.

Have fun, Michele
Logged
formerly Mad Moya
PfaBB - http://pfabb.lunabyte.com
Taildragger
Full Member
***
Posts: 158


WWW
Re:Style sheets and tables
« Reply #12 on: February 08, 2003, 07:54:00 PM »		 Reply with quote
Quote from: Michele on February 08, 2003, 07:47:31 PM
border-width: 1px

in the Styles section will give you a one pixel border. In the html, use:

border="1px"

to get the same effect. The size should always have a size type with it anyway (1pt, 1em, 1px, etc, not just 1). If you just want borders on the left and right, use:

border-width: 0px 1px 0px 1px

It's been a little while, but I'm pretty sure you can't get the super thin border between cells without nesting one table inside another.  Nothing as simple as you describe ever worked for me, and I searched google to see that everyone else was nesting tables too.  The trick is something like making one table that is a solid color, then spacing the cells on the next table so the table behind shows through like borders.

What I wanted to try on my YaBB was having the cells appear to be separated with the background showing through in between.  I've seen several sites with this and it looks quite good.  It's not worth it to me to edit all the source though because it'll get wasted with every upgrade.
Logged
We're designed to be hunters and we're in a society of shopping. There's nothing to kill anymore, there's nothing to fight, nothing to overcome, nothing to explore. In that social emasculation this everyman is created.
Zulu
Full Member
***
Posts: 104


I'm no longer a llama, I'm a Monkey

WWW
Re:Style sheets and tables
« Reply #13 on: February 11, 2003, 06:35:17 PM »		 Reply with quote
Quote from: Taildragger on February 08, 2003, 07:54:00 PM
Quote from: Michele on February 08, 2003, 07:47:31 PM
border-width: 1px

in the Styles section will give you a one pixel border. In the html, use:

border="1px"

to get the same effect. The size should always have a size type with it anyway (1pt, 1em, 1px, etc, not just 1). If you just want borders on the left and right, use:

border-width: 0px 1px 0px 1px

It's been a little while, but I'm pretty sure you can't get the super thin border between cells without nesting one table inside another.  Nothing as simple as you describe ever worked for me, and I searched google to see that everyone else was nesting tables too.  The trick is something like making one table that is a solid color, then spacing the cells on the next table so the table behind shows through like borders.

What I wanted to try on my YaBB was having the cells appear to be separated with the background showing through in between.  I've seen several sites with this and it looks quite good.  It's not worth it to me to edit all the source though because it'll get wasted with every upgrade.
You cant do this in yabb because of the nested tables.. although.. you can try to change the backgroundcolor of the 'bordercolor' to transparant.. and see if that works..


Another great CSS example:

Code Select

<div class="menutitlebar"><a href="http://www.clan-rfi.com/toggle.php?close=1&amp;toggle=RFI.Menu"><img alt="close" border="0" src="http://www.clan-rfi.com/images/sluit.gif" /></a><b>About RFI</b></div>
<a class="menuitem1" href="http://www.clan-rfi.com/paginas/introduction.php">Introduction</a>
<a class="menuitem2" href="http://www.clan-rfi.com/vwar/war.php">War Stats</a>
<a class="menuitem1" href="http://www.clan-rfi.com/paginas/crew.php">RFI Crew</a>
<a class="menuitem2" href="http://www.clan-rfi.com/paginas/fearmonger.php">FearMonger</a>
<a class="menuitem1" href="http://www.clan-rfi.com/paginas/mia.php">M.I.A</a>
<a class="menuitem2" href="http://www.clan-rfi.com/paginas/audiovisuals.php">Audiovisuals</a>
<a class="menuitem1" href="http://www.clan-rfi.com/vwar/challenge.php">Challenge Us</a>
<a class="menuitem2" href="http://www.clan-rfi.com/paginas/recruiting.php">Recruiting</a>
<a class="menuitem1" href="http://www.clan-rfi.com/paginas/contact.php">Contact</a>
&nbsp;<br />

See how it worked out @ http://www.clan-rfi.com/yabbse this is the top-left menu....

Who needs tables anyway ;)
Logged
Webby @ RFI
Formerly known as PtPazuzu
Spaceman-Spiff
Mod Team
YaBB God
*****
Posts: 3689


My $txt[228]
Re:Style sheets and tables
« Reply #14 on: February 11, 2003, 08:12:59 PM »		 Reply with quote
Quote from: Zulu on February 11, 2003, 06:35:17 PM
See how it worked out @ http://www.clan-rfi.com/yabbse this is the top-left menu....

Who needs tables anyway ;)

your link to YSE site in the copyright is broken
Logged
   My mods, ysePak, codes, tutorials
    Support question IMs = bad.
Pages: [1] 2 Reply Ignore Print 
YaBB SE Community  |  Development  |  Graphics and Templates  |  Style sheets and tables « 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.069 seconds with 20 queries.