One cool thing about having an independent site for your webcomic (as opposed to using a platform like Webtoon or Tapas) is, you can do whatever you want with the layout!

One less-cool thing about having an independent site for your webcomic is…nobody else is responsible for handling the layout.

(Unless you personally shell out the cash to hire a web developer — and, well, not a lot of us have that kind of money to spare. Especially when we’re already paying for the independent hosting.)

But, honestly? It’s free and surprisingly-easy to handle it yourself.

You can start with a generic default theme, like this:

…and, with a bit of tinkering, turn it into this:

As someone who’s been DIYing it since the days when everything had to be hand-coded, I figured I’d put together a walkthrough of The Basics.

(This is part of the “how do I webcomic?” series, with useful information on all kinds of comicking-related topics.)

---

Get To Know Your HTML and CSS

Starting with the Most Basic of Basics, just to make sure everyone’s caught up.

HTML (HyperText Markup Language) is the standard code that organizes the content of your site. You can try some easy HTML tutorials here, and search this complete reference of HTML tags if you’re looking for something specific.

CSS (Cascading Style Sheets) is the standard code that adds style to your site’s content. Again, check out some easy CSS tutorials, and don’t hesitate to keep this complete reference of CSS properties on hand.

If you’re trying to fix something in the layout, the CSS is probably where you’ll want to look.

To show how they split up, here’s how the Leif & Thorn website looks with all the CSS turned off, so it’s just the HTML:

No colors, no fonts, no layout images, you don’t even get part of it split off into sidebars. Just one steady column of text, maybe with a stray image here, a couple of bullet points there. It might as well be a Word document.

It looks pretty much the same as, say, the Skin Horse website with all the CSS turned off:

…or, for that matter, a Wikipedia article with the CSS off:

And, hey, while I’m here, let’s look at a typical Webtoon with the CSS off:

The bones are all the same! And any site with nice solid HTML is going to have the same look. Not very pretty or exciting, but totally readable.

(…some sites don’t have solid HTML, they have coders who left a horrible mess and depend on the CSS to clean it up. Twitter with no CSS is a nightmare. But I digress.)

It doesn’t take anything fancy to check this out yourself — any standard desktop browser, like Firefox or Chrome, will have a Web Developer Tools pane that lets you preview “how this page would look with different code.” (With mobile browsers, unfortunately, I think you’re out of luck.)

Right-click on any part of the page and choose “Inspect.”

Note: I’m going to use screenshots from Firefox here, but Chrome has basically the same functions. Maybe in a slightly different order, or with slightly different names, that’s all.

Pick “Style Editor” from the menu on the top row:

The column the left is a list of CSS stylesheets used on the page. Click the little eyeball icon to switch whether or not the whole thing is visible.

To experiment with changing one specific thing at a time, you can use the right column of “Style Editor”, where you can change bits of the text in whatever stylesheet you have selected…

Or you can use the “Inspector” item in that top-row menu, which is amazingly useful. Seriously, I don’t know how we ever had the patience to make websites without it.

---

Nailing Down Where The Problem Is Coming From

If your layout is doing a thing you don’t like, the first step is to figure out Why Is It Doing The Thing?

If you’ve been tinkering with your own code for a while, you probably already know. It’s very possible you wrote the code that’s making it Do The Thing.

But even if you have no idea, you can start from scratch and track it down.

For instance, let’s say your issue is “the part where it says the title of each strip is too small. I want that text to be bigger.”

Right-click the text you want to change, and hit “Inspect”:

Left pane of the Inspector is “the HTML source code of your site.” If you hover over a specific line of HTML, Firefox will highlight where it actually appears on the page.

Center pane is “all the CSS properties that apply to that bit of HTML.” Instead of showing you the content of one specific stylesheet (like the Style Editor), this pane collects the relevant properties from all of them. You can make experimental edits here.

Right pane is…all the CSS properties again, just in alphabetical order. In case that’s an easier way to find the one you want.

