Making Themes for Wincustomize

Converting Wincustomize to CSS

Disclaimer: I'm not working for Stardock, so this may never be implemented on the live site.

Contrary to the old site, the new Wincustomize doesn't allow you to change the theme of the site to your liking. According to T-Man (see this thread: Link), the site is going to have themes, but only the admins will be able to change them, and they will be changed for all users.

What if you want to have your own theme ?

Currently, you can override the style sheet, but apart from changing some of the fonts and colors, you will not get very far. As it is now, changing the look of the site will require you to dig into the code to change the images (have a look at the code, it's a little bit hard to modify ). Now, if most of the design was in a style sheet that will be easier, right? You could make your own style sheet or use one from the site. No need to change the html code. Just change the url to the images in the style sheet, adjust the sizes and you're good to go.

Well, that's all nice, but it's easier said than done!

So, here you go, I converted the home page to use CSS instead of tables. You can see the proof of concept here: Link

You can switch the style from the "old" pastel style to the aero style (the left column is currently the same for the two).It is not perfect yet especially if you use an older browser (or Opera ), and it's only the home page, but you can still try to modify the style sheet or do new themes with it. The good thing is that the page is a lot smaller than before (the html code is 24k and the style sheets are 16k total).

Once I'm done cleaning the code, I will upload an archive of the files that you can download if you want to make new themes.
11,455 views 18 replies
Reply #2 Top
I went to your proof of concept site and tried to set the site to 'Aero'. There was internet traffic, but the drop down list went back to 'default' and nothing changed.

I'd really like to see this work as the SD folk might consider it if it were fast and easily implemented.
Reply #3 Top
werewolf: It should work now (a last minute change broke my script on IE6 ). Note that you should have cookies enabled to make it work. The script doesn't work on IE < 6, but you can force the style by adding ?style=
Reply #5 Top
Cool idea!
Reply #6 Top
This is a very interesting idea.
Reply #7 Top
Hey, yeah...It worked great. That is really cool and it's smaller size should make this doable (?)

Reply #8 Top
Excellent concept Littleboy . Would love to see this get implemented once all the other issues are worked out. CSS is too sweet
Reply #9 Top
I used to have some concerns about your site. But now I am satisfied. Idead a Great Idea. T-Man should consider it.
Reply #10 Top
Wow, I'm impressed, I have to admit. This just might work too. I'll look into this further. I might have some questions for ya Littleboy.

Thanks for the hard work! Looks like Dark-Star is finally going to learn something new for a change.

George
Reply #11 Top
Thank you

I have been working on other things in the last few weeks ( ) and haven't been able to update it as I wanted, in particular to support Opera better. I also want to add per-tab background color (using the body id).

You should take a look at this site: Link. They have some great articles (a lot of things in my concept are borrowed them )

If you want an archive of the page (all images & css), send me a mail.
Reply #12 Top
Yey! I was about to do the same. *phew* Converting this tag a soup to CSS.
Nice work. I'd be nice if they converted to that layout instead. it'd be faster and it'd save them bandwidth.

(Today all the articles and forums broke in Firefox. I suspect the tagsoup to be the problem.)
Reply #13 Top
This is excellent. I am trying to do that with my own websites. (I eventually want users to be able to change the layout style to what they want)

If wincustomize can do this in the next 2 or 3 months, that would be great!

Good work. I am adding this to the art and skin report.
Reply #14 Top
and I still like tables better than div tags for complex layouts... can't you use sty;e sheets with tables too?

I'm new to div tags and style sheet (can you believe that a few years agao I didn't like CSS?)
Reply #15 Top
Sure, you can use tables all you want an apply styles to them (I used them for the library list on the left column). Sometimes using tables is the way to go, but for boxes and lists, I think you should avoid them if you can, as it complicates the code a lot
Reply #16 Top
This is very good work, and Very impressive to take the time and effortto do such nice work.
Reply #17 Top
http://www.csszengarden.com/

Another helpful site.
Reply #18 Top
and I still like tables better than div tags for complex layouts... can't you use sty;e sheets with tables too?

I'm new to div tags and style sheet (can you believe that a few years agao I didn't like CSS?)


Using tables for layout is strongly discouraged in webdesign. There are many reasons to this. If you have a look at some of the articles at a href="http://alistapart.com/">A List Apart you'll find some of them.

Using purely CSS for layout and HTML for semantic will be a better solution when you start thinking of things like:
Accessbility - (How easy is it for people with disabilities to use your site? Link)
Printing - (How does your website look like when you print? There really isn't a need to make a separate page for printing)
Bandwidth - (Tagsoup eats your bandwidth. Add your layout to a CSS file and let it be cached)
Reusablility - (Edit one CSS file and not hundreds of HTML files)
Compatiblity - (Not just IE, Opera and Mozilla, but TV, Handhelds, Mobile phones)