Custom Code for One Page

Can't find the answer to your question in the Knowledge Base? Post it here and we'll answer it as quickly as possible.

Moderator: Help Desk Team

Forum rules
About
This board is designated for Smack Jeeves related support. If you have a question about using the site or the forums, you've come to the right place.

Before Posting
Please browse/search the Knowledge Base & FAQs Forum for the answer to your problem before posting. It contains an extremely helpful, organized list of common help topics.

Got a Bug?
Post it in Bugs & Glitches, not here.

Rules

    1) Use descriptive titles for your threads. Example: "How do I upload comics?" Do not use vague titles like, "question," "HELP! ANYBODY??"

    2) Describe your problem in detail. Explain exactly what is wrong. Post images, screen shots, links, code snippets - whatever is relevant. The better the information you provide, the better the solution you will receive.

    3) One question per thread. Do not post multiple questions in one thread; that way, we can resolve questions individually. Make a new thread for each question you have, unless your questions are closely related.

    4) Be polite. The more polite you are, the more people will want to help you. Be patient, and we will help you find the solution to your problem.

If your question has been resolved, please say so. A thank you would also be nice. If your question has NOT been answered, say so in the original topic. If your topic has been moved to resolved, you may then AND ONLY THEN post a new topic regarding the same issue.

Custom Code for One Page

Postby Ethanicus » April 14th, 2018, 7:58 pm

Hi there.

I've never used this site, but I have seen a few comics hosted here (beats Weebly, that's for sure). But I want to preemptively ask a question before I make the jump.

I want to know if it will be possible to upload a page of my comic, and add custom CSS/HTML code to that one page. My intention is to do things like change the background of the website to accommodate a different mood of a page. Would this be possible on Smack Jeeves?

Thanks for any help!
User avatar
Ethanicus
 
Posts: 7
Joined: April 14th, 2018, 7:49 pm

Re: Custom Code for One Page

Postby eishiya » April 14th, 2018, 8:37 pm

Do you mean a page of your comic, or something like a custom page?

It's easy to do on custom pages, as you can either give them their own <style> elements with custom CSS, or even break them out of the webcomic's main layout entirely.

It's more difficult for a page of the comic, but it can be done with a tweak to your template code and CSS. You'd just need to add a unique identifier of the comic page as a class to whatever element you want to change (e.g. the <body> element). The easiest is the comic page ID, which you can add in your template as {COMIC_ID}, e.g.
Code: Select all
<body class="{COMIC_ID}">

If you prefer something more readable, and post no more than once a day, you could use the publication date instead:
Code: Select all
<body class="{COMIC_POST_DATE}">


Then, just add custom CSS that uses the class name of the pages you want to affect, e.g.
Code: Select all
.2018April14 {
background-color: super-sad-blue-grey;
}


