This template is completely free-to-us for smackjeeves users, but donations to my patreon are appreciated. The code may look intimidating, but it's actually just a lot of find & replace to make basic changes, so don't worry! I have written this out as straightforward as possible.

For the social media icons, just replace the all cap links with URLs to your social media sites. Don't use one? Simply delete that line! Want to add another? Replace the "fa-whatever" with the name of the social media site ("fa-pintrest", "fa-linkedin", etc.)

Finally, replace "YOUR USERNAME HERE" with your name.

Changing Images

Aside from the image we changed in the header above, there are also background textures we can change to your own textures or images. The preset is two--one behind the header and footer, and one behind the body text. You can find them in the following places:

Of course, the easiest way to swap these with your own images is to copy the text in a text editor and do a find & replace!

Changing Fonts

I encourage you to use google fonts to get more unique fonts to use on your comic's site. Google hosts them for you, which is great if you can't upload files and don't know how to install custom fonts. In the Overall Layout, you'll find this line:

This is where it imports two fonts from Google: Lobster, and Roboto. When you find a font you want, simply click "add to collection", and when you're all set, hit "use" and you will see a similar line as above. Just replace the new one over the old! Then find & replace the previous fonts in the CSS.

I recommend using only two fonts--one for headings, and the other for the body text. Make sure to choose fonts that are contrasted and distinguishable, but also work together. If you don't want to use Google Fonts, remove the "<link href..." line and replace "Lobster" and "Roboto" with standard web-safe fonts.

Changing Colors

To make your life as easy as possible, I have started off the CSS on the Overall Layout page with a list of all colors used.

"Light Shade" and "Accent Color 2" are used in links. "Accent Color 2, Light" is the shadow color on the header icon and avatars. "Middle Shade" is used on the majority of the site--the header, footer, posts, comments, and buttons. "Dark Shade" is used on the headings.

Because I've listed out all the colors for you, swapping your color scheme should be a piece of cake! Again, copy the Overall Layout into a text editor and just find & replace the old colors with your new ones. If you make a similar list with your colors, it'll be easy for you to keep track of the old VS new.

Now, you probably have noticed one oddball color--"Middle Shade" has an rgb value next with it with the numbers 22(red), 171(green), and 205(blue). This color is the only one that is used transparently, and to be used transparently, I use rgba [red, green, blue, alpha (opacity)]. You will find these lines like so:

The alpha value is the opacity, where 1.0 is completely solid and 0.0 is completely transparent. To change these, take your "Middle Shade" color and search for it on a site like Color Hexa. When you look up your color value, scroll down to "Color Conversions". See the RGB Decimal? That has the numbers you want! So find and replace "33,171,205" with the three numbers of your new color.

And that's it!

Changing Icons

All of the icons use Font Awesome. You'll find them on the News/Welcome Page, the Comic Archive, and the Comic Page. We also used them in the Overall Layout for the social media icons. They are all in the same format, like so:

<i class="fa fa-calendar"></i>

The word in red identifies the name of the icon to be used. Font Awesome gives you a LOT to choose from! So feel free to find these lines and swap them out with whatever icon you like. They are used on avatars for guests and for the voting rating as well.

(The different prefixes are for cross-browser compatibility.) Once those are removed, you're done!

"The animations are too slow/too fast."

The duration every animation takes is measured in seconds.

4s = 4 seconds, 2s = 2 seconds, and so on.

To alter them, find where these values are used and change the value of the seconds. A longer time will slow it down, making it more subtle. Shorter will make them more sudden. Most of them look like this:

-webkit-transition: all 4s; transition: all 4s;

If you only want to alter certain effects, find the correctly labeled section and change the seconds only on that particular class.

"Can it hover in at a different speed than out?"

Yes. For the transitions used on hover effects, you can change the seconds on the [className]:hover to be different from [className]. The transitions on the normal class are for when the mouse is moved off the object.

"I don't want to use any animations."

Complete remove ALL transition lines that look like this:

-webkit-transition: all 4s; transition: all 4s;

Remove the entire "archive page animations" from the CSS, and then go to the Comic Archive page.

The homepage image will look best if you upload a large, higher resolution version of your comic to reduce fuzziness on larger screens. Uploading a larger image will not affect the size on the comic page; this template automatically scales the image to fit.

I advise against putting an image behind the header unless it's very light/dark and low contrast. If it draws too much attention, it'll distract from your comic pages and make the text on the header too hard to read.

If you have too many links, the menu may "break" at certain resolutions. To prevent this, go into the Overall Layout and find the following section:

Gradually increase the "800px" until it no longer breaks. If it continues to break, you will likely have to create submenus. I have not coded for these (yet). Alternatively, you can increase the height of the header and let the navigation fall on its own line. Or, of course, you can just reduce the size of the header image or remove it entirely.

Make it fun!

Questions? Comments?

Hopefully everything is easy to follow, but if I have missed anything or if you encounter any problems, please post here and I'll be more than happy to help you. Thanks! Hope you like it!

Last edited by Falconer on February 21st, 2015, 10:17 pm, edited 2 times in total.

THEWesMolebash wrote:I want to make a header background image. Any recommendations on what dimensions I should use?

250px tall. The width is tougher due to different monitor sizes, but I'd say around 1700-2000px but don't put any important imagery on the right side under the assumption that's the side that will be cut off on small screens.