11
weddy
Re: Polish your theme CSS files
  • 2003/9/13 17:31

  • weddy

  • Just popping in

  • Posts: 1

  • Since: 2003/9/7 1


I'm new to XOOPS, and hope to give theme making a whirl soon (after I'm a bit more comfortable with admin and playing with modules *S*). I've downloaded quite a few themes made by others...THANKS to the theme makers 8^)

I do hope some have no tables. I've done it before with MT, but it was a struggle LOL (and I had to resort to a table for my comments area...grrr). Maybe I'll get it down better then 2nd time around. But if there's one that already is pure css (hopefully with a relative width div for the center section), I'll probably use that to start off with.

When I do get into editing some of the CSS's, the first thing I'll do is change all px/pt's to keywords.

Quote:
my suggestion is to always use points

By using pt/px, IE is *NOT* able to increase font size. Using keywords or em's (harder to use as far as I'm concerned) enables IE users to increase the font size so that they'll be able to read a page. With relative font sizing, viewers with normal vision won't have to suffer reading large text, while visually impaired viewers will be able to increase the font size in IE.

With the numerous combinations of screen resolutions, monitor sizes, and viewers' visual difficulties, I see no reason to take a chance on viewers not being able to read a page if they choose to stick with IE. Many of my friends are older, and have difficulties reading some sites, and prefer sticking with IE. As for printing, use a print.css.

Hopefully when MS comes out with a new browser, it will have zoom text capabilities like Mozilla/Firebird. Until that time, I'll use keywords (or perhaps learn em's better).
___
Added some links
Practical CSS Layout Tricks...
Eric Meyers Tricking Browsers & Hiding Styles
Bullet Proof Rounded Corners
Three Column Flanking Menus

12
sunsnapper
Re: Polish your theme CSS files

I just came across this site, and people interested in CSS, great design, or the power of separating content from presentation should check this out. At least 50 different presentations of the same content.

http://www.csszengarden.com/

(NOTE: I've also edited this thread's first post to include this link).

13
wingls
Re: Polish your theme CSS files
  • 2003/12/10 11:32

  • wingls

  • Just popping in

  • Posts: 51

  • Since: 2003/11/27


Dear Sunsnapper Master,

It's great and would appreciate if you can let's know :
1. If we want to edit the CSS, what file should we need to modify it?

2. Can I use dreamweaver to edit & ftp back to the same directory? Will it affect or corrupt our site?

3. How to create the top drop down menu button ( in which file too? ) what type of module we can do?

Plse advise .MANY THANKS!

Winson

14
PureLuXus
Re: Polish your theme CSS files
  • 2003/12/10 12:19

  • PureLuXus

  • Not too shy to talk

  • Posts: 116

  • Since: 2002/1/3 2


ok i am not sunsnapper, i know

1.
themes/[activetheme]/style/style.css

2.
yes, imho is Topstyle Pro the best tool for that.

3.
a what?

15
kavaXtreme
Re: Polish your theme CSS files
  • 2005/4/20 12:15

  • kavaXtreme

  • Repository Maintainer

  • Posts: 110

  • Since: 2005/1/17


The time has probably come for someone to move this thread to the "Theme stylesheets (CSS) help" forum. Anyone?

16
rpilney
Re: Polish your theme CSS files
  • 2007/2/6 20:29

  • rpilney

  • Just popping in

  • Posts: 76

  • Since: 2006/1/25


I need help with my site. Fonts are too large and I am not experienced enough to know how to change my style sheet to work correctly. No matter what I try they look ugly.

17
rabideau
Re: Polish your theme CSS files
  • 2007/2/6 22:39

  • rabideau

  • Home away from home

  • Posts: 1042

  • Since: 2003/4/25


Hi rpilney...

email me links and your css. I'll be happy to help you on Thursday / Friday of this week.

In the meantime, if you want try it on your own and go to download some annotated themes that are editable, go to http://eirenicon.org

You'll find some of mine there, along with instructions on the inside. Demos of the themes are also on that site.

Enjoy!
Pax vobiscum,
...mark

may the road rise to meet your feet!

http://treemagic.org

18
kris_fr
Re: Polish your theme CSS files
  • 2007/2/6 23:15

  • kris_fr

  • Theme Designer

  • Posts: 1009

  • Since: 2005/12/31


hi,

Quote:

snow77 wrote:
Greats hints, nice to try out a good CSS editor like TopStyle Pro, works real good when working with styles.

or Style Master

A +

19
rpilney
Re: Polish your theme CSS files
  • 2007/2/7 0:29

  • rpilney

  • Just popping in

  • Posts: 76

  • Since: 2006/1/25


thanks! I PM'd you the link and info just now.


Quote:

rabideau wrote:
Hi rpilney...

email me links and your css. I'll be happy to help you on Thursday / Friday of this week.

In the meantime, if you want try it on your own and go to download some annotated themes that are editable, go to http://eirenicon.org

You'll find some of mine there, along with instructions on the inside. Demos of the themes are also on that site.

Enjoy!

20
JMorris
Re: Polish your theme CSS files
  • 2007/2/7 1:40

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


First of all, how in the world did I miss this thread?! This is my favorite subject.

@sunsnapper,

Thank you for posting this thread! This is a great resource for theme designers.

A couple points I wanted to touch on....

1. Compression...

A tool I use quite often is at http://flumpcakes.co.uk/css/
It removes comments, line breaks, and converts overly verbose CSS to the most minimalistic equivalent posible.

2. Points vs. Pixels...

From everything I've read, it's better to use em or %. This allows scaling of text and design elements when the user is relying on a screen reader.

3. Structure...

I couldn't agree more that structuring your CSS is vital. I've seen so many cases in many forums (not just this one) where "bugs" were simply CSS structure issues. What I've done to overcome such issues is start with a standardized CSS file and fine-tune as needed. For example:
body {}
table {} /*Note: Only if I have to - Preferably for tabular data*/
td {} /*Note: Only if I have to - Preferably for tabular data*/
th {} /*Note: Only if I have to - Preferably for tabular data*/
h1 {}
h2 {}
h3 {}
{}
a:hover {}
ul {}
li {}
{}
form {}
input {}
label {}
textarea {}
select {}
/*XOOPS-Specific CSS ->
XOOPS Classes and IDs go here Plus your fine tuning of the CSS depending on your application.*/


4. Browser compatibility...

Well, I have to be honest; my attitude on browser compatibility is this... I design for standards compliance, and then adjust for inferior browsers, like IE; however, I will not sacrifice compliance for compatibility. I always try to do my best to ensure that a design is compliant and compatible.

My basic attitude towards designing for IE is that I'll do everything that I can to make a site display the way it should in all browsers; however, M$ should get off their lazy @sses and learn to code a browser that respects what everyone else in the world considers the standard.

@weddy,
RE: Table-less themes...

There are several now. Take a look at
http://mywebresource.com/modules/mydownloads/ for just a small (simple) example of a few. There are many more that are much more advanced. See the theme news announcements for more.

RE: IE Zoom...
IE 7 has a very nice zoom functionality. Unfortunately, that's one of the very few things M$ did right with IE7.

RE: Pure CSS layout...

Good luck with the module templates! That has been the #1 obstacle for me in producing a standards compliant, accessible design using XOOPS. Pure and simple, module Developers may be great with PHP, but they suck at standards compliant XHTML and CSS.

I just wanted to say that I also agree with you view on the usage of em and print.css files. I've found this to be very useful when you have a lot of content that visitors may want to print out.

Even though my "free" XOOPS themes don't always follow these best practices, I agree 100% that they should be standard as the default and for any custom work performed.

BTW... Here are a few links from my CSS bookmarks. Please forgive any duplicates.

http://jigsaw.w3.org/css-validator/
http://www.csscreator.com/
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/
http://www.kalsey.com/tools/csstabs/
http://www.scriptomizers.com/
http://fourshapes.com/articles/diagonal-lines-in-css/
http://w3goodies.smaug.cz/?p=8
http://www.cssplay.co.uk/layouts/basics2.html
http://glish.com/css/7.asp
http://www.alistapart.com/articles/taminglists/
http://cssfill.com/
http://www.benmeadowcroft.com/webdev/
http://www.72dpiintheshade.com/2007/01/16/top-10-css-tips-from-a-professional-css-architect/
http://www.quirksmode.org/css/quirksmode.html
http://www.andylangton.co.uk/web_design/
http://intensivstation.ch/en/templates/
http://cssvault.com/
http://www.htmldog.com/
http://www.to.ma/index.phtml
http://www.kalsey.com/tools/csstabs/
http://www.listulike.com/generator/
http://cssmania.com/
http://www.sperling.com/examples/box/
http://www.maketemplate.com/form/
http://www.ericmeyeroncss.com/
http://www.cssremix.com/
http://www.maketemplate.com/
http://www.neuroticweb.com/recursos/css-rounded-box/
http://csstinderbox.raykonline.com/

HTH.

James
Insanity can be defined as "doing the same thing over and over and expecting different results."

Stupidity is not a crime. Therefore, you are free to go.

Login

Who's Online

105 user(s) are online (62 user(s) are browsing Support Forums)


Members: 0


Guests: 105


more...

Donat-O-Meter

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

Latest GitHub Commits