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!


I didn't know there was an instillation folder. I thought it ran in whatever directory it was placed. Do you know how to find the installation folder? I must have about 10 squiffy projects laying about the place. If I could change it in one place for my current effort, that would make things much easier.


Look at
[Installationpath]Squiffy\resources\app\node_modules\squiffy
:-)
Good Luck!


I‘ve got a problem....
I simply copied the whole wall of code into the file. And when I clicked "preview", the color didn't change. Instead, there's this line of words saying,

"body null
a.squiffy-link null a.squiffy-link.disabled null a.squiffy-header-link null div#squiffy-container null div#squiffy-header null div#squiffy null hr null"

I use the online editor of squiffy, and there's only 1 window to type. I don't know how to add css in or whatever, so I just copied the thing into the window..

Thx


I'm not sure how that would work. What you want to do is to drop everything I entered into the ccs file. Then click on the index.html file. That should run squiffy with your new colors.

Again, any time you build squiffy, it's going to reset this file so create something called Xstyle.css and always save it as style.css when you are ready to test to download to the game site.


Log in to post a reply.

Support

Forums