Official Custom Theme User's Group

  • 25 Replies
  • 7916 Views
*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Official Custom Theme User's Group
« 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. 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 :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.
« Last Edit: June 16, 2010, 02:25:44 by AClockworkLemon »
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot

Re: Official Custom Theme User's Group
« Reply #1 on: June 13, 2010, 12:10:19 »
Pretty cool shizzle dawg. I think I'll keep with the WaDF theme for now, though.

*

Offline Razzorman

  • 965
  • 4
  • Contemplating name change.
    • View Profile
Re: Official Custom Theme User's Group
« Reply #2 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.
« Last Edit: June 15, 2010, 10:04:18 by Razzorman »
My only star: :hiddenstar:

 :D

*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Re: Official Custom Theme User's Group
« Reply #3 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
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot

Re: Official Custom Theme User's Group
« Reply #4 on: June 15, 2010, 14:42:20 »
Greasemonkey can change the HTML.

*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Re: Official Custom Theme User's Group
« Reply #5 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
« Last Edit: June 16, 2010, 04:44:59 by AClockworkLemon »
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot

*

Offline Miss Paula

  • 953
  • 30
  • I demand more of these.
    • View Profile
Re: Official Custom Theme User's Group
« Reply #6 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
Spoiler: (click to show/hide)
:hs::hs::hs::hs::fish::hs::hs::hs::hs:
:hs:

*

Offline Yukabacera

  • 256
  • 3
  • Tasen Soldier (LL868:ALDK)
    • View Profile
    • The Yukabacera Files
Re: Official Custom Theme User's Group
« Reply #7 on: June 16, 2010, 11:12:51 »
The birds one looks kinda like a FiNCK theme, so that could work as a CT.

=|=
:hiddenstar: My only one.

*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Re: Official Custom Theme User's Group
« Reply #8 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)
« Last Edit: June 16, 2010, 12:19:38 by AClockworkLemon »
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot

*

Offline Razzorman

  • 965
  • 4
  • Contemplating name change.
    • View Profile
Re: Official Custom Theme User's Group
« Reply #9 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.
« Last Edit: June 16, 2010, 15:31:42 by Razzorman »
My only star: :hiddenstar:

 :D

*

Offline Miss Paula

  • 953
  • 30
  • I demand more of these.
    • View Profile
Re: Official Custom Theme User's Group
« Reply #10 on: June 16, 2010, 12:49:33 »
you do realize that I mentioned that the theme would have to be a SMF theme, right?
Spoiler: (click to show/hide)
:hs::hs::hs::hs::fish::hs::hs::hs::hs:
:hs:

*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Re: Official Custom Theme User's Group
« Reply #11 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
« Last Edit: June 16, 2010, 13:39:20 by AClockworkLemon »
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot

*

Offline LPChip

  • You can only truly help other people by allowing them to fail.
  • 3510
  • 138
  • Excel at the thing you're the best at!
    • View Profile
    • LPChip Interactive
Re: Official Custom Theme User's Group
« Reply #12 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.
on the left, above my avatar.

MODPlug Central Forum
"If I tried to kill you, I'd end up with a big fat hole through my laptop." - Chironex

Re: Official Custom Theme User's Group
« Reply #13 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!
« Last Edit: June 16, 2010, 21:03:00 by Purple Pineapple »
Lurk more.

*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Re: Official Custom Theme User's Group
« Reply #14 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
« Last Edit: June 17, 2010, 12:40:23 by AClockworkLemon »
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot