Resources for Template Customization

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Resources for Template Customization

Postby nocturnenebula » October 11th, 2018, 4:52 am

Resources for Template Customization
Smackjeeves offers custom templates for your webcomic's site, but in order to further customize them you'll need to know HTML and CSS.
Here are a bunch of resources for building websites that you can use to customize your webcomic's site on Smackjeeves.

Check out the Template Guide for a basic rundown of Smackjeeves template building.

HTML
HTML stands for HyperText Markup Language and is the name for the markup language used to display elements of a webpage.


CSS
CSS stands for Cascading Stylesheet. In short, this is what controls how the HTML will look on a webpage.


Testing
You could just use your browser, notepad ++ and a folder full of HTML files to test your code but here's a few good places online to do that.

NOTE: This is for basic testing, variables (e.g. {SITE_NAME}, {SITE_URL}) do not work outside of Smackjeeves template customization and will not work on testing sites.

  • Codepen - live testing for HTML, CSS and Javascript, also a good place for design inspiration.
  • JS Fiddle - another live testing site, mainly for Javascript testing but will work for general HTML/CSS testing as well.
  • Code Sandbox - another sandbox for making websites but can be used for other extensive purposes. [/url]


Image Hosting for Template Graphics
By default free users can't upload images on Smackjeeves for their webcomic's template graphics. You'll need to use an external image hosting site that allows hotlinking to display those graphics.

  • (Free) http://imgur.com - Imgur is a good host for linking images. No account needed either and you can upload multiple images into an album as a guest.
  • (Free) http://photobucket.com/ - the classic go-to for image hosting, account required (limited bandwidth for free users).
  • (Free) http://tumblr.com - you can host your own images on tumblr as a private post which you can then hotlink.
  • (Free-ish) your own website - if you have your own website hosted somewhere (yoursite.com/ yoursite.weebly.com), you can designate a directory for your template files. Some sites don't allow hotlinking so make sure to check before you do this

Image Host Alternative - encoding your images with base64 (not recommended)
https://www.base64-image.de/
Another method you can use to display images is with base64 encoding.
It'll convert your image into a string of binary text that you can insert into an image tag or as a background image in your CSS however, this isn't recommended ESPECIALLY for larger images since they get. ridiculously long. plus the original use for this was to cut down on mobile load times for graphics.

Spoiler! :
Image

For example, this little guy here: Image

Becomes a large string of text here when converted to base64:
Image


Quick and Dirty Example of Hotlinking images from Tumblr
I don't full recommend doing but it's here if you want to know how.

Spoiler! :
1. Create a private post on your blog:
Image

2. Right-click > Copy the image address
Image

The link should look something like this:
Code: Select all
https://66.media.tumblr.com/ea3c8cb5eb69752beed6c2fc3f6e4a8c/tumblr_inline_pgfd51mg0o1smqwki_1280.png


3. Copy and paste the link into the right code.

As an image:
Code: Select all
<img src="https://66.media.tumblr.com/ea3c8cb5eb69752beed6c2fc3f6e4a8c/tumblr_inline_pgfd51mg0o1smqwki_1280.png" />


As a CSS background:
Code: Select all
body {
background: url('https://66.media.tumblr.com/ea3c8cb5eb69752beed6c2fc3f6e4a8c/tumblr_inline_pgfd51mg0o1smqwki_1280.png');
}


Live example: https://codepen.io/nocturnenebula/pen/NOjVpp

4. Ta-da.
Image

Image
User avatar
nocturnenebula
 
Posts: 7
Joined: January 27th, 2015, 10:49 am
Location: Washington

Re: Resources for Template Customization

Postby Admin » October 11th, 2018, 4:50 pm

Great post! Thanks for sharing.
User avatar
Admin
Site Admin
 
Posts: 1442
Joined: August 17th, 2005, 11:10 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 3 guests