Skip to content

Webcomic layout hacks, part 1: Comic Easel + Webcomic 5

Webcomic layout hacks, part 1: Comic Easel + Webcomic 5 published on No Comments on Webcomic layout hacks, part 1: Comic Easel + Webcomic 5

Miscellaneous things I’ve done to customize my webcomic layouts. At some point I started documenting them, so fewer creators have to reinvent the wheel.

…and then I forgot to post it for years, whoops. But in the past year or so there’s been a renaissance in creatives of all types trying to start their own websites, so it’s not like it stopped being timely.

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

Part 1 is for edits to the specific Wordpress plugins I use to make my sites (But I’m A Cat Person, Leif & Thorn, and And Shine Heaven Now) comic-shaped. More on launching a new Wordpress site and choosing a plugin here.

Even if you’re not using any of those, stay tuned for more general info in part 2!

Technical terms

Trying to make this post as newbie-friendly as possible, so here are some quick definitions:

HTML (hypertext markup language): the basic code a webpage is written in. Most of what you see when you click “View Source.” Get more at the W3Schools tutorial for HTML

CSS (cascading style sheets): the code that styles your HTML. I refer to the W3schools complete CSS reference constantly when I’m working on it, and use the page inspector in Firefox or Chrome to test and preview changes before uploading them

PHP (php hypertext processor) (yes, it’s self-referential): behind-the-scenes code used by a lot of platforms, including Wordpress, to generate some of the HTML. I tend not to mess with this (so if you do, some of my solutions are going to look extremely hacky)

Child theme: the easiest way to customize the look of a WordPress site (here’s an article on how to create one). Your main theme (like Inkblot) is the “parent theme” — it still gets updates and bug fixes as they’re released by the creator. Your edits are preserved in the child theme, so they don’t get overwritten every time the parent theme updates


Comic Easel: Removing conflicting CSS

Exclusive to Comic Easel users.

The Easel theme automatically calls a couple different CSS stylesheets. The main style.css will get overridden if you have a child theme…but there was another one, comiceasel.css, that stuck around and kept clashing with my settings.

Eventually I just uploaded a mostly-blank replacement for the file.

(Deleting the file completely would also work…except that Easel would still keep trying to load that URL, so your site would be logging a shocking amount of 404 errors.)

Any time I upgrade the Comic Easel plugin, it re-creates the original CSS…but upgrades don’t happen that often, so I just have to remember to re-upload my replacement CSS every time they do.


Webcomic/Inkblot: Replacing default navigation

Exclusive to Webcomic 5 users. (The Webcomic plugin wiki is super useful here.)

Step 1: do you want your webcomic navigation to be above the comic, below it, or both? (This might only be applicable if you’re using the Inkblot theme.) Check the boxes for those settings in the Webcomic section of the Customizer:

(I avoid using the Customizer when possible — most of what it does can be done better/cooler by editing your own CSS — but this is one of the things it’s good for.)

Step 2: picking your nav buttons! This is in the Widgets section.

In the Inkblot theme, “Navigation below webcomic” = Webcomic Navigation Footer widget area. “Navigation above webcomic” = Webcomic Navigation Header area. If you don’t put anything in those areas, you’ll get a default Webcomic nav bar. Start adding widgets to build your own:

In other themes, you might have to just pick an area and build the nav from scratch? I’m not sure. Somebody with another theme, please test it and report back.

(You can put unrelated widgets in the nav area — custom links and images, for example — and you can put the nav widgets in other areas, if you want! I’m just keeping it straightforward.)

Leif & Thorn uses the built-in Webcomic widgets for buttons/menus, creating a standard row of First Comic, Previous Comic, Storylines List, Next Comic, and Last Comic. It looks like this:

Here are the settings for the Webcomic Storyline List widget:

0” in this context is the placeholder for “don’t put a limit, show as many terms as there are.”

%title” is the variable that auto-generates the individual title for each storyline, instead of re-using one identical string of text for every link.

Select” is…not the term I would use for “dropdown list,” but that’s what it means here.

All these widgets are really well-marked-up in the HTML, too, which makes it easy to add cool effects in your CSS. Here, the fading effect on the “Next” and “Last” buttons comes from this CSS in the child theme:

nav .current-webcomic img {
opacity:0.4;}


Webcomic/Inkblot: Replacing default copyright info

Same deal as the navigation. If you put nothing in the Site Footer widget area, your site will have a default line of copyright information. If you add your own widgets, they’ll override the default.

(If you want the space to be blank, just add a Custom HTML widget…and then don’t put any HTML in it.)

Here’s mine:

Note: the default setting is that shortcodes (the text in square brackets) don’t actually work in widget areas. Here’s how to enable shortcodes in widgets.

Note 2: the “random_content” shortcode is from a whole other plugin, appropriately named Random Content Shortcode.

Note 3: the widget areas include Site Footer, Page Footer, Content Footer, and Document Footer. I, uh…literally never remember which one of these is which. To add new content near the bottom of the page, I just try it in all of them until it ends up where I want it.


Webcomic/Inkblot: extra thumbnails in search results

This one’s pretty self-explanatory…and getting rid of them is easy.

Visit Customizer > Webcomic, and delete “%thumbnail” from the “Archive Preview” box. Boom, you’re done.


Webcomic/Inkblot: shortcodes!

A catch-all section for different things I’ve done with Webcomic 5 shortcodes. (The documentation doesn’t have lots of examples for the sheer amount of different settings you can apply to them…)

1) Auto-generated list of storylines, with subcategories on nested tiers

[webcomic_storylines_list link="%thumbnail" start="<ul>" end="<ul>" start_lvl="<ul>" end_lvl="</ul>"]

2) Gallery view of literally all your comics

(webcomics_list link=”%thumbnail”)

Have comics with multiple images, and you only want the first one to show up in the gallery? Hide the rest by adding this CSS to your child theme:

.webcomic-link img:first-child:nth-last-child(n+2) ~ img {
display: none;
}

3) To create a “latest webcomic” page that isn’t your front page, here’s how to display the latest comic image, with associated link:

[last_webcomic_link args="relation='last'"][webcomic_media args="relation='last'"][/last_webcomic_link]

Note: because you can have multiple different Collections, a lot of these only work on pages/posts with an associated Collection. Here’s how to set that in the Gutenberg editor:

And here’s the setting in the Classic editor:

(Realized you put a strip in the wrong Collection, and you want to move it to a different one? That’s not a default feature…but it’s one you can install. Here’s how to use the Post Type Switcher plugin.)


…and that’s it for Part 1

Got questions? Spotted a broken link? Want to share tips and tricks you’ve used on your own site? Drop a comment, let us know!

Comment Header

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar