Comic Fury Webcomic Hosting - Two color schemes in one layout: Here's how I did it

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Two color schemes in one layout: Here's how I did it
Pages: [1]

"Two color schemes in one layout: Here's how I did it", 29th Oct 2019, 4:08 PM #1
Eustacheus

User avatar
Posts: 31
Registration date: 6th Oct 2019
Location: At home. Why do you ask?
So, I made a custom layout for my comic, starting with the simple box layout, altered it to my liking and then converting it to html to alter it even further.
I made two versions, a dark (to make it simple, let's just say it has a black background with white texts) and a light one (white background, black texts).

Now I wanted to use both color schemes in one comic. I wanted the dark one to be default, and for several comic pages I wanted to use the light layout.

I created a custom variable (Manage Webcomic -> Edit Layout -> Add custom variables (under "Useful" on the right)):

Variable Template Code Name: [v:custom.layoutlight]

Variable Form Field Name: This page uses the light layout

Variable Type: Boolean (true/false)

Default value: unchecked


Now this variable appears on the (Mass-)Upload Comic Page (between the calendar and Comic Keywords). If you want the page you're uploading to use the other color scheme, just check it.

Okay, now to make this variable work:

I copied the CSS files of both layouts into Notepad++ and compared them to each other. They're identical, except for the color stuff.
(this is a bit complicated, I hope, I can explain it. You can skip it, though. I'll explain at the end):

EDIT: There's an easier way, as Kyo showed below, so I edited the workflow below.

The original CSS looks like this (This is the dark, default one):

html {
    margin:0;
    padding:0;
    word-wrap:break-word;
    background: #000000;
}


Now, in the one for the light layout, I deleted everything between the brackets (!) that was identical in both color schemes, leaving only the color information:

So the light CSS looked like this:

html {
    background: #FFFFFF;
}


I did that for everything that used a color definition and saved the text as css (if you use notepad just save it as .txt and rename it to .css after).
I uploaded the "light.css" to my extra files under /files/css/light.css

The original (dark) css stays where it is, unchanged.

To get the variable I created at the beginnig to work, I needed to make a condition for the new CSS file:

[c:custom.layoutlight]
     <link rel="stylesheet" type="text/css" href="/files/css/light.css" />
[/]


I pasted this in Manage Comics -> Edit Layout -> Overall directly under this:

<style type="text/css">
    <!--layout:[css]-->

</style>



So it looks like this:

<style type="text/css">
    <!--layout:[css]-->

</style>

[c:custom.layoutlight]
     <link rel="stylesheet" type="text/css" href="/files/css/light.css" />
[/]


That's it.

What it does is: The page loads the default CSS and then checks if layoutlight is "true" (if you checked the layoutlight variable, when uploading your comic page). If it is, the CSS is overwritten with the parts from the light.css.

You can of course skip the whole CSS editing part and save and upload the complete light css to your extra files, but I think my solution is more elegant.




If you use different graphics for the layouts, like light and dark pagination buttons, put them in different folders
(eg. files -> paginationdark -> next.jpg)

Then you need to link to the graphic like this:

/files/[c:custom.layoutlight]paginationlight[/][c:!custom.layoutlight]paginationdark[/]/next.jpg




Of course the variable works on comic pages only. If you want to use the light layout on extra pages, just put this as the first thing into the html of your extra page:

<link rel="stylesheet" type="text/css" href="/files/css/light.css" />



That's pretty much it. I hope I described it good enough for everybody to comprehend.
I also hope this will be useful to some of you.
If you have a better or simpler solution though, let me hear it. (Thanks again, Kyo!)
29th Oct 2019, 8:15 PM #2
Matt Comics
πŸ‹οΈβ€πŸŽ¨π•½π–Šπ–“π–†π–Žπ–˜π–˜π–†π–“π–ˆπ–Š 𝕸𝖆𝖓 πŸ’…πŸ‚
User avatar
Posts: 1498
Registration date: 17th Aug 2017
Location: Somewhere between the universes
cool! dunno if I'll actually use it (probably not on my existing sites) but someone will inevitably find this useful. nice to see people sharing stuff like that. the code snippet thread has been awfully quiet as of late...

(also I only noticed your post in the other thread now, but Kyo already masterfully helped you anyway)
_______________________
image
Choose your own poll: 150 HEROES VOTE MAYO
29th Oct 2019, 8:24 PM #3
Kyo
🐊
User avatar
Posts: 18251
Registration date: 6th Jul 2008
Location: the swamp
Good stuff, thanks for taking the time to write that up. I have a couple suggestions, I hope you don't mind.

So first of all, here's a fun fact about CSS, if you have two blocks for the same thing (e.g. two seperate html {} blocks) in your CSS, the values of the second one will overwrite values of the first.

so e.g.

<style>
html {
    color:white;
}


html {
    color:black;
}
</style>


will always result in the text color being black, this is part of the CSS standard so this will work reliably in all browsers. What I'm getting at is that it's actually enough to have the light version of the theme be the default CSS, and then do the following:

<style type="text/css">
    <!--layout:[css]-->
    [c:!custom.layoutlight]
        html {
            background: #000000;
        }

        [...]

        #comic-comment-link-box a:link, #comic-comment-link-box a:visited {
            color:#595959;
        }
    [/]
</style>


the important bit here is that I moved the dark mode rules down, below the standard layout CSS (<!--layout:[css]-->). This is actually the exact way I also implemented dark mode on comicfury, it's just all the light mode css + more stuff that overwrites a bunch of values.


Second suggestion, and I'll say this right off the bat, what I'm about to propose isn't necessarily better than your solution, it depends on your workflow. But if you do have extra pages that use dark mode, it might be worth to copy your rules that are specific to dark mode into a seperate css file that you can include on pages, and then when you edit that file, it will update all places that include it automatically, rather than having to edit all your dark extra pages as well as the overall layout.

The way you do this is pretty simple, make a new text file on your computer, and rename the file extension from .txt to .css (you may have to enable showing file extensions in your file browser settings if you're on windows, I'm not sure). Paste in your css code and save. If you use a program like notepad++ you can also get syntax highlighting for your css code, making it a bit easier to edit.

Upload your .css file as an extra file on your webcomic and include it where you need it with the following HTML tag (if your file is not named dark.css you may have to edit the path, obviously):

[c:!custom.layoutlight]
    <link rel="stylesheet" type="text/css" href="/files/dark.css" />
[/]


(on the overall page, make sure to put the code outside the <style></style> block)

But naturally you might think editing a file on your computer and uploading it is not easier than just editing a couple extra pages and your webcomic layout, especially if you do your management from a mobile device
_______________________
hello
Two weeks ago, 8:17 AM #4
Eustacheus

User avatar
Posts: 31
Registration date: 6th Oct 2019
Location: At home. Why do you ask?
Okay, after reading your post, I did the following:

I restored the original (dark) css, created a new css with just the light parts and uploaded it as /files/css/light.css

Then I replaced my css stuff from Overall Layout with this:

<style type="text/css">
	<!--layout:[css]-->
</style>
[c:custom.layoutlight]
     <link rel="stylesheet" type="text/css" href="/files/css/light.css" />
[/]


Works like a charm. Thanks, Kyo. I'll edit my post later today.
5 days ago, 7:28 AM #5
Reshiimon

Posts: 2
Registration date: 6 days ago
Location: Garbage Mountains, NY
is there a way to do this in the simple layout editor? also, is there a way to make more than two color schemes?
5 days ago, 11:37 PM #6
Eustacheus

User avatar
Posts: 31
Registration date: 6th Oct 2019
Location: At home. Why do you ask?
You need to alter the html, so the simple layout won't do, I think. That's a question for Kyo, though.

I think it's possible to make as many color schemes as you want. You just need to add a variable and css file for every color you want.

Let's say you want five schemes (black, white, red, green and blue). Black is default, you need to make four new variables and four separate css files for the other ones. Then you need to make 4 different contitions in the Overall Layout:

<style type="text/css">
	<!--layout:[css]-->
</style>
[c:custom.layoutwhite]
     <link rel="stylesheet" type="text/css" href="/files/css/white.css" />
[/]
[c:custom.layoutred]
     <link rel="stylesheet" type="text/css" href="/files/css/red.css" />
[/]
[c:custom.layoutgreen]
     <link rel="stylesheet" type="text/css" href="/files/css/green.css" />
[/]
[c:custom.layoutblue]
     <link rel="stylesheet" type="text/css" href="/files/css/blue.css" />
[/]


I'm not sure what conditions for different graphics like buttons, etc., would have to look like, though.
4 days ago, 10:05 AM #7
Kyo
🐊
User avatar
Posts: 18251
Registration date: 6th Jul 2008
Location: the swamp
you cannot do it in the simple layout editor, but you can make a simple layout and convert it to HTML and then do it. just be aware that once a layout is converted, you can never use the simple layout editor to edit it again, it's a one way process
_______________________
hello
3 days ago, 5:29 AM #8
Reshiimon

Posts: 2
Registration date: 6 days ago
Location: Garbage Mountains, NY
can this be done with backgrounds? like, can i make the different themes change the background/images in general or does it only work with colors?
3 days ago, 12:20 PM #9
Eustacheus

User avatar
Posts: 31
Registration date: 6th Oct 2019
Location: At home. Why do you ask?
It should work with backgrounds, too. Since I don't use background pictures I don't know where they are defined in the overall layout but it should work similar to the pagination buttons, like I desribed above. I suggest you upload a folder for each color to your files.

Like:
folder: black
- background.jpg
- first.jpg
- last.jpg
- next.jpg
- previous.jpg

folder: white
- background.jpg
- first.jpg
- last.jpg
- next.jpg
- previous.jpg

and so on.
Forum > Layouts, HTML, CSS & Javascript > Two color schemes in one layout: Here's how I did it
Pages: [1]