Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: MadScout on September 04, 2004, 07:12:30 PM

Title: SMF Theme Making Tutorial
Post by: MadScout on September 04, 2004, 07:12:30 PM
Hey guys, i just completed a simple SMF theme making tutorial for people who may be new to web development or are unfamiliar with the CSS structure of SMF.  I'd love to hear some feedback too.  Hope this can be of use to you ;).

http://patrick.hardcorecoders.net/tutorials/

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: Grudge on September 04, 2004, 07:23:17 PM
Looks nice, should be helpful to people!
Title: Re: SMF Theme Making Tutorial
Post by: A.M.A on September 04, 2004, 07:25:54 PM
really good especially the graphics samples of each CSS .. thanks for sharing this.
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 04, 2004, 07:27:01 PM
Thanks, i thought that the graphics would be a great addition to the tutorial, so i added them in as i went. :)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: Dem0n on September 04, 2004, 11:38:04 PM
Good job bro.
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 04, 2004, 11:41:27 PM
Thx to ^ this guy for inspiring me to create this tutorial ;)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: NoRad on September 04, 2004, 11:59:46 PM
Excellent work on the CSS. Now we need a similar tutorial for the individual theme files. The existing one is just a tad vague.
Title: Re: SMF Theme Making Tutorial
Post by: Vinoth on September 05, 2004, 04:33:02 AM
great, i have saved it to my desktop, will read it today night.
Title: Re: SMF Theme Making Tutorial
Post by: andrea on September 05, 2004, 01:13:42 PM
very nice!
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 05, 2004, 01:41:29 PM
Thank you ;)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: TarantinoArchives on September 07, 2004, 01:02:43 PM
thats what i was looking for. good job  :D

A question: Do all those files in a newly created theme folder have to be chmodded in any way? because when I chose to edit for example the style.css from the admin panel, i cant "save changes", the button simply doesnt work
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 08, 2004, 07:13:14 AM
Check and make sure that the URL to your forum template is correct.   I had problems with that running on a localhost.  Although, i think i can remember chmodding the templates dir in YSE? Prehaps a read write execute for all?

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: Cypher7 on September 08, 2004, 09:18:29 AM
Great job... that is really useful...

cheers...
Title: Re: SMF Theme Making Tutorial
Post by: [Unknown] on September 09, 2004, 12:50:51 AM
Quote from: TarantinoArchives on September 07, 2004, 01:02:43 PM
A question: Do all those files in a newly created theme folder have to be chmodded in any way? because when I chose to edit for example the style.css from the admin panel, i cant "save changes", the button simply doesnt work

They have to be 777, or SMF can't change the files.

-[Unknown]
Title: Re: SMF Theme Making Tutorial
Post by: trenchteam on September 09, 2004, 07:45:40 AM
Good work.  STicky TOPIC for sure! :D
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 09, 2004, 09:39:40 PM
w00t!  Im glad you guys are getting good usage out of this.  It took me a looong time to make :)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: Chris Cromer on September 10, 2004, 05:17:04 PM
Great job Patrick. :)
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 11, 2004, 07:52:54 PM
Quote from: Chris Cromer on September 10, 2004, 05:17:04 PM
Great job Patrick. :)

Thanks Chris! :)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: SMUserGT on September 12, 2004, 06:48:29 PM
I have 3 Things to say...

(1) So Simple
(2) So Easy
(3) So Sleek

Good Job Patrick!
Title: Re: SMF Theme Making Tutorial
Post by: Dem0n on September 13, 2004, 03:55:03 AM
Quote from: smartguy240 on September 11, 2004, 07:52:54 PM
Quote from: Chris Cromer on September 10, 2004, 05:17:04 PM
Great job Patrick. :)

Thanks Chris! :)

Patrick

Listening to me does pay off..lol
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 13, 2004, 07:37:53 AM
Yeah yeah, i guess so ;)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on September 14, 2004, 11:23:53 PM
Version 2.0 has been released today!  Basically the only changes are that A.M.A. took the time to create a stylesheet for the tutorial, added in a new title, and arranged it in a more professional layout for easier navigation.  The content is still the same, but a special thanks goes out to A.M.A.  (http://www.simplemachines.org/community/index.php?action=profile;u=43)for the excellent creation of styles for this tutorial. Thanks a million A.M.A.! It makes the tutorial much more fun/easier to look at!

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: Dem0n on September 15, 2004, 04:30:31 PM
Very nice job  both of you.
Title: Re: SMF Theme Making Tutorial
Post by: warp on September 17, 2004, 04:35:53 AM
Excellent tutorial! Thanks for taking the time to write this it will be very helpful!  :)
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on October 05, 2004, 07:31:31 AM
You're Welcome :)

