XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme design questions 
  4.  / Any tips on Integrating Style Sheets??? (CSS conflicts)
Register
1
wf4sure
Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/11 23:43

  • wf4sure

  • Friend of XOOPS

  • Posts: 29

  • Since: 2004/2/12


I've been trying unsucessfully to replace the XOOPS header with my own:
https://xoops.org/modules/newbb/viewtopic.php?viewmode=flat&topic_id=17278&forum=5

As indicated in that thread, I solved a similar problem with a cgi script by using the following code:




However, putting this code in the default/theme.html (in place of the XOOPS header), doesn't do a thing. The front page loads fine, but with no header at all.

A couple of times, during this and the similar issue with the other script, people have mentioned integrating the style sheets. In other words, there must be a way (in the styles.css file) to specify the particular formatting needed for just the new header (but without effecting the other formatting necessary to the XOOPS pages)!? If so, perhaps I could try pasting the default_header.html coding directly in the themes.html file again. Before, when I tried that, it was all messed up by the XOOPS style sheet(s).

Any suggestions would be appreciated. Does anyone know a very basic CSS tutorial? Could anyone suggest some very basic CSS parameters that would limit the areas effected by it? Or, could somebody suggest a different way entirely to approach this problem. Any suggestions would be appreciated! Cheers!
2
tripmon
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/12 12:06

  • tripmon

  • Module Developer

  • Posts: 462

  • Since: 2004/2/28


I think this might help, not sure if you are trying to change content or visual style of the header...

You can do either with this...

If you are using default theme:
Open the file:
yourURL/themes/default/theme.html
if (your using wysiwyg, just edit what you want)
else (look right under ,Put your code between the tags.)
Quote:









 


Post back if that didn't do it, or if you were trying to do something else...
3
wf4sure
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/12 14:32

  • wf4sure

  • Friend of XOOPS

  • Posts: 29

  • Since: 2004/2/12


Yeah--this is similar to what I was trying at first. But the default/styles.css has a "valign=top" formatting that repositions my logo and distorts a text-box in the header table. Also, my header requires some elements from another style sheet and a java-script to put in the date. The problem is to get the header to display correctly without messing up the XOOPS page which is controled (in part) by the default/styles.css .

I was hoping there was some way to pull the header into the page without it being effected by the default/styles.css (probably wishful thinking).

The XOOPS script is installed, a number of modules are installed, everything is working great--but I can't really use it until I can get this header to work. Thanks for you reply!
4
wf4sure
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/12 15:04

  • wf4sure

  • Friend of XOOPS

  • Posts: 29

  • Since: 2004/2/12


UPDATE: Adding these lines fix part of the problem, but the arrangement is still distorted:







Deactivating this line (below), from the XOOPS default/theme.html, fixes the header problem, but then all the theme colors and some of the formatting is gone--just the naked content remains:



I think that "$xoops_themecss" is referring to the default/styles.css.

Does anyone know a way to keep that style sheet from effecting the header code that I've pasted into the default/theme.html file? That is the key to fixing the problem. XOOPS needs the styles.css, but my header won't work with it.
5
tripmon
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/12 15:20

  • tripmon

  • Module Developer

  • Posts: 462

  • Since: 2004/2/28


You have a couple of options, either strip the identifier
Quote:
id="changeme"

(which will disassociate the CSS style for that item (just make sure you don't name it something else defined in the style sheet)) and that will allow you to hardcode the entire table if you want...

or in your theme dir edit the style.css... note there are 3 stylesheets (style.css, styleNN.css, styleMAC.css) in your theme dir, to get all browsers to come close to displaying the same, you will need to change all 3 accordingly.

Why don't you just change the id's, hella easier.
6
wf4sure
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/12 18:10

  • wf4sure

  • Friend of XOOPS

  • Posts: 29

  • Since: 2004/2/12


Thanks for the tip! Pardon me for asking, but I'm a total newbie when it comes to style sheets and templates and such. Does the "id=" go in the description? Does it also need to be included in elements within the table [like or
]?

Thank again!
7
tripmon
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/12 18:55

  • tripmon

  • Module Developer

  • Posts: 462

  • Since: 2004/2/28


Unless you need to be WC3 compliant, you can actually name all of the elements the same (although I strongly advise against it) and the page will probably still function.

To answer your ?, yes.
In the following example you can:

Change the style.css definition for headerbar (see quote),
OR
Name the element a name not defined in style.css (say myheadertable) and use HTML to mark up the text, avoiding css altogether
OR
Name the element a different name and create a definition for that element in style.css.

EXAMPLE:
in theme.html you can find the following:

it is id="headerbar" that ties the CSS style of the named element in the theme.html to the style description in style.css (the quote is the corresponding entry in style.css)

Quote:

td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);}


So look at the theme.html, figure out the elements you need to change, see if there is an entry for that specific element in style.css, make your changes any way outlined above.

You can define as much or as little as you want... just remember if you do not define an element specifically, and that element type is defined in your style sheet, the style sheet definition will take presedence...

eg.
1.
vs.
2.


with style.css defining:
a. table {width: 100%; margin: 5; padding: 5; font-size: small}
b. table#mytable {width: 750; margin: 0; padding: 0; font-size: large}

1. will call b
2. will default to a

If A was not included in style.css, you could HTML code 2, but since it is defined, if you include HTML markup in the
tag you will create a conflict and may get funky results.

Hope that helps.
8
wf4sure
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/12 19:07

  • wf4sure

  • Friend of XOOPS

  • Posts: 29

  • Since: 2004/2/12


Thank you--I believe it will!
=============================
UPDATE: Kudos to Tripmon for this tutorial on style sheets. It's not like I really know what I'm doing yet, but this brought me up another notch or two on the learning curve. My header isn't perfect, but it is almost presentable. Thanks again!
9
wf4sure
Re: Any tips on Integrating Style Sheets??? (CSS conflicts)

  • 2004/3/15 4:33

  • wf4sure

  • Friend of XOOPS

  • Posts: 29

  • Since: 2004/2/12


'nother UPDATE:

While the header is quite presentable at this point, the fact that the site menu font appears larger and the type, in general, is "looser" (not as tightly spaced) still bugs me. As such, as a last resort, I dedided to test the style sheets item by item and see where the conflict really originates. I am very close:

The XOOPS style sheet is overiding the other style sheet with this line:

Quote:
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}


The other style sheet controls that menu text with this line:

Quote:
body,td,th {

Font-Family : Arial;

Font-Size : 12px;
}


So far, I am unable to properly designate the scope of the second or to restrict the scope of the first. If I simply delete the first one, the menu looks fine, but other things go awry in both the header (position of graphics) and the XOOPS layout.

Here is an excerpt from the menu table:

Quote:












Don't laugh too hard if I'm way off track, but I tried labeling "id=" for:



 







 Home