Unique Chapter Banners

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

Moderator: Help Desk Team

Unique Chapter Banners

Postby Shard » April 19th, 2018, 10:58 pm

Hiya! I'm looking to get help with something that I've been told is possible, but I don't know enough about coding to really know where to start.

Essentially what I'm trying to do is make it so that the top banner of my comic changes when you're in a different chapter of it. Basically, I visualize something like this:

When in the chapter for World [17], the site would look like this...
Spoiler! :
Image


But when you move into the chapter for World [18], the site would look like this!
Spoiler! :
Image


(Before you ask, I literally just edited things using Chrome's Inspect Element. I often do so to test minor layout stuff (like how something will look later down the line) that isn't quite 'big' enough to warrant modifying the entire template for.)

Basically, I'm wondering what I'd need to do to make this happen. If it's not possible then I don't mind; but if it is then I'd like to learn how to pull it off! I think it'd be a really neat effect - that the site changes accordingly as someone reads through the archive - but if it's not possible then I'll just keep doing what I've been doing, that is- updating the top banner when a new World starts.

I can post relevant code chunks if they're needed, too. If it winds up working, it'd be neat if this topic were easily reference-able for anyone looking to do something similar in the future!
Image
ImageImage
User avatar
Shard
 
Posts: 107
Joined: November 10th, 2006, 12:00 am

Re: Unique Chapter Banners

Postby eishiya » April 19th, 2018, 11:10 pm

You'd have to change the way you put the image in your header, as you'd need to assign the image via CSS rather than as an <img> element.

Replace:
Code: Select all
<img src="https://i.imgur.com/2WE1x4M.gif" style="width: 900px; height: 262px;" align="middle">


With:
Code: Select all
<div class="chapterBanner chapter{CHAPTER_ID}"></div>


And add this CSS on the bottom of your <style> element in Overall Layout, adding in the chapter IDs and their corresponding banner URLs:
Code: Select all
.chapterBanner {
width: 900px;
height: 262px;
background-image: url('URL of your default banner here');
/*any other non-chapter-specific styling would go in here*/
}

.chapterBanner.chapterIDForChapter18{ /*Note the lack of spaces, it's .chapterBanner.chapterID*/
background-image: url('URL of your chapter 18 banner');
}

.chapterBanner.chapterIDForChapter17{ /*Again, no spaces!*/
background-image: url('URL of your chapter 17 banner');
}


The first (.chapterBanner) bit sets the size of the DIV that will contain the image, and provides a default banner. This default banner will be used on any pages that aren't the comic (archive page, news page, etc), and on any comic pages that don't have a special banner set.
The rest are your chapter-specific banners, assigned to each chapter based on its chapter ID.

You can get the chapter IDs for each chapter from your Archive page. Hover over the chapter links at the top, and you'll see each chapter's number. For example, the ID for your "World [14]" chapter is 92808
Image
So, the CSS selector for that one would be .chapterBanner.chapter92808
Image
User avatar
eishiya
 
Posts: 9805
Joined: December 5th, 2009, 11:17 am

Re: Unique Chapter Banners

Postby Shard » April 20th, 2018, 11:07 am

I was about to ask if I'd done something wrong since the banners weren't changing when I jumped chapters... and then I realized I left a ' in there that shouldn't have been there. Whoops!

I still need to do the rest of the banners, but in case anyone's checking this thread and wondering why something's not working if they're trying it, here's an idea of what my code for the banner variations looks like:

Code: Select all
.chapterBanner {
width: 900px;
height: 262px;
background-image: url('https://i.imgur.com/ppv9dMq.png');
}

.chapterBanner.chapter104485{
background-image: url('https://i.imgur.com/etI0ZZ8.gif');
}

.chapterBanner.chapter105672{
background-image: url('https://i.imgur.com/2WE1x4M.gif');
}


I'm... not sure if you meant to have two of the ' things before the URL thing and one at the back, but having it like that seems to just remove the image completely, so if anyone else is looking this over and having that problem, your fix might just be removing an extra '.

Thanks for the help, eishiya!
Image
ImageImage
User avatar
Shard
 
Posts: 107
Joined: November 10th, 2006, 12:00 am

Re: Unique Chapter Banners

Postby eishiya » April 20th, 2018, 11:50 am

The '' thing was a typo, whoops! I'll fix my example code.

Glad to see you got it working!
Image
User avatar
eishiya
 
Posts: 9805
Joined: December 5th, 2009, 11:17 am


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 2 guests