How can I override the default teble setting in teh Style.css file. I have a table that I want formatted a little different but no matter what settings I place in the table tags it still uses the default setting that is in the style.css file

VI_Knight:

Where exactly are you putting the settings in the table tags? In principle, the order in which things get displayed should be the same as in pure HTML: first the style declarations within the code, then the style declarations in the head of the HTML file, then the stylesheet.

Sometimes your changes don't get applied because you still have old values in the cached folder (templates_c), or because you change a physical template but don't do the same with the one in the database.

In other words, please be a little more specific so we can elaborate a good answer.

Cheers.

i am using the default templates for my theme so i am not altering the templates at all. I have mad changes to teh stylesheet to suit the theme that i am designing. Changing the information in the stylesheet and getting it to basically look the way i want is not a problem. However, there are some tables taht i want to alook dirfferently and no matter how i change the options in the tags it does not override the stylesheet. I thought that any specials settings placed in the <table> tags in your html or php cose would override the stylesheet settingsb tut his is not happening.

here is the sample of part of my code and the problem I am having.

<table border="1" cellpadding="0" cellspacing="0" style="border:3px double #00aa99; border-collapse: collapse" width=449 bgcolor="#4E7F81" bordercolordark="#660000" bordercolorlight="#996600">
<tr>
<td width="149"> <img border="0" src="images/hands.jpg" width="281" height="223"></td>
<td width="300" bgcolor="#4E7F81" align="center">
<b><font face="Arial, Book Antiqua, Times New Roman, Times" size="3" color="#ffffff">
Weddings<br>
Graduations<br>
Proms<br>
Parties<br>
Portfolios <br>
Portraiture<br>
Landscaping<br>
Corporate</font></b>
</td>
</tr>
</table>


The problem I am having is that I am trying to get that text to be vertically aligned in the cell. No matter where I put the valign statement it does not work. I tried putting it in the <table> tag in the <tr> tag and the <td> tag and none of them worked. The code by works just fine in a browser by itself but when I add it to my module the formatting is off. The width of the table is also conforming to the 100% specified in the style sheet for the default table settings instead of the 449 that is specified in the tag.

When I alter the stylesheet for the default table in the style.css file to match what I want, it works but it also affects all the other tables. So what i am trying to do is to have taht one section be customized the way i ant it separate from the stylesheet and I m having a hard time getting that accomplished since the tag codes are not overriding the stylesheet.

If you need any more information let me know

VI_Knight:

Here's what I think might be happening:

Your custom table has style declarations but no id settings. What styles will every TD use? It depends on the location of the table.

Let me be more specific. In the default theme.html, all the center content is within a TD, but it's not any TD: it's a TD with an id="centercolumn", and this means that in the absence of specific declarations, every TD inside it will inherit the one declared as td#centercolumn in the stylesheet.

That's why the different blocks in the theme have their own ids: you might define all of them different, if so you wanted. As it is, most of them have the same styles applied.

The logic within theme.html is easy to follow. Inside the TD with id="centercolumn" there's a table holding all the content in this way:

TD with id=centercolumn
--TABLE
----TR <== This is the first line
------TD with id=centerCcolumn, 2 cols wide
------ Content: blocks defined as center center
------/TD
----/TR

----TR <==This is the second line
------TD with id=centerLcolumn, 1 column wide
------ Content: blocks defined as center left
------/TD
------TD with id=centerRcolumn, 1 column wide
------ Content: blocks defined as center right
------/TD
----/TR
--/TABLE

--DIV with id=content
---- Content: the start page module's main content
--/DIV
etc.

The point to consider here is that every TD has an id, so you can style them as you wish. If you want a table with a different style,perhaps you should define your selectors accordingly.

Let's assume you want a table called custom. Call it with a declaration that includes id="custom" and in the stylesheet make a selector like table.custom { whaterver }. Do the same for the columns of the table: i.e., call them using < td id="customtd1"...>... and make selector like td.customtd1 { ... }...

Another advantage of doing this is the possibility of leaving out of the HTML all the styling code. Put it in the stylesheet, and this will your HTML maintenance mucho more easy.

I think this should work. Please help us posted.

Cheers.

Thanks!! hsalazar

It worked like a charm. I had tried it this way before but i was doing it a little differently. Now i see what i was doing wrong. I will try your full code on another module i am working on and see how that works. Thanks again for all your help. Now i can stop driving myself crazy.

For a module that need its own stylesheet, is it not better to create another .css file for this module instead of
Override the style.css XOOPS theme file ?

Thanks

yes, that would be a better solution. XOOPS includes a smarty variable <{$xoops_module_header}> that you can use to add your own stylesheet:


This code assumes that your styles are in a file called styles.css in the root directory of your module.