Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: IchBin™ on September 23, 2010, 02:37:42 PM

Title: Video Theme Tutorials
Post by: IchBin™ on September 23, 2010, 02:37:42 PM
Ok, so I've finally finished making and slightly editing my set of video's for how to make a basic custom SMF theme. It's a set of nine 15 minute video's (2hr 15min. total. ) There is nothing fancy done in the tutorials other than me going through the pain of changing little details to make the theme look like my photoshop layout.

This is NOT a photoshop tutorial so you will not see any of the time spent making my theme in photoshop. I'll have to apologize a little bit for video's part 6 and 7 because I went slightly over the youtube 15 minute limit. So I had to cut some time out of the vidoe's. I tried to pick the most inconspicuous parts, so sorry if there are a few points that kind of jump.

Feel free to comment in this topic if you need something clarified or have a question. I make no claims at being a good designer/coder. I just have fun doing it every now and then. If there's good reception for such a thing I may add some more video's for doing actual customizations to the theme like adding options to display things based on the theme settings in the admin panel.

All video's are on my youtube channel created just for this.

http://www.youtube.com/user/ichbintm

You can see the somewhat finished theme at this URL:
http://demo.ichbin.us/index.php?theme=7
Title: Re: Video Theme Tutorials
Post by: kat on September 23, 2010, 03:10:18 PM
Good stuff, IAm! ;)


What about hosting them here?

If they're Flash movies, we'd only need a small bit of HTML...
Title: Re: Video Theme Tutorials
Post by: IchBin™ on September 23, 2010, 03:15:10 PM
Exported they are mp4 movies. If someone wants to convert them, I don't care where they are hosted. I just don't want to eat up my bandwidth. :)
Title: Re: Video Theme Tutorials
Post by: kat on September 23, 2010, 03:25:29 PM
I can convert 'em!

I can convert the YouTube ones. But, I suspect converting the originals would be better quality.

If you can get them to me, somehow, I can convert them to any format you like! :)
Title: Re: Video Theme Tutorials
Post by: Crip on September 23, 2010, 06:11:18 PM
Cool stuff there B0ss => (http://www.simplemachines.org/community/Themes/default/images/post/thumbup.gif) (http://www.simplemachines.org/community/Themes/default/images/post/thumbup.gif) .. I think it will be helpful. :)
Title: Re: Video Theme Tutorials
Post by: Antechinus on September 23, 2010, 07:20:48 PM
Quote from: K@ on September 23, 2010, 03:10:18 PM
Good stuff, IAm! ;)


What about hosting them here?

If they're Flash movies, we'd only need a small bit of HTML...
Why would we want to host them here? SMF could have its own YouTube channel.
Title: Re: Video Theme Tutorials
Post by: hsimpson on September 23, 2010, 08:12:17 PM
Thanks for the tutorials :D
Title: Re: Video Theme Tutorials
Post by: flapjack on September 23, 2010, 08:21:38 PM
crappy youtube quality :(
try vimeo.com and upload them in hd :)
Title: Re: Video Theme Tutorials
Post by: hsimpson on September 23, 2010, 08:31:46 PM
I tried some random video's and so far the quality isn't that bad (full screen) --- I have a 24" screen with HD resolution..
Title: Re: Video Theme Tutorials
Post by: Bigguy on September 23, 2010, 08:50:15 PM
Nice job for sure. :)
Title: Re: Video Theme Tutorials
Post by: busterone on September 23, 2010, 10:22:39 PM
Nice job.  :)
Title: Re: Video Theme Tutorials
Post by: Hj Ahmad Rasyid Hj Ismail on September 24, 2010, 06:21:47 AM
I'd say this is a great well done job. I will highlight this to new users fro sure. I hope this can be made sticky too.
Title: Re: Video Theme Tutorials
Post by: Robert. on September 24, 2010, 02:23:58 PM
Really nice tutorials, IchBin! :D
Title: Re: Video Theme Tutorials
Post by: kat on September 24, 2010, 05:31:43 PM
All converted to .swf format (Same quality).  :)

So, they're ready when I get the call.

I'm awat for a few days, from Monday noon-ish.

Just got to find a way to get them to whoever want them.
Title: Re: Video Theme Tutorials
Post by: Herr_Inoddorell on September 24, 2010, 06:02:55 PM
Very cool thank you very much, will check it out 8)
Title: Re: Video Theme Tutorials
Post by: busterone on September 24, 2010, 11:01:48 PM
Quote from: K@ on September 24, 2010, 05:31:43 PM
All converted to .swf format (Same quality).  :)

So, they're ready when I get the call.

I'm awat for a few days, from Monday noon-ish.

Just got to find a way to get them to whoever want them.
Are yours from the originals or captured from youtube?

I captured them all from youtube to watch at my own convenience. If yours are original quality then I would like a copy of them instead.
Title: Re: Video Theme Tutorials
Post by: kat on September 25, 2010, 06:02:02 AM
I converted the original mp4 files.

Zipped-up, they're 580 meg.

I'm gonna try KGB Archiver, when I can, coz that'll squash 'em up better.

I hope they'll be hosted, here, when I can get 'em somewhere to download.
Title: Re: Video Theme Tutorials
Post by: xenovanis on September 25, 2010, 03:22:30 PM
Thanks for sharing, IchBin™  :)

Quote from: ahrasis on September 24, 2010, 06:21:47 AM
I'd say this is a great well done job. I will highlight this to new users fro sure. I hope this can be made sticky too.

Too much stickies in this board already. I added this topic to the index here
ReadMe: Graphics and Themes - Important (http://www.simplemachines.org/community/index.php?topic=82003.0)
Title: Re: Video Theme Tutorials
Post by: IchBin™ on September 27, 2010, 02:00:48 PM
Added a link to the theme which is almost finished with the additional graphics I wanted to add in the first post. I've added some cool jquery drop downs to the search and login menu items. Will hopefully get this theme finished this week so I can submit it to the customize site.
Title: Re: Video Theme Tutorials
Post by: Crip on October 05, 2010, 05:46:35 PM
Theme looks really good B0ss (http://www.simplemachines.org/community/Themes/default/images/post/thumbup.gif) (http://www.simplemachines.org/community/Themes/default/images/post/thumbup.gif)
Title: Re: Video Theme Tutorials
Post by: Antechinus on October 05, 2010, 07:11:53 PM
Looks nice but you have a couple of validation errors in the main menu due to duplicate id's. ;)
Title: Re: Video Theme Tutorials
Post by: IchBin™ on October 06, 2010, 02:08:03 PM
Yeah I haven't run through validation or browser testing yet. Had a broken computer for the last little while. :( Thanks for the heads-up Ant.
Title: Re: Video Theme Tutorials
Post by: kat on October 06, 2010, 02:10:17 PM
I've got 'em converted...

Where can I upload them?
Title: Re: Video Theme Tutorials
Post by: Bigguy on October 08, 2010, 02:01:38 AM
Did ya find a place to upload them ???
Title: Re: Video Theme Tutorials
Post by: IchBin™ on October 08, 2010, 09:48:04 AM
Quote from: K@ on October 06, 2010, 02:10:17 PM
I've got 'em converted...

Where can I upload them?

If you're asking me, I don't have a place. That's why I put them on youtube.
Title: Re: Video Theme Tutorials
Post by: kat on October 08, 2010, 04:04:09 PM
Is there any way I can get the converted files here?
Title: Re: Video Theme Tutorials
Post by: IchBin™ on October 08, 2010, 04:23:50 PM
Wouldn't that be up to the Team?
Title: Re: Video Theme Tutorials
Post by: kat on October 08, 2010, 04:32:35 PM
Yeah.

I guess the easiest way would be for me to have temporary FTP access to somewhere.

I wonder who I'd need to ask about that...

Norv? Admins?
Title: Re: Video Theme Tutorials
Post by: WillyP on October 12, 2010, 01:45:00 PM
HooRay for IchBin!  HooRay for FireBug!
Title: Re: Video Theme Tutorials
Post by: Arthur2011 on December 14, 2010, 08:55:36 PM
Sorry - I am new to this and have no clue where to start. i am tryng to follow the video but my default theme is totally different from the one shown. It was no dropdown menus and therefore I can't proceed with the instructions after the second part. Please help me.
Title: Re: Video Theme Tutorials
Post by: WillyP on December 15, 2010, 07:20:36 AM
You must be using SMF 1.x. 

You will probably want to upgrade you site to SMF2 when it is stable anyway (soon), so why not set up a test server with SMF2 RC4 to play with?  Once you have the hang of using Firebug, and editing the css, you easy find it to customize any.
Title: Re: Video Theme Tutorials
Post by: Matthew K. on December 15, 2010, 09:50:38 AM
Nice job, Ich!
Title: Re: Video Theme Tutorials
Post by: Gary on December 15, 2010, 11:12:23 AM
Quote from: Arthur2011 on December 14, 2010, 08:55:36 PM
It was no dropdown menus and therefore I can't proceed with the instructions after the second part.
That doesn't matter. The dropdowns have the same links that the sidebar in 1.1 has. In fact in 2.0, you can switch back to them at will.
Title: Re: Video Theme Tutorials
Post by: tazgal on December 15, 2010, 05:49:49 PM
A truly great tutorial!  Thank you.
Title: Re: Video Theme Tutorials
Post by: IchBin™ on December 15, 2010, 07:08:47 PM
5 Gadson Rings,
I thought they were talking about the main menu dropdown. Not the admin menu's.

Quote from: Arthur2011 on December 14, 2010, 08:55:36 PM
Sorry - I am new to this and have no clue where to start. i am tryng to follow the video but my default theme is totally different from the one shown. It was no dropdown menus and therefore I can't proceed with the instructions after the second part. Please help me.

You should probably start a support topic for your problem.

Quote from: tazgal on December 15, 2010, 05:49:49 PM
A truly great tutorial!  Thank you.

You're welcome! Glad you like them.
Title: Re: Video Theme Tutorials
Post by: Arthur2011 on December 19, 2010, 09:29:23 AM
Quote from: WillyP on December 15, 2010, 07:20:36 AM
You must be using SMF 1.x. 

You will probably want to upgrade you site to SMF2 when it is stable anyway (soon), so why not set up a test server with SMF2 RC4 to play with?  Once you have the hang of using Firebug, and editing the css, you easy find it to customize any.

That was precisely the problem. I didn't realize that the stable version is actually outdated. The code is so different. Anyway I upgraded and it worked. Thanks so much for your help and thanks to IchBin for the awesome tutorial too, of course.
Title: Re: Video Theme Tutorials
Post by: butchs on December 19, 2010, 12:03:42 PM
After upgrading my theme to RC4, I gotta subscribe to this thread so I can see all the videos and fix stuff!
:)
Title: Re: Video Theme Tutorials
Post by: IchBin™ on December 19, 2010, 10:00:07 PM
Glad I could help. There's quite a few changes between RC3 and RC4, but with the way I've done the video tutorials, there shouldn't be any problem with figuring out how things work if you learn to use Firebug. :)
Title: Re: Video Theme Tutorials
Post by: kat on April 22, 2011, 06:41:41 AM
Had a moderation report, believe it or not, saying that the demo link's toast.
Title: Re: Video Theme Tutorials
Post by: ARG01 on April 22, 2011, 09:02:23 AM
Quote from: K@ on April 22, 2011, 06:41:41 AM
Had a moderation report, believe it or not, saying that the demo link's toast.

Link seems to work fine for me. Nice tut's IchBin.  ;)
Title: Re: Video Theme Tutorials
Post by: Illori on April 22, 2011, 09:09:18 AM
Quote from: ARG on April 22, 2011, 09:02:23 AM
Link seems to work fine for me. Nice tut's IchBin.  ;)

Quote from: IchBin™ on September 23, 2010, 02:37:42 PM
You can see the somewhat finished theme at this URL:
http://demo.ichbin.us/index.php?theme=7

that works for you? it does not for me.
Title: Re: Video Theme Tutorials
Post by: ARG01 on April 22, 2011, 09:49:51 AM
Lol, my mistake. The tutorial link works but not the theme demo.  ;)
Title: Re: Video Theme Tutorials
Post by: IchBin™ on April 22, 2011, 10:21:48 AM
Quote from: K@ on April 22, 2011, 06:41:41 AM
Had a moderation report, believe it or not, saying that the demo link's toast.

Thanks K@. I had moved to a new domain registrar and my demo sub-domain didn't get transfered for some reason. I've added it back so the link should start working soon.
Title: Re: Video Theme Tutorials
Post by: ARG01 on April 22, 2011, 10:37:12 AM
Link is working now.  Looking good.  ;)
Title: Re: Video Theme Tutorials
Post by: Apllicmz on May 31, 2011, 04:23:58 AM
Thank you Good work
i will start Now...
Title: Re: Video Theme Tutorials
Post by: ManojA on June 09, 2011, 08:11:53 AM
Will this tutorial work for 1.1.x?
Title: Re: Video Theme Tutorials
Post by: IchBin™ on June 09, 2011, 11:04:14 AM
The same concept will apply yes. There will be small differences though. You run into blocks feel free to post and I'm sure someone will help.
Title: Re: Video Theme Tutorials
Post by: Vice88 on September 15, 2011, 06:30:23 AM
What program do you used in the video-tutorial to edit and create .css and .phop archives?
Title: Re: Video Theme Tutorials
Post by: IchBin™ on September 15, 2011, 11:22:01 AM
Sorry, but I don't know what you are talking about. css and php? archives?

Do you mean to zip the theme up? Lately I have been using 7zip. Even windows right click -> send to -> Compressed folder works great.
Title: Re: Video Theme Tutorials
Post by: Vice88 on September 15, 2011, 09:26:08 PM
Quote from: IchBin™ on September 15, 2011, 11:22:01 AM
Sorry, but I don't know what you are talking about. css and php? archives?

Do you mean to zip the theme up? Lately I have been using 7zip. Even windows right click -> send to -> Compressed folder works great.

Ups, Sorry!! I wanted to say: what programs did you use to edit the css and the php of the theme? Did you use photoshop for what one sees in the video?
Title: Re: Video Theme Tutorials
Post by: IchBin™ on September 16, 2011, 12:37:41 PM
For code editing I think I used notepad++. Photoshop was only used to make the graphics.