Nifflas' Support Forum

General => About Nifflas' Website and Forum => Topic started by: AClockworkLemon on June 13, 2010, 04:33:35

Title: Official Custom Theme User's Group
Post by: AClockworkLemon on June 13, 2010, 04:33:35
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  C)p

...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 (https://addons.mozilla.org/en-US/firefox/addon/2108/). 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 (https://addons.mozilla.org/en-US/firefox/addon/1843/). 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 :D)
Code: [Select]
@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):
Spoiler: Warning, lots of code (click to show/hide)

but how do i edit <img> tags?
to edit img tags:
Code: [Select]
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
Edit: New info added :D


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.
Title: Re: Official Custom Theme User's Group
Post by: Dataflashsabot on June 13, 2010, 12:10:19
Pretty cool shizzle dawg. I think I'll keep with the WaDF theme for now, though.
Title: Re: Official Custom Theme User's Group
Post by: Razzorman on June 15, 2010, 10:00:53
Sign me up. :D

Here is the extremely crappy "Saira theme" that I showed off in the WaDF topic. I put the name in quotes because it sucks.
Code: [Select]
@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.
Title: Re: Official Custom Theme User's Group
Post by: AClockworkLemon on June 15, 2010, 14:18:37
Also, you might want to skip the body tag if you aren't on a 16:10 monitor.

Lucky i have one :D

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
Title: Re: Official Custom Theme User's Group
Post by: Dataflashsabot on June 15, 2010, 14:42:20
Greasemonkey can change the HTML.
Title: Re: Official Custom Theme User's Group
Post by: AClockworkLemon on June 16, 2010, 01:01:35
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
Title: Re: Official Custom Theme User's Group
Post by: Miss Paula on June 16, 2010, 10:47:50
that's funny, with the birds. :D
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. :P
Title: Re: Official Custom Theme User's Group
Post by: Yukabacera on June 16, 2010, 11:12:51
The birds one looks kinda like a FiNCK theme, so that could work as a CT.

=|=
Title: Re: Official Custom Theme User's Group
Post by: AClockworkLemon on June 16, 2010, 12:16:38
Indeed, it is a FiNCK theme  C)p
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:
Spoiler: CSS CODE :D (click to show/hide)
Title: Re: Official Custom Theme User's Group
Post by: Razzorman on June 16, 2010, 12:26:37
Awesome. :D
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.
Title: Re: Official Custom Theme User's Group
Post by: Miss Paula on June 16, 2010, 12:49:33
you do realize that I mentioned that the theme would have to be a SMF theme, right?
Title: Re: Official Custom Theme User's Group
Post by: AClockworkLemon on June 16, 2010, 12:57:53
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

Edit: Had a look at the SMF website, and their themes are a little more complicated. I think for the moment i'll stick to customising the CSS for existing themes, but the possibility is always out there
Edit: For the people who might make SMF themes, could you upload the WaDF / Knytt template or whatever it is called so we cn have a fiddle? just a zip or whatever
Title: Re: Official Custom Theme User's Group
Post by: LPChip on June 16, 2010, 15:11:46
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.
Title: Re: Official Custom Theme User's Group
Post by: Purple Pineapple on June 16, 2010, 21:01:06
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!
Title: Re: Official Custom Theme User's Group
Post by: AClockworkLemon on June 16, 2010, 22:44:49
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 :D 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  C)p
I was starting with the main page, then moving on

Edit:
Well, the FiNCK theme has progressed a huge amount :D
It's in Beta stage, so i need testers! I'm setting up a thread in Collaborations
Title: Re: Official Custom Theme User's Group
Post by: Miss Paula on June 18, 2010, 15:39:42
People of Inclination for Custom Themes!
It has been decided thusly:


This all is just because: The more themes there are, the more work it is to maintain every one of them and to integrate all the forum modifications into them.
And since we're all oh so strained for time, we want to keep the effort required to a minimum. So please don't flood us with custom theme ideas/requests, and please don't expect us to implement any and all of them.
Title: Re: Official Custom Theme User's Group
Post by: StraightFlame on June 18, 2010, 18:54:38
Gak!? I can't deactivate FiNCK theme! How am i supposed to do that?
Title: Re: Official Custom Theme User's Group
Post by: Purple Pineapple on June 18, 2010, 19:20:36
Gak!? I can't deactivate FiNCK theme! How am i supposed to do that?
Well first of all just uncheck it from stylish. You also shouldn't have more than one theme going at once. If that doesn't work restart FireFox. If that doesn't work clear your cache and delete all your temp files and then restart FireFox.
Title: Re: Official Custom Theme User's Group
Post by: StraightFlame on June 18, 2010, 21:29:01
Thankiez yous!
Title: Re: Official Custom Theme User's Group
Post by: Whistler on July 03, 2010, 22:47:41
The more themes there are, the more work it is to maintain every one of them and to integrate all the forum modifications into them.
And the more themes there are, the harder it will be to make a theme checker like in my sig!
Title: Re: Official Custom Theme User's Group
Post by: StraightFlame on July 03, 2010, 22:58:06
And that is what you think just when you forget that some people (mostly me) have a custom theme all for themselves!
Title: Re: Official Custom Theme User's Group
Post by: Whistler on July 09, 2010, 20:13:10
And that is what you think just when you forget that some people (mostly me) have a custom theme all for themselves!
And that is why I no longer have a theme checker. i'm also going to use custom themes now.
Title: Re: Official Custom Theme User's Group
Post by: PeppyHare4000 on August 11, 2010, 02:08:44
is there going to be a theme for saira?
Title: Re: Official Custom Theme User's Group
Post by: AClockworkLemon on August 11, 2010, 02:57:58
is there going to be a theme for saira?

I'll see if i can be bothered to whip one up. i'm busy at the moment, but i may have time in the next school holidays. For now, what sort of changes should be made to make it saira-ish? please suggest!  :crazy:
Title: Re: Official Custom Theme User's Group
Post by: Purple Pineapple on August 11, 2010, 07:34:36
is there going to be a theme for saira?
There already is: http://nifflas.lpchip.nl/index.php?topic=3574
Title: Re: Official Custom Theme User's Group
Post by: PeppyHare4000 on August 13, 2010, 02:26:34
thanks, this is awesome :)