Official Custom Theme User's Group

Much like the WaDF theme group, this is a place to talk / chat about all things Custom Themes, and tips / tricks on how to make 'em. If it gets to such a stage, maybe this will be a place to post your finished themes as well

A quick introduction to those who have no idea what i'm blurting about:
In the WaDF theme user's group, a discussion started about custom themes. So as not to go off-topic, I've set this board up.

But what IS a custom theme?
Also known as a userstyle, a custom theme is a css / javascript code which is added to the website you are viewing when you navigate to it. It only affects what you see, not everybody else. Please note: i might have made a mistake here, if so, point it out please  

...soooo... how do i make one?
Well first you are going to need Firefox. NOTE: PLEASE NO BROWSERWARZ!. you are also going to need the Firefox addon Stylish. It's kinda hard to explain how to make the script themselves (i'm only just starting myself, but it is basically a css stylesheet which overwrites the site's own (i think). The best way to have a squiz at the site's existing stylesheet is Firebug. open this up, navigate to the CSS tab, and start fiddling. it's a good way of seeing what each thing does.

Well, ive had a look myself, and all you have to do is put in the things you want changed, followed by !important . again, it's hard to explain, so i've made an example

the following code will make codeblocks on NSF have no maximum height (good for reading the one below )
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("nifflas.lpchip.nl") {

.code {
max-height:none!important;
}
}
For those who don't want to install firebug, here is the CSS stylesheet for the main page (and i think the rest of the site as well):

but how do i edit <img> tags?
to edit img tags:
img[title="exact title"] {
height: 0 !important;
width: 0 !important;
/* these numbers match the new image's dimensions */
padding-left: 125px !important;
padding-top: 25px !important;
background: url(http://example.com/your/image/here) no-repeat !important;

}
You can replace the [title=""] with any other attribute the element has. obviously if another element has the same attribute, it will change as well


NOTE:

If you are embedding images into your style, do this instead:
go to the image, and download it to your desktop
in the Stylish editor, go insert>Data URI
find the image and click OK

This will insert the data of the image, making the loading of a page faster, as it does not have to download the image.

Pretty cool shizzle dawg. I think I'll keep with the WaDF theme for now, though.

Sign me up.

Here is the extremely crappy "Saira theme" that I showed off in the WaDF topic. I put the name in quotes because it sucks.
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("nifflas.lpchip.nl") {

body{width:80%;
position:absolute;
left:10%;}

html,body {
font-size:20px !important;

background-color:#ffffff !important;

background-image:url('http://fc01.deviantart.net/fs71/i/2009/342/8/1/Saira___Magenta_Poison_by_Beomene.jpg') !important;
background-position: center bottom !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
}

html,table {background-color:#f6f6f6;
opacity:0.95;}
}
Also, you might want to skip the body tag if you aren't on a 16:10 monitor.

Also, you might want to skip the body tag if you aren't on a 16:10 monitor.

Lucky i have one

NEWS:
Unfortunately all the board/banner/etc images are embedded in the HTML. I'm currently in correspondence with LP about it ATM, but it looks like we might not be able to change it

Greasemonkey can change the HTML.

Greasemonkey can change the HTML.

I realise that, i am talking to LP about it naow C)P

ALSO, i am updating the top post with more info.
Razzorman, you should look at the new info

EDIT:
got changing <img> tags working in stylish. check top post

Well, my CT (custom theme) is off to a good start. check attached for what it looks like ATM

that's funny, with the birds.
you know, we're not directly against more custom themes for the forum, there are just some requirements they have to meet. Like being a theme for SMF, having a relation to Nifflas' work, and a certain quality standard. So if any of you is hellbent on having more theme choices (and making them available to a broader public), maybe you could get into that.

The birds one looks kinda like a FiNCK theme, so that could work as a CT.

=|=

Indeed, it is a FiNCK theme  
i've attached another screenie of what it looks like

There is still alot to do, but i have a banner and sidebars working, that will move to suit your monitor

If you want to test it yourself (PWEASE!), set your theme to WaDF then set stylish with:

Awesome.
I'll get to work on my Saira theme soon enough too. I just have a lot of other stuff to do at the moment.

you do realize that I mentioned that the theme would have to be a SMF theme, right?

As of now, i'm working on it in Stylish (CSS) - that's the whole idea of the custom themes. i'll have a look at SMF, but i think i will stay with CSS for the moment

If I make a duplicate of the theme the changes are based on, and I replace the CSS, then it should work.

But I do want to have static images instead of base encoded images for performance and caching reasons.

Man, the FiNCK theme is great. It's still missing a lot of stuff, though. Right now what I notice is that the images/catbg.jpg or whatever sticks out in reply mode. Also, some of the gray looks bad on the brown. But the homepage still looks awesome!

If I make a duplicate of the theme the changes are based on, and I replace the CSS, then it should work.

But I do want to have static images instead of base encoded images for performance and caching reasons.

Really? cool. i finish work on this It's based on the WaDF theme. I'll upload the images once i've finished (unless you want them now)

Man, the FiNCK theme is great. It's still missing a lot of stuff, though. Right now what I notice is that the images/catbg.jpg or whatever sticks out in reply mode. Also, some of the gray looks bad on the brown. But the homepage still looks awesome!

I relalise  
I was starting with the main page, then moving on