One stop color/background question

Been playing with another game, on and off. I've asked before and messed around, but I'd like to know (in one place, or possibly a good link):

How do you change background colors?
How do you change text colors?
How do you change path selection colors?

Thanks!


I know how and wrote a long explanation on how to do it. But for some reason the forum ate my post. If anyone is interested in this, please reply and I'll give it another go.


Please try


As I understand it, Squiffy regenerates a file called "style.css" when you build the game file (to play it in HTML). You can verify this by the date of the file.

So the trick is to copy this file (you can leave it in the directory" so something different, i.e. "Xstyle.css". Now, for my game, I want black background and red text. For this, I've modified it and added sections as you can see:

body {
    color: Red;
    background-color: black;
}

a.squiffy-link
{
    text-decoration: underline;
    color: Red;
    cursor: pointer;
}
a.squiffy-link.disabled
{
    text-decoration: inherit;
    color: Brown;
    cursor: inherit;
}
a.squiffy-header-link
{
    text-decoration: underline;
    color: White;
    cursor: pointer;
}
div#squiffy-container
{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, serif;
}
div#squiffy-header
{
    font-size: 14px;
    text-align: right;
}
div#squiffy
{
    font-size: 18px;
}
hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 16px; margin-bottom: 16px;
}

Body controls the displayed colors. Link and disable control the clickthroughs.


You can copy the above into your own ccs file and modify to fit.

As I mentioned, when squiffy builds, it rewrites this file. So the trick is as follows.

  1. Click the build to make your final code.
  2. Edit your "Xstyle.css". Once you have it in edit mode (notepad will do), save it as "style.css". Don't be shy - the worst that will happen is you'll regenerate it next time you build.
  3. Now you can play your game clicking on the "index.html" file. Your colors should be maintained.
  4. If you are releasing this code to the squiffy site, zip it up at this point and post it up. You'll just need to remember to remake it every time you build.

More information on the colors you can use and HTML in general can be found here:

https://www.w3schools.com/colors/colors_names.asp


Oh I see. I‘ve had same problem but didn‘t see it in your post.
My solution:
In the Squiffy installation folder is a css template file. I‘ve copied and renamed it to „css-template-original“. After that I‘ve made my changes in the Squiffy css template. Everytime I Build, Squiffy uses that file with my settings without the need to change it everytime.
So I am working only on one project at one time, I had to change settings only for my next project.
Same works fine with the html template in Squiffy folder. I‘va placed the viewport there.

Have fun!


Log in to post a reply.

Support

Forums