(The actual date format depends on what you have set in your comic's settings, and if you use the date as the ID, you'd have to make sure your date format doesn't have any spaces or slashes in it.
The CSS would go in your Overall Template. If your template doesn't already have a <style> element, you can add one at the end of the <head> element.)
Image
User avatar
eishiya
 
Posts: 9889
Joined: December 5th, 2009, 11:17 am

Re: Custom Code for One Page

Postby Ethanicus » April 14th, 2018, 8:41 pm

Thanks for the info. It's good to know it's possible here.
User avatar
Ethanicus
 
Posts: 7
Joined: April 14th, 2018, 7:49 pm

Re: Custom Code for One Page

Postby Shard » April 16th, 2018, 11:01 am

Out of curiosity- is it possible to do this with individual chapters instead of individual pages? I tend to shuffle some site graphics for my comic based on what chapter it is, so if for example I wanted a certain banner visible for Chapter 1, then a different one for Chapter 2, and so on, is that something that could be done?
Image
ImageImage
User avatar
Shard
 
Posts: 108
Joined: November 10th, 2006, 12:00 am

Re: Custom Code for One Page

Postby eishiya » April 16th, 2018, 11:16 am

Shard wrote:Out of curiosity- is it possible to do this with individual chapters instead of individual pages? I tend to shuffle some site graphics for my comic based on what chapter it is, so if for example I wanted a certain banner visible for Chapter 1, then a different one for Chapter 2, and so on, is that something that could be done?

Yep! You can use {CHAPTER_ID} to give your elements identifiers based on which chapter the current page is in. You can check which ID each chapter has by seeing what {CHAPTER_ID} outputs on different pages, or in the chapter list in your archive, if you have a chapter list.
Image
User avatar
eishiya
 
Posts: 9889
Joined: December 5th, 2009, 11:17 am

Re: Custom Code for One Page

Postby Ethanicus » April 16th, 2018, 12:07 pm

I also want to know if that could be done in kind of a "theme" way? Like having some comics designated as "dark" and some as "light"? Or would I just have to stick to individual chapters or pages?
User avatar
Ethanicus
 
Posts: 7
Joined: April 14th, 2018, 7:49 pm

Re: Custom Code for One Page

Postby eishiya » April 16th, 2018, 12:23 pm

Ethanicus wrote:I also want to know if that could be done in kind of a "theme" way? Like having some comics designated as "dark" and some as "light"? Or would I just have to stick to individual chapters or pages?

If you use the page's title as a class name, and include which theme you want in the title, you could do it. You could also do it using the alt text, if you're not otherwise using it, which is a little less obvious to your readers. All of this is a work-around, so there's no elegant answer xP

FWIW, I advise against changing the colours significantly on a per-page basis, it's very jarring for readers. Very minor changes are fine. Changing background colours in particular is risky since a huge part of the screen changes colour suddenly, and that's bad for people's eyes.

Edit: I changed the code in my first reply, I accidentally gave the wrong code for using the comic's post date.
Image
User avatar
eishiya
 
Posts: 9889
Joined: December 5th, 2009, 11:17 am

Re: Custom Code for One Page

Postby Ethanicus » April 16th, 2018, 12:33 pm

eishiya wrote:
Ethanicus wrote:I also want to know if that could be done in kind of a "theme" way? Like having some comics designated as "dark" and some as "light"? Or would I just have to stick to individual chapters or pages?

If you use the page's title as a class name, and include which theme you want in the title, you could do it. You could also do it using the alt text, if you're not otherwise using it, which is a little less obvious to your readers. All of this is a work-around, so there's no elegant answer xP

FWIW, I advise against changing the colours significantly on a per-page basis, it's very jarring for readers. Very minor changes are fine. Changing background colours in particular is risky since a huge part of the screen changes colour suddenly, and that's bad for people's eyes.

Edit: I changed the code in my first reply, I accidentally gave the wrong code for using the comic's post date.

Thanks for all the help. And yeah, the changes wouldn't be constant, more like a set of them would be dark.

I think I've made my choice to move over to SJ. Here's hoping it works out!
User avatar
Ethanicus
 
Posts: 7
Joined: April 14th, 2018, 7:49 pm

Re: Custom Code for One Page

Postby eishiya » April 16th, 2018, 12:36 pm

Good luck!

If you need help with your specific template/code, please feel free to post in the Template Development & Support section! My explanations above might not be very clear, and I didn't test most of it, so I'd be happy to help you troubleshoot this stuff when it doesn't work.
Image
User avatar
eishiya
 
Posts: 9889
Joined: December 5th, 2009, 11:17 am

Re: Custom Code for One Page

Postby Ethanicus » July 4th, 2018, 12:47 am

Sorry to necro this, but I've found a super efficient and easy way to accomplish this!

In your author comment, you can add html code, unlike normal comments. So I simply added to the end of the author comment:

Code: Select all
<style>body{background-image: url('your_override_background_image_url') !important;}</style>


The !important overrides the image you already have in your Theme, effectively changing anything you want on any comic page!
All your override CSS needs to be on one line, otherwise SJ seems to screw it up with <br/> tags.

Hope this helps people in the future!
User avatar
Ethanicus
 
Posts: 7
Joined: April 14th, 2018, 7:49 pm


Return to New Questions

Who is online

Users browsing this forum: No registered users and 4 guests