One stop color/background question

Bluevoss
15 Jun 2018, 16:13

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!


Bluevoss
20 Jun 2018, 01:38

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.


DaxAtDS9
07 Jul 2018, 04:57

Please try


Bluevoss
07 Jul 2018, 22:14

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.


Bluevoss
07 Jul 2018, 22:18

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


DaxAtDS9
11 Jul 2018, 04:35

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!


Bluevoss
21 Jul 2018, 00:09

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.


DaxAtDS9
22 Jul 2018, 05:32

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


SummerLemonade~
09 Aug 2018, 05:41

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


Bluevoss
18 Aug 2018, 20:17

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.


GalaxyHunter
20 Sept 2018, 16:00

How do you find the css file???


alice-blue
20 Sept 2018, 17:03

GalaxyHunter, this thread talks about how to find the css file: https://textadventures.co.uk/forum/squiffy/topic/5990/how-can-i-make-the-squiffy-background-black


robbie22
22 Sept 2018, 09:03

good one ..