[Theme] Improvement CSS

[DakinQuelia]

Hello,

I do several CSS tests. Here is my result :

A default style. We could make a function to call a custom CSS file.

What do you think ?

Best regards

[DakinQuelia]

New version !

[ThePix]

Looking good.

I have done an update that lets you set the CSS file in the settings. We could then add various versions to the basic game, and authors could choose a theme (maybe that is what you are thinking?).

[DakinQuelia]

Yes, I was thinking that.

I'll add my CSS version.

[DakinQuelia]

My version for default style. I suggest to rename to "default".

style.zip

[DakinQuelia]

I offer this function to add a custom CSS :

// Adding a custom CSS
function addCustomCSS(customCSS)
{
    if (!customCSS)
    {
        return;
    }

    document.writeln(`<link rel="stylesheet" href="game/${customCSS}.css" />`);
}

For example : addCustomCSS('filename') Without modify the main link.

It's very useful if you want adding some CSS.

[ThePix]

A few queries about your default style. These things always sound negative, because I am only picking up on bits I disagree with so apologies for that!

Why auto rather than scroll for html overflow-y? I prefer scroll because it stops the screen changing once the text gets that long - and it will do so at some point.

The body element needs a background for users who upload to Itch.io, otherwise it will get set to grey.

You have no h3 (admittedly I have no h2 or h4 either). h3 is used for subtitle, should anyone use it.

Where is qbtn used?

When I use showDropDown or showMenu (in a conversation) the text is way to the left, under the side panes, and there is no dropdown as far as I can see.

A couple of classes have no dark mode:

• a links
• .meta messages
• .menu-option

[DakinQuelia]

I agree with that. I'll modify the CSS to fix the dark mode, background body and scolling. :)

The "qbtn" class is reserved to buttons in future or if author want to add buttons.

[ThePix]

Do you think it would be better to have a style.css file in the lib folder as the game folder, and authors just put what they want to change in the latter? I have oscillated between the two, and cannot decide which would be best.

[DakinQuelia]

The better is :

• Get Style by default via "lib folder" (default.css) IF no style define in settings.
• If author define a new CSS File in "game folder" then using this file (with your code no change).
• If author define some CSS Files then using the addCustomCSS() function.

I think. :)

By example :

settings.styleFile = "myfile";
settings.customCSS = ["custom", "other"];

In this case the author define a style (global) and some CSS files (via array).

Here is my new function addCustomCSS() :

// Display custom CSS
function addCustomCSS(customCSS = [])
{
    if (!customCSS)
    {
        return;
    }

    for (let file of customCSS)
    {
        document.writeln(`<link rel="stylesheet" href="game/${file}.css" />`);
    }
}

[DakinQuelia]

Have you got a screenshot for conversation, please ?

[ThePix]

Here:

If the screen is narrower, the side pane disappears and you can see it:

[DakinQuelia]

I'll fix it and will submit a new CSS File :)

What CSS class name ? Or a copy of your game project ?

[ThePix]

The problem was something I had done; sorry about that.

I have added the new file to Quest, but did tweak slightly. I also added the facility to add further CSS files in the way of themes. Authors can potentially pick one or more, to be used in addition to the default and their owncustomisation. If anyone fancies writing some CSS theme files...?

I will leave this open for now in case anything comes to light,

[DakinQuelia]

It's better. Good job. :) I'll note possibility of new ideas.

[ThePix]

Just updated it slightly so the text has a maximum width.

[DakinQuelia]

I suggest this :

#inner {
  max-width: 98%;
  margin:0 auto;
}

To adapt at screens.

[ThePix]

My thinking is that it is hard to read text that is too wide. If someone has a wide screen and the browser is full screen, the text is easilt 40 cm wide, which is less convenient to read easily. A maximum size limits it. https://baymard.com/blog/line-length-readability

[DakinQuelia]

I understand. But I prefer with pourcent instead of pixels.

[ThePix]

I am closing as I think it is resolved as far as possible.