1
Necron99
Three CSS files? Why?
  • 2005/9/3 23:30

  • Necron99

  • Just popping in

  • Posts: 20

  • Since: 2005/8/24


I'm using a theme called Orange_Peco which I have altered to my needs. It's a template from OCean-Net, (which if anyone has a fix to the templates weird Japanese date/time that would be great, for now I've taken them off the theme)and it uses 3 diffrent CSS files to change the theme. One CSS file for IE, one for FireFox, and one for Mac computers. I'm wondering since I'm making many changes in the CSS file is it possible to use only one? I find it very redundant using 3 diffrent CSS files if it isn't necessary. Is it necessary and if not how can I go about using only one css theme file?

2
adrock
Re: Three CSS files? Why?
  • 2005/9/4 1:28

  • adrock

  • Quite a regular

  • Posts: 291

  • Since: 2004/12/7


heres an english date and time script...

Quote:




as for the themes... do the other theme files even contain theme info? usually the 2 'extra' themes are just for specific css items that need to be different for those browsers....

if your not using anything too 'browser dependent' in your themes, you don't really need them.

Do some research on css and check the various declarations for compliance in the various browsers and os's

Happy Xoopsing!
Affordable Web Hosting - Family - Fun!...and not always in that order!

3
mboyden
Re: Three CSS files? Why?
  • 2005/9/4 17:50

  • mboyden

  • Moderator

  • Posts: 484

  • Since: 2005/3/9 1


Each browser has some differences in how they interpret the CSS you are using, thus the XOOPS design, rightfully so, made accomodations for the different browsers that use the different rendering engines. XOOPS automatically detects the appropriate stylesheet and feeds that one to the browser (try looking at the HEAD information in the source after using both IE and Firefox/Netscape.

Realize, too, there are other CSS files. There is a xoops.css file in the main directory, and there is likely a CSS file in each module, too. These are loaded in order from general to specific: the main one for the CMS (xoops.css), the theme (whatever you specify in your theme), and the module one (whatever is specified in the module and/or in each template as in-line styles). This fits the cascading stylesheets design to a T.

However, most designers design in such a way that they only use stuff that works across all 3 browsers. That being the case, I put this line in the styleMAC and styleNN themes:
@importĀ url(style.css);

Then I don't have to copy and paste the changes in 3 stylesheets.

I've still found that some things don't work as expected at times. If you run into that, then put any browser specific CSS into that specific stylesheet (to load after the main stylesheet, and thus "trumping" it). For instance, in the myReviews module, the "waiting" block uses UL lists which display differently in the Firefox browser (and since I don't have access to a Mac, I have no clue as to how it works there). Thus, I added some specific ones just for the Gecko browser (cause it was easier than figuring out how to make it work for all browsers).

Additionally, for every module that I make, I take all those styles from that style sheet and then paste it into the theme's stylesheet instead. Thus, for my sites that have multiple themes for users to choose from, I only have one place to add/edit those styles and when I add a module, I can make all those changes in one place for each theme and can accomodate those as well as the differences between browsers if any. If the module doesn't specify a CSS it likely uses in-line styles, but you can deal with that pretty easily.

Clear as mud?
Pessimists see difficulty in opportunity; Optimists see opportunity in difficulty. --W Churchill

XOOPS: Latest | Debug | Hosting and Web Development

Login

Who's Online

192 user(s) are online (142 user(s) are browsing Support Forums)


Members: 0


Guests: 192


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits