I got our Johnny Saturn Cafe Press site integrated with the blog tonight! You can find all fourteen cool items under the Cafe Press Swag page under the Store. My personal favorite is the Johnny Saturn mug, which is quite large and great for my morning (and all day long) coffee. I wore the Johnny Saturn black baseball hat, and several of the shirts, at Wizard World Chicago, and so did Benita–We were stylin! While the store in general is not set up yet, and probably won’t be fully functional until next week, the Cafe Press store is primed and ready to go.

So far, during the set-up and fine tuning of the site, I haven’t advertised. That’s about to change. Johnny Saturn has been running on the web for years, but I used to take the scattershot approach–I hosted the comic in up to four places at once, and I spread myself around various websites, forums, and social networking sites. This time, it’s different, because I’m pulling everything together under this single site. The old business plan worked fine for a long time, but the web changes often, and webcartoonists have to remain flexible. I’ve been doing a webcomic for long enough that at one time or another I’ve probably made every mistake that can be made–luckily, I’ve learned a lot along the way, and done my fair share right things too. I guess it’s time to level-up.

More tomorrow!

Scott

I just about have the store set up at www.johnnysaturn.com.  We are starting with 17 items in the store, plus an integrated Cafe press store.  It’s all nifty, really. 

(If any of you think setting up and fleshing out one of these websites is easy, please go slap yourself silly with a trout.)

Not next week, but the week after, Johnny Saturn goes back to being fully rendered.  I colored three pages today, pretty much because I rock.  My game controller, parked under my left hand, has sped up the process considerably.  I’ve gotten noticeably quicker at coloring every since my hand surgery, back in the day, when coloring was very painful for me.  Now, zip zip zip!

Well, I’ve rambled enough.  If I keep writing, I’ll embarrass myself.

S.

This week, I’m doing an overview setting up a WordPress webcomic.  I’m going to do my best not to overlap too much with Bob Hickey’s excellent WordPress tutorial from Sketch no. 34, but of course there will be some overlap. 

1)      Get a host that is database compatible, and set up the database that will run your webcomic.  I use a Yahoo Small Business website, but that’s not an endorsement for them. I expect I’ll be looking for a new host within the year.

2)      Download and install WordPress.

3)      Download and install Comicpress.

4)      Download and install Comicpress Manager.

5)      If you have problems, go to this forum.  This is where Tyler Martin, who created Comicpress, and John Coswell, who built Comicpress Manager, often answers questions.  Even if Tyler and John are too busy, there are often knowledgeable people who point you in the right direction.

6)      There are also excellent forums at the WordPress site.

Before you start digging into your Comicpress code and modifying your site, there are some plugins that you might need.  In my case, I use the following:

1)      Ad-Minister (download here): I use this for rotating ads at the top of my blog.  I use this space outside my Project Wonderful ad boxes.

2)      Add to any: Share/Save/Bookmark Button (download here): Offers a wide list of social bookmarking links.

3)      Akismet: This plugin, which helps identify and quarantine spam, comes with WordPress, and it requires that you get a WordPress API key. 

4)      All In One SEO Pack (download here): This “Search Engine Optimizes” your blog.

5)      Comicpress Manager (download here): This makes loading comics, setting up archives, and thumb nailing quite easy.

6)      Eshop for WordPress (download here): My choice of shopping cart program.

7)      Google XML Sitemaps (download here): Notifies Google every time you update your site.

8 )      Lightbox2 (download here): I use this to set up galleries, such as my Fan Art gallery, and it displays pics at full size without distorting your blog setup.

9)      PrestoGifto (download here): Integrates your Café Press store into your blog.

10)  ReCAPTCHA (download here): Fights spam by requiring a random security word picture with each comment.

11)  WP Super cache (download here): Speeds up your blog by turning slow loading PHP into HTML on the client side.

Installing plugins is usually as simple as using an FTP program to upload the unzipped plugin to your site, depositing the new plugin’s folder in your wp-contents/plugins folder.  (I use CuteFTP as my FTP application of choice, but there are many available.)  Once you’ve signed into your WordPress site, go to Plugins, then hit “activate” after each new plugin.

Well, that’s enough for this week, I would imagine.  Next week, I’ll start getting into details of getting your site up to speed, such as how to install Project Wonderful ads, changing background colors, and modifying your blog header.

Scott.

Hope all is well out in internet land!

Last week I wrote about setting up a WordPress/Comicpress website, and some of the plugins that would come in handy.  This week, I’m going to dive into some of the basic approaches to fleshing your site out.  I’m going to assume, for the moment, that you’ve successfully installed your site, you’ve uploaded your comics, and everything is working the way it should.  That’s assuming a lot, I realize, because these things never seem to come off without a hitch or two, but hang in there.

Most of your modifications are going to be done on your WordPress Dashboard under “Design” and then “Theme Editor.”  Within the Theme Editor, you will see a column on the right of files you many access, and on the left each file’s code, and on the bottom an “Update File” button.  Pretty straightforward, really.  I would suggest that before you go modifying these files, copy and past their language into a WordPad file and save it—this way, if you mess the site up, you have the language to paste back in and restore the website.  Do this, or copy the whole file into a safe directory on your hard drive.

The files that you are most likely to access and change from the Theme Files are “Header,” “Stylesheet,” and “Footer.”  The Stylesheet is a CSS file, aka Cascading Style Sheet document, and this is where you can change all the sites colors, fonts, and many elements associated with the site’s appearance.  If anything puts off inexperienced website builders more than CSS, I don’t know what it is.  Luckily, it’s not that hard to learn. 

If you plan on changing your site’s color themes, I suggest you have the colors you want worked out in advance.  Web colors usually are expressed as hexadecimals, and they are preceded in the Stylesheet file by #.  There are many places you may go on the web to determine your color choices and their hexadecimals, such as:

http://www.htmlvalidator.com/htmlval/fontsandcolors.html

http://mediazeal.com/colorthemes.html

http://www.colorschemer.com/online.html

There are many more such online applications and guides to help you choose your colors.

Changing the colors of pages and fonts on your site is as simple as going to the existing choices in your Stylesheet and replacing your hex values for the existing one, then hitting “Update File.”  Open your site in another screen, and reload it often to see the results of your color changes.  You can also change many of your site’s design elements, or proportions, from the Stylesheet file, but I’m leaving that to a future column.

Another useful tool to use in setting up your site is Widgets.  While in the Design, go to Widgets, and there you will see an assortment of options, including Pages, Links, Meta, Recent Posts, etc.  I use Archive Dropdown, Bookmark Comic, and Text Widgets.  On the left side of the screen, next to each widget, is an “Add” button.  Hit that, and the Widget reappears on the right side of the screen.  Before you do anything with said Widget, press “Save Changes.”  You can save multiple Text widgets.

The Text Widgets are particularly useful, because you can use these to install Project Wonderful ads, Amazon.com ads, Google ads, Web Rings, and the like.  Copy your ad language, past it into one of the text boxes under Widgets, press the “Change” button at the bottom of the opened Widget, and the ad should then appear on your site.

Next week I’ll cover Headers and Footers.  See you then!  Scott.

Hi, Folk!

This week, I’m going to touch on the subject of headers and footers.  These are among the easier things to modify in WordPress.

Once you’ve signed into WordPress and have arrived at your Dashboard, go to Design, then Theme Editor.  On the right hand column, under Templates, select Header.

Under <div id=”header”>, you can place any graphics that you want displayed at the top of the site.  In my own case, I put a typical html table with my logo, a secondary logo, and language for the Ad-Minister plugin.  It looks something like this:

<div id=”header”>

<table width=”974″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”272″ height=”95″><a href=”Your URL”><img src=”You logo graphic” /></a>

<h1><a href=”<?php echo get_settings(‘home’); ?>”><?php bloginfo(‘name’); ?></a></h1>

<div class=”description”><?php bloginfo(‘description’); ?></div>

</td>

</td><td width=”234″>

<img src=”My second graphic”/>

</td>

 <td width=”468″><My language for Ad-Minister, or whatever type of graphic or banner tool you wish, such as a project wonderful advert>

 </tr>

</table>

</div>

The dimensions above are set for my site, you are more than welcome to modify them to fit your site’s needs.

Next up is the menu that is above your comic.  As it stands, the menu is set to repeat the menu on the side column, which is may be OK for you as is.  For me it wasn’t because I’ve got a lot of content on my site, and I could stand all the sub-pages and sub-sub-pages messing up my navigation bar and layout as people move about the site.  That’s what will happen if you leave it.  So, my best alternative was to pull all that “Echo function” type language out. 

The menu is underneath the header, and is labeled <div id=”menu”>.  In my case, the best approach was to replace the automatic echo function language with a simple table and html links of my own creation.

<div id=”menu”>

<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

<td><a href=”Put link here” class=”style1″><strong>HOME</strong></a></td>

</tr>

</table>          

</div>

With this arrangement, you can put in as many or as few links as you wish and retain control over it.

What if you don’t like the size relationships of your header elements?  Some bars are too tall, or not wide enough, or whatever?  To change this about the header, you modify your Stylesheet, not the Header file. This too is accessed via Design and then Theme Editor, this time choosing Stylesheet.  The part of this document that covers your header is under /* THE HEADER */, while the part that covers your Navigation Bar is under /* THE MENU */ and then #menubar.

Before you begin altering your CSS code in the Stylesheet doc, make sure you have backed up your database and perhaps saved a copy of the site onto your hard drive.  It’s all too easy to screw up your site if you don’t know what you are doing.  Even if you are well used to CSS, you are still playing with code that someone else wrote, and mishaps can happen. 

Well, I’ve already written more than I intended, and I didn’t even get to footers.  There’s still a lot of fun stuff on the way, and I’ll get to that in future columns.

Scott.

When you export the guts from one WordPress site, and import those guts into another WordPress site, expect the unexpected. For example, about half the comics doubled up and entered the system twice; almost all the pages decided that they needed different, random page parents; almost all links, both in posts and on static pages, needed reset by hand; etc, and so forth. When you have as much content as there is on the Johnny Saturn site, such a change becomes a major, full-bore endeavor!

Plus, imagine trying to retrace all your steps on the web and changing your URL wherever you might have entered it as your home page. Now, imagine that it’s four years of history that you need to retrace. We’re talking all the top lists, forums, etc. etc. The mind boggles, does it not?

Now, let me be perfectly clear—I’m not complaining! I’m damn proud that I’ve gotten as much done as I have over the last few days, and I’m quite pleased with all the little updates and changes I’ve made.

D.J. Coffman wisely suggested that I start the new site from scratch rather than export/import it. I didn’t follow that advice. In the end, I think it would have taken just as long either way.

I’ll still be polishing up the details all week, finding lost files, fixing broken links, and similar problems that need attending to. Almost all the podcasts are gone, and I need to reload those and fix their links. Issue four of the PDF downloads doesn’t work, despite the fact that all the other PDF comics work fine. These are mere details in the greater scheme, and mishaps I hope to fix by the end of the week.

Ah, sweet technology! You offer so many opportunities, but you frustrate us as much as you grant us convenience! Scott.

As 2008 winds down, and Benita and I make big plans for Johnny Saturn in 2009, I think it’s worthwhile to review our year.  In many regards, this year was huge for us.  In other regards, it was a “rebuilding” year.

The biggest event of our year was the publication of our graphic novel, “Johnny Saturn: Synns of the Father.”  It was very heady for us as the book’s listing came up on Amazon.com, Barnes & Noble.com, and numerous other websites.  Later on, we also published “Johnny Saturn” no. 6, and the “Johnny Saturn Pinup Gallery.”  This latter was particularly satisfying, because artists from all over the planet contributed pinups.

Next up for us was building of the current johnnysaturn.com site.  Prior to this, Johnny Saturn was distributed among Graphic Smash, Webcomicsnation, Comic Genesis, and Drunk Duck, while the blog was located on Myspace.  We had pretty much maxed out the scattershot approach, and now it was time to consolidate.  In June, we discontinued or downgraded all those other sites and established a WordPress-based, Comicpress run site to be our hub.  This was a titanic undertaking, one that involved reformatting all the old strips, learning new skills, and eventually even changing web hosts.

The third biggest coup for the year, and arguable more important than the first, was placing twice in the Webcomic Readers Choice Awards, winning first place for Antagonist of the Year (Dr. Synn), and third place for protagonist of the year (Johnny Saturn).  Many benefits issued from this honor, including the friendship of Phil Hofer, aka Frumph, of the Frumph Webcomic List.

After that, the comic collective Palace in the Sky asked us to join, and we happily did so.  This collective is primarily made up of high quality fantasy comics, but Johnny Saturn, while not a traditional swords & horses fantasy, came to fit in quite well in their lineup.  Palace in the Sky continues to be one of our big referrers, and we are proud to be associated with them.

Also of note, 2008 saw Benita and I interviewed on a Podcast for the first time, and our friendship with Chuck Moore of Comic Related.  I had one article in Sketch Magazine this year, and have submitted two more.  Benita and I joined the Indy Webcomics Group, a local collective of cartoonists who have garnered national attention.

All in all, this was a year to remember!