BTW: Any suggestions on things i should change?

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: Prone on October 07, 2004, 10:59:00 AM
Shouldn't this be stickied?

Great job there!

Keep it up and thanks for sharing
Phil
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on October 07, 2004, 04:18:19 PM
Oh, i wasnt even aware that it wasnt stickied.  Well, there is nothing that i can do about that.  I guess a Mod or Admin will have to sticky it for me :)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: A.M.A on October 07, 2004, 07:55:19 PM
It is already there in this sticky topic: http://www.simplemachines.org/community/index.php?topic=16843.0
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on October 07, 2004, 10:52:16 PM
Bah, ok then.  I see you are a mod now too A.M.A.!

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: blunt on October 11, 2004, 04:24:50 PM
So, noob question coming here...will the skins that people like Andrea made, work on a forum that I downloaded today?  I downloaded the latest one, which was SMF 1.0 RC2.

Had a few minor headaches, but I've got it up and running, and I'm itching to change the theme now.  I've skinned a vB forum before, but this looks a bit different.
Title: Re: SMF Theme Making Tutorial
Post by: [Unknown] on October 11, 2004, 04:25:57 PM
RC1 themes should be compatible with RC2.

-[Unknown]
Title: Re: SMF Theme Making Tutorial
Post by: blunt on October 11, 2004, 04:36:17 PM
Quote from: [Unknown] on October 11, 2004, 04:25:57 PM
RC1 themes should be compatible with RC2.

-[Unknown]

Great, thanks for the prompt reply :D 

BTW, congrats on the software - I only got my hosting package today at just before noon (UK) and I've since downloaded SMF, uploaded it on the ftp and set up all the forums, which I think's pretty good going for a first attempt at installing a Board of my own.  So it goes to show that it's simple enough to use, and pretty well thought out, if a noob like me can do it :)
Title: Re: SMF Theme Making Tutorial
Post by: gusto5 on January 13, 2005, 10:38:44 PM
im confused how to change the font size of the forum description.
Title: Re: SMF Theme Making Tutorial
Post by: CapriSkye on January 13, 2005, 10:58:12 PM
Quote from: gusto5 on January 13, 2005, 10:38:44 PM
im confused how to change the font size of the forum description.

with default style.css you can't just change the description. you can try to add this in style.css

.windowbg2 td
{
font-size: 20pt;
}


and see if that gets what you want, else you'll have to make your own tag in the theme.
Title: Re: SMF Theme Making Tutorial
Post by: gusto5 on January 13, 2005, 11:16:38 PM
never mind. my hopes were to make the description smaller than the forum title, but i guess you cant do that
Title: Re: SMF Theme Making Tutorial
Post by: CapriSkye on January 13, 2005, 11:22:55 PM
Quote from: gusto5 on January 13, 2005, 11:16:38 PM
never mind. my hopes were to make the description smaller than the forum title, but i guess you cant do that

there's another way actually, in your description put this

<span style="font-size:9pt">your board description</span>


some basic html inside description is allowed.
Title: Re: SMF Theme Making Tutorial
Post by: Anguz on February 13, 2005, 11:11:46 PM
Thank you for writing this, Patrick. It's helpful to see the graphics next to the styles. I downloaded it, alway like to have a local copy of things, and made a CHM with it. Am attaching it here in case someone wants it. If you don't want this version of it, let me know and I'll remove it.
Title: Re: SMF Theme Making Tutorial
Post by: MadScout on February 16, 2005, 06:36:51 AM
Sure thing!  I would also have no problem if you guys wanted to include that in your installation package as well.  Im sure plenty of people would find it as a useful resource.

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: happytutor on March 23, 2005, 08:57:38 PM
Thanks Patrick!   :-*
Title: Re: SMF Theme Making Tutorial
Post by: SaltedWeb on March 26, 2005, 11:35:13 PM
 8)

Long time user PHpbb, short time user. SMF.
Your tutorial made it seem as if I had done this for a year.

Thanks
Newbie SMF user.

Paul


Title: Re: SMF Theme Making Tutorial
Post by: edchapman on March 27, 2005, 10:56:53 PM
I guess I should have put this here....>
http://www.simplemachines.org/community/index.php?topic=31557.msg237216#msg237216
Title: Re: SMF Theme Making Tutorial
Post by: SaltedWeb on June 01, 2005, 09:21:48 PM
Wow,
This has to be the best posting topic in SMF.
It should be on your side bar, this solves many many topics.

Just wanted to say
Thank You so much this is perfect.


Cozmo
Title: Re: SMF Theme Making Tutorial
Post by: gwen on July 20, 2005, 11:26:30 AM


Smartguy240

Thank you so much!  I know just enough code to mess things up  and now- now I can mess it up and play around and then set it back to default!  LOL

Appreciate your help and all the work you did.
Title: Re: SMF Theme Making Tutorial
Post by: Envy on August 01, 2005, 06:49:24 AM
I just want to add my thankyou in. Because of that tutorial, I was able to make a theme that looks almost identical to my old phpBB theme! Thankyou SO much!  ;D
Title: Re: SMF Theme Making Tutorial
Post by: teeps on August 08, 2005, 07:00:35 AM
Hey Patrick,

I'd love to look at this tutorial, but your site seems to be down.  Is there anyway to get hold of it?

Thanks.
Title: Re: SMF Theme Making Tutorial
Post by: Anguz on August 08, 2005, 08:07:58 AM
http://www.simplemachines.org/community/index.php?topic=16218.msg214084#msg214084

Attached file.
Title: Re: SMF Theme Making Tutorial
Post by: teeps on August 08, 2005, 09:17:16 AM
Thanks Anguz,

I couldn't read that on my linux machine earlier on, but the windows machine I'm on now is cool with it.  Nice one  ;)

Teeps
Title: Re: SMF Theme Making Tutorial
Post by: Zada on March 22, 2006, 09:27:33 PM
I don't seem to have that 'edit' after I click the theme that I am using.. 
Title: Re: SMF Theme Making Tutorial
Post by: eriktm on March 23, 2006, 03:58:58 AM
Great tutorial! :D :D
Title: Re: SMF Theme Making Tutorial
Post by: K_4_kelly on May 03, 2006, 07:00:03 PM
cheers!
Title: Re: SMF Theme Making Tutorial
Post by: hygron on June 30, 2006, 02:41:21 AM
great job...I don't know how much customization i am going to try right off the back, but I can't wait to explore using your hints...thanks hygron...hygronomics.com
Title: Re: SMF Theme Making Tutorial
Post by: mygurlstuff on August 13, 2006, 02:58:23 PM
Patrick ~

Thank you so much. This is just what I was looking for!!

Cheryl

Quote from: smartguy240 on September 04, 2004, 07:12:30 PM
Hey guys, i just completed a simple SMF theme making tutorial for people who may be new to web development or are unfamiliar with the CSS structure of SMF.  I'd love to hear some feedback too.  Hope this can be of use to you ;).

http://patrick.hardcorecoders.net/tutorials/ (http://patrick.hardcorecoders.net/tutorials/)

Patrick
Title: Re: SMF Theme Making Tutorial
Post by: KillBill21 on August 14, 2006, 07:20:18 AM
man, this is very useful.  I know IPB but SMF is a little different (haha)  Thanks again.
Title: Re: SMF Theme Making Tutorial
Post by: torchdancer on October 01, 2006, 02:37:19 AM
This tutorial is gone?

That is to bad  :(

Kat
Title: Re: SMF Theme Making Tutorial
Post by: adnet23 on October 02, 2006, 04:56:14 PM
This link isn't working for me.  I can get to the homepage, so i know i can get something... but i cant get to this patrick tutorial page... is it gone?
Title: Re: SMF Theme Making Tutorial
Post by: Jauhari on October 02, 2006, 10:48:13 PM
Good
Title: Re: SMF Theme Making Tutorial
Post by: a2h_ on October 03, 2006, 01:58:39 AM
Aparrently, his host has a new domain, hcchosting.us, and when I went to patrick.hcchosting.us, there was a placeholder message saying apache cpanel and all that stuff was installed and ready to go
Title: Re: SMF Theme Making Tutorial
Post by: Chris Cromer on October 03, 2006, 08:12:53 AM
Patrick is a fellow administrator of my website. I will get in touch with him and see what is going on with his tutorial. I know that his hosting was free... and if his hosting is gone... then so might be all his stuff.
Title: Re: SMF Theme Making Tutorial
Post by: Chris Cromer on October 03, 2006, 06:24:08 PM
Alright I talked to him. He said he didn't realize people still used his tutorial, so when his site got moved over he didn't put it back up.

Anyway, you can access it here: http://www.patrick.hcchosting.com/tutorials/
Title: Re: SMF Theme Making Tutorial
Post by: adnet23 on October 07, 2006, 12:02:15 AM
Thanks for updating the link!
Title: Re: SMF Theme Making Tutorial
Post by: Dhekelian on October 07, 2006, 09:59:59 AM
Can't seem to access the new tutorial.  :'(
Title: Re: SMF Theme Making Tutorial
Post by: neko-xexe on October 29, 2006, 07:32:57 PM
Me neither...broken link  :'(
Title: Re: SMF Theme Making Tutorial
Post by: Chris Cromer on October 30, 2006, 08:38:54 PM
I just tried the link in my last post and it is working... not sure what to tell you.

Here is the new link again incase you didn't see my last post: http://www.patrick.hcchosting.com/tutorials/
Title: Re: SMF Theme Making Tutorial
Post by: jrstark on January 07, 2007, 07:27:18 PM
Link isn't working again, is there a new location?  The link in the first post is also broken.
Title: Re: SMF Theme Making Tutorial
Post by: vbgamer45 on January 07, 2007, 07:34:23 PM
You can get the help file from this post
http://www.simplemachines.org/community/index.php?topic=16218.msg214084#msg214084
Title: Re: SMF Theme Making Tutorial
Post by: the_observer on February 09, 2007, 07:56:22 AM
The link didnt load 4 me the first time i tried it too.
If you keep trying it will load eventually  ;D
(4 me loaded with the 3rd try)

Thx.
Title: Re: SMF Theme Making Tutorial
Post by: ftvguy on February 10, 2007, 01:46:57 AM
How come your image banner knows my IP ? My IP was not logged here ?
Title: Re: SMF Theme Making Tutorial
Post by: perplexed on February 10, 2007, 08:43:22 AM
an update for 1.1x would be great :)

there is also a theme generator on smfhacks I saw the other day, where you can just change colours in the default theme.  Not exactly a tutorial but if you like the default theme and just want a different colour scheme it's useful.
Title: Re: SMF Theme Making Tutorial
Post by: ftvguy on February 12, 2007, 12:08:54 AM
Link Down !
Title: Re: SMF Theme Making Tutorial
Post by: chouxpsatry2002 on March 17, 2007, 02:38:31 PM
i am not able to view the page is this link down ???
Title: Re: SMF Theme Making Tutorial
Post by: Ibizan on March 18, 2007, 10:46:57 AM
So where can we find a listing of the corresponding images that need to be changed. For example, if you're changing the css from a default blue to a red then you'd want to change the buttons and other images right?
Title: Re: SMF Theme Making Tutorial
Post by: jagannath on January 13, 2008, 09:35:30 AM
http://patrick.hcchosting.com/tutorials/
Title: Re: SMF Theme Making Tutorial
Post by: Jakki on March 28, 2008, 02:58:13 PM
I was just there and it worked for me...I'm looking it over but sounds very confusing.
Title: Re: SMF Theme Making Tutorial
Post by: sleepdriver on June 22, 2008, 02:02:19 PM
I would love to see this tutorial but the link doesn't work for me.  Any chance it's been moved?
Title: Re: SMF Theme Making Tutorial
Post by: gough14 on March 01, 2009, 11:33:57 AM
that links dosnt work or i can find the tutorial
Title: Re: SMF Theme Making Tutorial
Post by: chefjohnnie on April 07, 2009, 10:32:07 AM
Quote from: smartguy240 on September 04, 2004, 07:12:30 PM
Hey guys, i just completed a simple SMF theme making tutorial for people who may be new to web development or are unfamiliar with the CSS structure of SMF.  I'd love to hear some feedback too.  Hope this can be of use to you ;).

http://patrick.hardcorecoders.net/tutorials/ (http://patrick.hardcorecoders.net/tutorials/)

Patrick
tried to check it out but link leads to       Online Auto Insurance Quote
Title: Re: SMF Theme Making Tutorial
Post by: .Vapor on July 02, 2009, 04:09:53 PM
Use this link m8 : http://patrick.hcchosting.com/tutorials/
Title: Re: SMF Theme Making Tutorial
Post by: Gary on July 02, 2009, 11:49:37 PM
I strongly recommend against using the admin center for editing your theme. You can break the forum that way. Use a text editor and FTP.

Also that only handles CSS, you'll need to edit HTML if you want to move things around.

While that tutorial covers the babylon theme in 1.0, the process is still the same.
Title: Re: SMF Theme Making Tutorial
Post by: KensonPlays on February 26, 2010, 03:15:06 PM
(sorry to bring up a old topic)

an update for SMF 2.0RC2 would be awesome!
Title: Re: SMF Theme Making Tutorial
Post by: zarkani on August 04, 2010, 07:43:51 PM
What is this? Where is it!!!!!!!!!!
Title: Re: SMF Theme Making Tutorial
Post by: CheekyChimpanzee on April 05, 2011, 04:39:55 AM
dead link.
Title: Re: SMF Theme Making Tutorial
Post by: Gary on April 05, 2011, 04:43:03 AM
The tutorial is over 7 years old. It'd be worthless now even if it were still available.
Title: Re: SMF Theme Making Tutorial
Post by: alizali on October 09, 2011, 01:09:04 AM
is there any help for new SMF version 2.0.1???
Title: Re: SMF Theme Making Tutorial
Post by: coolcurrent on April 03, 2013, 12:44:21 PM
the link seems to be dead