Can every page be customized? [RESOLVED]

[Thanatopia]

I'm thinking about starting a webcomic within the near future, but I'm not yet familiar with how the coding works, and this is a fairly technical question. (BTW, sorry if I screw up the nomenclature - I'm probably getting all the names of functions, procedures and whatnot wrong, but please bear with me.)

I realize that Smackjeeves uses templates to ease up on space and make things more user-friendly, but does every page (web page, not comic strip image file) exist as a separately-stored HTML file, or does the archive generate a unique "page" every time a user visits ala a search engine? The reason I'm asking is that I want certain pages to have distinct formatting. For example, maybe every page has a blue background except for strip #27 (and ONLY strip #27), which has a green one. Is that possible? I wouldn't mind if that required extra coding; I'd be perfectly fine with custom-writing every page if necessary. I just want to know: can it be done in the first place?

[mitchellbravo]

As far as I understand, that's not possible- all comic pages have the same template.

(I tried to figure out a way around this, as I wanted my site to open on the most recent comic but have the large navigation menu at the top just for that one page. But the only way to have the large menu there would mean that it would be there on every other comic page which would be annoying for someone reading through the archive. )

[Asj]

I think it could be possible with javascript or css or a combination of both.
I think the key is having something to look for, for the pages you want different.
like saying, "if the url of this page is mycomic.smackjeeves.com/comicpagestuff, use this code: alternate layout code"

[darkenergy]

As far as I understand, that's not possible- all comic pages have the same template.

(I tried to figure out a way around this, as I wanted my site to open on the most recent comic but have the large navigation menu at the top just for that one page. But the only way to have the large menu there would mean that it would be there on every other comic page which would be annoying for someone reading through the archive. )

For the latest page, I just revamped the News/Welcome page and stuck the full view of the latest comic there. Of course if you want your main page to have a splash screen this would kill it.

Considering that the pages are auto-generated, I don't think you could do it here. They each point to a unique HTML so I bet it's an option...if you're doing your own hosting.

[mitchellbravo]

As far as I understand, that's not possible- all comic pages have the same template.

(I tried to figure out a way around this, as I wanted my site to open on the most recent comic but have the large navigation menu at the top just for that one page. But the only way to have the large menu there would mean that it would be there on every other comic page which would be annoying for someone reading through the archive. )

For the latest page, I just revamped the News/Welcome page and stuck the full view of the latest comic there. Of course if you want your main page to have a splash screen this would kill it.

Considering that the pages are auto-generated, I don't think you could do it here. They each point to a unique HTML so I bet it's an option...if you're doing your own hosting.

Huh, I tried to do that but couldn't figure out how to get the first/previous etc buttons to show up. Maybe I ought to try fiddling with it some more.

[darkenergy]

Huh, I tried to do that but couldn't figure out how to get the first/previous etc buttons to show up. Maybe I ought to try fiddling with it some more.

Yeah, no idea why I didn't do this sooner but all you need is to toss this in (I copied it from the comics page):

<h3><a href="{NAV_FIRST}">first</a>
<a href="{NAV_PREV}">previous</a>

{JUMPBOX_FORMATTED}

<a href="{NAV_NEXT}">next</a>
<a href="{NAV_LAST}">last</a></h3>

[eishiya]

The pages are generated dynamically, there is a single template for them all, and you cannot customize individual comic pages directly. However, you can do some basic customization (anything you can do with CSS, really) on an individual page basis.

You can do it with Javascript. The code would be in your Comic Page template and would look something like this:
NOTE: I've posted better/working code in a later post in this thread. Ignore this crap, but I'm leaving it here so all may laugh at my stupidity.

Spoiler! :

Code: Select all

<script type="text/javascript">
var current_url = window.location.href;
var page_id = current_url.match(regex pattern here)[0];

if(parseInt(page_id) = PAGE_ID_HERE) {
   document.bgColor = '#ffffff'; //background colour set to whatever you want. Rinse and repeat for other customization.
}
</script>

I'm rusty with Javascript, so this code is to be taken as a guide only. I didn't give you the regex pattern to use because after messing around with it for a while and not getting a working solution, I decided that doing this for a stranger for free isn't the best use of my evening. Perhaps someone else here is more kind. This is definitely doable, but I am rubbish at regex. The idea is to parse out the page's ID number from the URL to use for matching. Note that if done this way, if the most recent page needs the different colour and you have your default page here set to the most recent page, the URL won't have the page ID and this code will do nothing.

The "PAGE_ID_HERE" bit would need to be changed to the comic page's ID after you upload the page (it's the number in bold in the new page's URL: http://comictitle.smackjeeves.com/comics/#######/page-title/). If you want different stuff for several different pages, then the code should look like this

Code: Select all

if(page_id = PAGE_ID_HERE) {
   document.bgColor = '#ffffff';
   document.getElementById("whatever").style.color="#000000";
}
else if(page_id = OTHER_PAGE_ID_HERE) {
   document.bgColor = '#000000';
}


If you want a bunch of the pages to all have the same non-default customization, then try this:

Code: Select all

if(page_id = PAGE_ID_HERE || page_id = OTHER_PAGE_ID_HERE) {
   document.bgColor = '#ffffff';
}


[Thanatopia]

I'm rusty with Javascript, so this code is to be taken as a guide only. I didn't give you the regex pattern to use because after messing around with it for a while and not getting a working solution, I decided that doing this for a stranger for free isn't the best use of my evening. Perhaps someone else here is more kind.

"More kind"? Are you kidding? You've answered my question and given me an awesome head-start, which is exactly what I needed! Thank you so much!

I'm only beginning to understand coding with languages like Java, so I really don't know what the limits are yet. However, I'll bone up before I start my webcomic proper. And this will be the first lead I'll investigate once I'm more familiar with how JavaScript works.

You have a fantastic evening. This particular stranger is in your debt!

[mitchellbravo]

*starts the chant* EISHIYA! EISHIYA! EISHIYA! EISHIYA!

[darkenergy]

*starts the chant* EISHIYA! EISHIYA! EISHIYA! EISHIYA!

I know, right JavaScript didn't even occur to me.

[Asj]

I was the one that came up with the idea.
But when I looked it up and tried testing it, I couldn't get the code to work, so I didn't post it.

[eishiya]

Actually I am an idiot. That whole regex thing isn't needed because the value we need is a template variable! {COMIC_ID}, which I completely forgot about. Here's a working script:

Code: Select all

<script type="text/javascript">
var pageID = {COMIC_ID};

if (pageID == PAGE_ID_HERE) {
    document.bgColor = '#ff0000'; //background colour set to whatever you want. Rinse and repeat for other customization.
    document.getElementById("navigation").style.borderWidth = "10px";
    document.getElementById("navigation").style.borderColor = "#ff0000";
   //and so on :D
}
</script>

The whole var pageID thing is necessary because otherwise JavaScript gets confused about why we're comparing an integer to the exact same integer.

Note that this code must occur after/below any other relevant customization code. Putting it at the top of Comic Page customization should do the trick, but if it doesn't, stick it at the bottom.
Moreover, depending on your template, customizing elements may not be so easy. I tested this on In Silence with only limited results, but with one of my own templates, I was able to customize things pretty well.

Again, replace PAGE_ID_HERE with the actual ID for your unique page, and refer to my previous post for how to customize multiple pages. Also, this will work on any comic page, even if the URL doesn't have the page ID in it. However, if you have your most recent page displayed on your News page, it won't work there.

This page should help you understand how to get at the page elements you need with JavaScript:
http://www.w3schools.com/jsref/dom_obj_element.asp
Look around on this site, too. It contains a full reference of every way you can customize a given kind of element.


Edit: And yes, Asj was the first one to suggest JS xP This sort of customization is something that's been asked for on this forum a few times and JS has usually been the solution, but this is the first time I was able to give an actually useful answer (ie, implementation).

Editedit: Also, I noticed there's a {CHAPTER_ID} variable (which might be a recent-ish addition). This means similar code can be used for per-chapter customization. If you design your code well, you can have pretty much separate website designs for each chapter ;D

[darkenergy]

This sounds way better than making comics ok, i think a per-chapter header might be nice. Um...if I did that at all.

Also codeacademy says to use === because == isn't always parsed correctly, figured I'd toss that out there.

[Thanatopia]

Wow, what a thing to come back to after dealing with a project crunch! Thank you so much, everyone - this is a huge help!

Special thanks to eishiya! You are awesome - I TRULY appreciate your help with the coding!

Once again, thank you all - I've gotten everything I needed and more!