If you look through either pane, you’ll find a line that says “font-size: 1.2em”:

An “em” is just the traditional unit of size for letters (basically “1em” is “normal text”). And “font-size” is a CSS property, which means you can look it up in that CSS reference if you’re not sure what it does…but this is one of those properties with a refreshingly obvious meaning.

Click the 1.2em in the center pane, edit it to be a nice round 2em, and now the page looks like this:

Heck, go for broke and make it 12em, see what happens:

You don’t just have to edit the existing lines, either — you can add new ones, and see what they do. For instance, if you want the background to be green, and all the letters to be capitals, and an eye-searing white shadow behind the text, just add this:

.post-header h1, .post-header h2 {
  font-size: 1.2em;
  background: green;
  font-variant: all-petite-caps;
  text-shadow: 5px 5px #fff;
}

Now it looks like this:

Does anyone actually want that? …Probably not. But I’m sure you’ll come up with something prettier.

Thankfully, none of this has pushed any actual changes to the website! It’s a preview that only shows up in my browser. If I reload the page, even that will disappear.

So you can use this to go wild, test as many variations as you want, until you find one you’re happy with.

---

If You Want A Thing You Can’t Do In CSS…

…then you’ll need to move to a whole other round of hunting down the problem. For which I’ll, ah, need to write a whole other post.

The good news is, when I do volunteer troubleshooting for other webcomic creators and they don’t like something about the layout, it’s almost always something you can fix up with the CSS. It’s a really useful, really wide-ranging skill to have.

---

You’re Happy With A Variation! Now What?

Now you do want to push the actual change to the website!

Copy the CSS from the Inspector — for now, save it to a text file or something, so you won’t lose it if your browser crashes. The code you save should look something like this:

.post-header h2 {
  font-size: 2em;
}

I cut the “.post-header h1,” part, because you can see in the HTML source code that the text I’m trying to re-style is wrapped in an “h2” tag.

From here, you have a few different options for “where do you actually put it?”

---

Edit the original CSS stylesheet?

The Inspector will also tell you where the original CSS is coming from. It’s the faded-out text that says, in this case, “style.css:490”.

If you right-click that text and hit “Copy Location”, it’ll give you the complete URL of the stylesheet. (The “490” is telling you exactly what line to edit.)

You might want to just go in and directly edit that file!

But if the stylesheet is coming from something that gets periodic updates — say, a theme you installed, or a Wordpress plugin — don’t rush in too fast. Any time a new version is released, your site will update to the new files that go with it, which will wipe out any custom edits you’ve made.

(Also, I’m guessing some hosting providers are too controlling to let you touch the CSS. If you’re stuck with one of those, you’ll need another method.)

---

Enter it in a designated Add Your Own CSS field?

Some systems try to keep your life simple by giving you one of these.

Wordpress, for example. Click the “Customize” link in your admin bar, and it’ll take you to the Customizer, which has at least one “additional CSS” field…

…but it wreaks havoc with the preview of my existing layout when I open it:

So, frankly, I do not trust it, and I never use it to save anything.

If you have long-term aspirations to do lots of fun custom things with your own layout, then maybe join me in avoiding the Wordpress Customizer completely.

But! If you use a different system that works better — or if you don’t have big plans at all, you really just want to tweak a couple details — then the CSS you saved earlier can go here, and it should be fine.

Important: If your new code is applied to the exact same HTML property (the “h2” here) as the original code, and the original code is still in the original file…they’re going to clash.

The process with CSS is that a more-specific rule wins out over a more-general rule. So, for example, this “h2” is inside a header section with the specific “.post-header” class. If you take “.post-header” out of the CSS, you’ll have a less specific rule, which will lose:

h2 {
  font-size: 2em;
}

On the other hand, the whole header section is inside an “article” section. So if you add that to your code, make a specific “article .post-header h2” rule, it wins out over the broader “.post-header h2” rule:

article .post-header h2 {
  font-size: 2em;
}

You can also just use the trick of adding “!important” to your bit of code:

.post-header h2 {
  font-size: 2em !important;
}

This is, admittedly, a little hacky. If you’re trying to make major layout edits, you should do the extra legwork to make all the rules naturally line up in the order you want — it’ll make your life easier in the long run. But for small things, this is simple and it works.

---

Edit your HTML template?

If your host will let you edit the HTML of your site template, but won’t let you get at the CSS…or if you don’t trust the Customizer, but don’t (yet?) want to mess with a full stylesheet…you can embed CSS code within HTML.

Just put your Winning Rule in the “head” section, and wrap it in the “style” tag, so it’ll look something like this:

<style>
article .post-header h2 {
  font-size: 2em;
}
</style>

If you’re using a theme by someone else, then, again, you probably don’t want to put your edits directly into the theme’s HTML template files. They’ll get overwritten if there’s an update.

On my Wordpress sites, I put stuff like this in the succinctly-named plugin Header, Footer, and Post Injections:

Does exactly what it says, adds the code exactly as you wrote it, doesn’t give any of the weird vibes I get from the Customizer. 10/10.

Sidenote: if this post has been up for a while, I don’t promise this specific plugin will still work! But as of the time of writing, it’s working well for me.

Other services and other content-management systems will have different adding-to-the-template processes. If you’re using one of those, you’ll have to poke around on your own to figure it out.

---

Save it in a whole new CSS stylesheet?

I’m not talking about making a full-on Wordpress child theme here (more on that in a second). Just talking about adding a standalone baby stylesheet — your Winning Rule from above, saved as a .css file instead of a .txt file — to your site.

Leave out the “style” tags if you do this, since it’s a full-on CSS file, you’re not putting it in an HTML wrapper.

And the idea here is not to replace any existing stylesheets, so be careful not to overwrite them — name it something new, like “my-extra-styles.css”.

You still need to add a little something in the header of your HTML template. But now it’s just a link, like this:

<link rel="stylesheet" type="text/css" href="(New Stylesheet URL Goes Here)"/>

Then, if you come up with more tweaks to your theme as time goes on, you can easily add them to this file.

Note: all of this is still in “just want to fix a few things that bug me, not interested in revamping the whole layout” territory.

If you do want to remodel the whole thing — maybe you were already planning to roll up your sleeves and dive in, or maybe you made those first few changes and “What Else Can I Do?” started playing in your head; maybe you want the full range of power and versatility, or maybe you’re just thinking, hey now, this looks fun —

Well, now we finally get to the thing that was supposed to be the point of this post.

---

Wordpress: Make a child theme

This is how I handle 99% of my Customizing The Site Layout code.

Every couple of years I give it a major remodeling. Every couple of months I go in and add a new feature, or just fix a thing that’s started to bug me. A while ago I made a whole 2000’s-internet-aesthetic alternate layout, complete with pixel art (pick “Y2K” from the list of themes in the sidebar). Most recently, I started posting supporter-exclusive comics, and gave them their own special custom navigation.

It’s endlessly flexible. It’s fun.

And if you google “how to make a child theme”, you’ll get at least a few tutorials that make it sound more complicated or intimidating than it is. (Also, some of them are on sites with really intrusive ads…)

I wanted to write a friendlier one!

Instead, I ended up writing 2,000 words of “wait, I want this to be accessible to people who don’t already understand CSS” buildup.

So I’m splitting the topic in two. If this post has been A Lot, feel free to give yourself a break here — maybe play around with those CSS tutorials until they get more comfortable.

But if you already feel good about the CSS part? Move right along to the next walkthrough, which fully dives into How To Child Theme.

Comments and questions are welcome! Including specific “do you know if there’s a way to do this thing?” questions. If you’ve looked through existing resources and can’t figure it out, just link to your site and ask, and I’ll give it an Inspect.