• • • Small Rarebit Basics
If you are interested in having your own comic site you may have come across people suggesting rarebit. Rarebit is a comic template you can use to do so.
I do know some HTML and CSS, but even then back when I downloaded rarebit for the first time I was still a bit confused on where to start, so I hope this small guide helps anyone that is interested on starting their own comic site using it.
I'm going to begin with getting rarebit, changing the logo and navigation buttons on the site.
1.- Download Rarebit from: https://rarebit.neocities.org/← You can also read information about it in here and check out other sites that use it.
2.- You will get a zip file with the basic things needed to set up your comic site
3.- You will place these HTML files and folders in your Neocities site dashboard
4.- Changing your logo
If you open the Index right now it will look like this:
I started changing the img files that make up the site to mine for this, starting with the logo, you can find it on the img folder:
Select manage, these are the contents of the folder:
- characters: stores the images for your characters page
- comicnav: the navigation arrows for your site
- comics: This is where you place your comic pages, your comic pages have to start with pg and then followed by a number, I will touch on that later.
- thumbs: you can place thumbnails for your comic archive, this is optional and you can turn it off, personally I don't use them but if you want them they are there.
- Hildaterry.png: this is a placeholder image for the about page, you can delete it or replace it later on when you build your about page.
- logo.png: What I did was open this file and replace it with my own logo, then overwrite, next time you open the index page it will have been replaced.
- rarebitlogo_small.png: this is the image used in the credits to give credit to rarebit.
Once you've replaced the logo file for your logo it you will notice the change in the index. Note. The name of your logo file must have the same exact name of logo.png.
After the change:
Good start isn't it? You can do this with your nav buttons as well, just replace the files on your comicnav folder.
5.- Coding
At this point you can edit either you index page or your style css file (located in your css folder) to continue customizing your site.
I'm going to start by editing the index to change the fonts displayed on it:
Neocities editor is very good imo, its what I used for the site but if you know of other editors you can use them as well, you can even use the default notepad in your computer to edit both htm and css!
Once you click edit on your index you will see this:
All the rarebit files have commentaries in them to guide you on what they do, isn't that cool? In the neocities editor you can recognize them because they are colored in gray.
- Where to find the font
I use google fonts for this, just look a font and see if it's available in there → fonts.google.com
lets see, for this guide I will use,
Pangolin, because I think they are cute
See? They are cute
After you've chosen the font you want, click get font, then get embed code
You will get these two codes:
Now lets go back to the index.html file that is being edited, you will paste the first code in the <head> area
after being pasted:
You can leave it like this, but you can also clean the code a bit, since we wont be needing the cherry cream soda font (unless you want to keep it) you can delete it.
You may notice the similarities in the code being pasted with the one that's already there, that's the code that will be replaced, you can edit the commentary as well to reflect the font you used.
After cleanup:
This is step one of changing the font on your index, now we have to move to the CSS file for the rest.
Inside the CSS folder you will find a style file, edit that
Just like the HTML pages the CSS File has commentaries on how they work, this is the fonts area.:
Right now the one I'm going to change is the header font, where the links for the other areas of the site are, the body font is the one that will display on the commentaries and the rest of the site, the current font is ok so I'm leaving it like that but if you want to change it for another you can do so.
This is the code that I will use here and its going to replace the current #showcomic one, it ends up like this:
After that change your site will now look like:
Your CSS file is where you can modify most of the appearance in your site, like the color of the background, font color, link color, etc, the style file has commentary about what each section does.
Speaking of background color, it can be done in here:
To change colors you just have to look what their hexcodes are and replace the one that is already there.
Getting there...
By the way, if you don't like the underlining on the links in the header, you can remove that, to do so you have to add this line in the “a” section of the style.css file
text-decoration: none;
Now your links are no longer underlined.
6.- Uploading your pages on your site
Now for the reason of starting the site; To post a comic page you will need to upload the file of it and then edit the "comics_settings.js"
To upload the comic's file go to the img folder, and inside it go to the comic folder
Inside it are already the comic files used in the example page, as you have noticed all the pages names start with pg, you will have to name your files as that so they can be posted.
Since these won't be used you can delete them, or not! You can do whatever you want.
Note. Amongst the examples originally in the folder you may have noticed a couple of files whose name has an underscore followed by a number, I will explain those later.
Upload your own pg1.jpg file inside the folder, after you have done that you will notice that the first page on the site has been replaced.
But what about the rest of the information of the page?
You can find that on the js folder
Inside you will find these js files, the one we will edit is "comic_settings.js"
The js file has a good explanation about what it does in the commentary
Remember how I mentioned you have to keep the pg naming format? You can modify it here, personally I don't find it necessary, but you can do so if you want to.
To modify the information on the page itself it is located in this section
You can leave the comments there for your own reference:
Now your title and notes display this:
Now lets move on to the pg files that have a _ in them, those are pages that are sectioned in parts in case you want to work on a vertical/scrolling comic, cool right?
Its easy to use those, here the example is in pg2, with pg2_1 and pg2_2 files, but you can use as many parts you want.
The commentary explains in which area you put how many parts your comic has.
The original example has one divided in two parts but here's one with three:
Note. altText doesn't work in these type of pages, if you use it the word will just repeat over and over, so leave this space in blank when you do these type of pages.
Right now the file is displaying more pages than the ones I have, so I will delete the rest and just leave the two I have.
The commentary already explains it, but you have to put in this area the number of comic pages you have, in the beginning the number displays 14 because it has the example pages
I will change that number for 2 since thats the amount of pages I have
There
Extra little tip:
you can change maxpg to the number page you want to be displayed when people visit the site, it doesn't have to be the first one, it could be the beginning of your latest chapter.
Last thing, I mentioned earlier about the thumbnails for the archive, to have them not show up in your archive you have to edit the "comic_archive.js" file in your js folder.
Here
This is it for the guide! These are pretty much the basics to get started with rarebit and your comic site, if you have any questions I'm open to them, but Im not an expert on either html or css, my knowledge is pretty basic so I might not be able to answer.
Rarebit Credits:
