Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Please read the forum rules before posting.



Check if you are posting in the correct category.



The Off Topic section is not meant for discussing Cookie Clicker.

Little CSS tutorial

AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭
edited February 15 in Developer's Lounge
Many of you use custom stylesheets in your IGM games. But do you really know what you're doing?
Even if you think your stylesheet is good and bugfree, it also depends on the screensize of the user/player, how it really looks. Since I use my tablet for every IGM game, I often notice that the containers overlap, some stuff is not visible.
I took WD as example here, since its stylesheet is used by many IGM game devs.
image
As you can see, the buildings container overlaps the top bar. Also, the resources and achievements containers overlap the store bar on the right. That is caused by simply using % declaration for the top positioning without taking into count, that this might be lower than 28 pixels on smaller screens.

So I want to give you some informations about the setup of the "default" IGM screen, and how you can position your containers without overlapping and flickering.

The basics include, that you know how to make and include your stylesheet.
To make your stylesheet, you have to set up a new pastebin file. Then, you have to link it to your IGM game. To do that, you simply have to add this to your "settings" section in your game pastebin file:

-custom stylesheet : http://pastebin.com/raw.php?i=ID
You have to replace "ID" with the actual ID of your stylesheet pastebin, which you will find at the end of the URL of your pastebin file. Could look like this: http://pastebin.com/DThBgm9v

Now you have linked your stylesheet to your game. But that won't do much by itself, you obviously have to add some code to this stylesheet.

So lets go through the basic containers. As you might know, there are 6 basic containers in the game. The buildings, upgrades, clickables, resources, achievements and title containers. In your stylesheet, you can change their appearance by simply typing this:
#buildings {} or #upgrades {}
Note that you have to put every command between the {} brackets. Otherwise, they don't take effect.

Now you want to know what you can do. I will not tell everything here, since it is way to much, and I'm to lazy for that now. But I want to give a good overview about the basics.

The completely default outlay of the IGM games looks like this:
image

It's not bad, but also not very individual. Let's make it more fancy by changing the background color first.
We need to change the body for that, what we can do by typing this:
body {}
Between the brackets, we now add this:
background: #EE66EE;
And with that done, we got this:
image

Note that you don't have to use this color. The actual part where you define the color is this:
background: #EE66EE;
The hashtag defines, that you are using RGB colors with hex values. The 6 characters behind the hashtag define your actual color, where every pair stands for one of the RGB values. In my example, I used R(EE) G(66) B(EE), what turns out as the pink you see in the screenshot.
If you are not familiar with the concept of RGB, you easily can find out what hex values to use for your desired color on this site.

Remember this for later, because you also can use it for the single containers.

Now to the next part. The positioning of different containers.
To specify where your container will be placed, you use these commands: left, top, right, bottom
You use these commands as seen in this example:
#resources { position: fixed; left: 55px; top: 30%; }
The "position: fixed;" is needed for almost every container, or they won't change their place.
Now the game looks like this:
image
The resources container now is below the clickables container. To understand how exactly the commands work, note that I typed
left: 55px;
which means, that the space between the left edge of the screen and the container now is 55 pixel.
top: 30%;
means, that the space between the top edge of the sceen and the container is 30% of the whole screen. When you resize the browser window, these 30% will stay 30% of the window. If you lower the height of your browser, the space between the screen edge and the container will also be lowered. When you resize your browser to have a bigger height, the space will also be bigger.
Now, we add a little bit more to the code.
#resources { position: fixed; left: 55px; top: 30%; right: 50%; bottom: 125px; }
Now we actually get to the point where we already resize the container. Since we defined all 4 sides, the container has to be raised in size to fulfill all of our commands. What happens, you can see here:
image

These were the basic commands for the positioning. I get to some more stuff later. But now, I want to tell you how to resize your containers without defining all 4 sides. That can be done with the 'width' and 'height' commands.
You can use those like this:
#resources { position: fixed; left: 55px; top: 30%; width: 20%; height: 99px; }
To make sure we can use these commands properly, we only define the left and top position for the container. The rest of the job will be done by the width and height commands.
image
Now we have a container that is 99 pixels high, and 20% wide.

And that was almost all of it. These are the basics you need to change the appearance of all the containers in IGM. And as mentioned above, you also can apply different colors to your containers by simply adding the background command to them.


But to make everything working properly, you need to know some stuff about the default layout of the IGM.
On top of the screen, you see the top bar. This bar is important for the devs, Orteil and Opti. So you should make sure that this bar always can be seen. Same goes for the "bar" on the right, the store, where you find the buildings, upgrades, the advertisement and the savegame part per default.
Maybe you have something typed like this:
#resources { position: fixed; background: #999999; left: 55px; top: 0; width: 20%; height: 99px; }
Then the top bar will be hidden partially by your resources window. Like this:
image

Thats not what the devs of IGM want, and it doesn't look good as well.
To avoid that, you simply can add a 'margin-top' command to your container, like this:
#resources { position: fixed; background: #999999; left: 55px; margin-top: 28px; top: 0; width: 20%; height: 99px; }
The margin is like an invisible outline of every container. Giving it the size of 28 pixels at top pushes it down, and since the topbar has a height of 28 pixels, that makes sure that your container won't overlap it.

Continued in next post!
Post edited by Chisako on
Tagged:
«1

Comments

  • Gabidou99Gabidou99 Member Posts: 570 ✭✭
    Nice tutorial.
    image image image
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭
    Gabidou99 said:

    Nice tutorial.

    Ye, I just hope I didn't forget anything. But if you feel like missing something, just ask :3
  • 1234abcdcba43211234abcdcba4321 Member, Friendly, Flagger, Conversationalist Posts: 9,712 ✭✭✭✭✭
    edited July 2014
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    Really, the overlap isn't that bad when you notice that there's this zoom out button on the browser. That's how I got the WD one to stop glitching out.

    Sure, it's not that bad. I don't blame anypony. But maybe somepony wants to make their game look good for everypony. Without forcing them to fix it themself.
  • Frayu1600Frayu1600 Member Posts: 4,177 ✭✭✭✭✭
    edited July 2014
    I'll hopefully follow this instructions to improve my idle game. Thanks mate.
    Steam Profile / Osu! Profile / Newgrounds Profile / YouTube Profile (soon™)
    Location: EU (IT) GMT+1 / Likes: Things / Dislikes: Other Things
    About Myself: Busy, Lazy and Crazy, with a spoonful of honey.
    About Yourself: Interested in reading this. I can't believe it. Mom, get the camera!
    Quotes: "10/10 would create more alts to give more awesomes" -Frey / "I'm too lazy to create a quote" -Frey / "Make the future good by making the present better" -Frey
    (\n3n/)
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭
    Frayu1600 said:

    I'll hopefully follow this instructions to improve my idle game. Thanks mate.

    Feel free to ask if you don't understand something.
  • TelluriumTellurium Friendly, Cool, Idle Game Master, Conversationalist, Turquoise Posts: 5,398 Mod
    Ooh, did not know about the margin command. Will mess around with that, thanks for the info :D
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭
    Tellurium said:

    Ooh, did not know about the margin command. Will mess around with that, thanks for the info :D

    I learned about that while checking out the default css for the IGM. There are some pretty interesting things in there.
  • TelluriumTellurium Friendly, Cool, Idle Game Master, Conversationalist, Turquoise Posts: 5,398 Mod
    Okay, it was a trap. I put 28 and 300 px but they went way over the things.
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭
    edited July 2014
    Tellurium said:

    Okay, it was a trap. I put 28 and 300 px but they went way over the things.

    How about you set
    top: 28px; or right: 300px; ?

    Edit: I guess you didn't change the top/right commands to 0, since they get are additive. Making margin-right 300px and right 10% would make the container appear 10%+300px away from the right edge of the screen.
    I'm now not sure why I used the margin command in the first place, I guess I had the dumb at that point. I play a little bit around with it and may change it in my tutorial.
  • DWalkthroughGuyDWalkthroughGuy Member, Conversationalist Posts: 656 ✭✭
    I'm very sorry for the big bump, as I'm really refreshing my mind since CSS class. A few questions:

    Does the universal selector work? (*)
    Do I have to set the syntax highlighting to CSS?
    Here's my YouTube Channel (I actually make videos): http://www.youtube.com/user/DWalkthroughGuy
    Working towards a PhD in Dank Memeology, Normie Defense and Weeabooism.
    "Do you think God stays in heaven, because he too lives in fear of what he's created?" -Spy Kids
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    I'm very sorry for the big bump, as I'm really refreshing my mind since CSS class. A few questions:

    Does the universal selector work? (*)
    Do I have to set the syntax highlighting to CSS?

    Never tried the universal selector in an IGM game, but I don't see any reasons why it shouldn't work.

    You can set syntax highlighting to css if you want, but it is not needed. Everything will work without it.
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    But I don't see the point if the universal selector...

    Me neither. Not in IGM.
  • Joe_UnverzagtJoe_Unverzagt Member Posts: 14 ✭✭
    I am currently trying to get my CSS to work, and I have a few questions.

    1. Do I always have to include the body command, even if I don't want to change the background/am using a picture for the background?
    2. Do i have to specify all boxes in the CSS file if I add one or will the ones I don't add appear with default values?
  • ExplodingCamelExplodingCamel Member Posts: 7,473 ✭✭✭✭✭

    I am currently trying to get my CSS to work, and I have a few questions.

    1. Do I always have to include the body command, even if I don't want to change the background/am using a picture for the background?
    2. Do i have to specify all boxes in the CSS file if I add one or will the ones I don't add appear with default values?

    If you want to use an image use the body selector, but the background-image:url('url goes here') property.
    You don't need to specify all boxes.
    Does CSS3 work?
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    I am currently trying to get my CSS to work, and I have a few questions.

    1. Do I always have to include the body command, even if I don't want to change the background/am using a picture for the background?
    2. Do i have to specify all boxes in the CSS file if I add one or will the ones I don't add appear with default values?

    1. I don't think so. If you're going with the default background you can ignore the body part.
    2. I'm afraid the boxes command of the IGM is currently bugged. You will not be able to add additional boxes (at least, I didn't manage to add some)
    If you are talking about the default boxes: They all have default settings, if you don't edit them in your stylesheet, they will take place where they were ment to be by Orteil and Opti.
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    I am currently trying to get my CSS to work, and I have a few questions.

    1. Do I always have to include the body command, even if I don't want to change the background/am using a picture for the background?
    2. Do i have to specify all boxes in the CSS file if I add one or will the ones I don't add appear with default values?

    If you want to use an image use the body selector, but the background-image:url('url goes here') property.
    You don't need to specify all boxes.
    Does CSS3 work?
    Css3 does work, as far as I know. Not sure about every feature, but transitions and animations were working properly (except for chrome sometimes)
  • ExplodingCamelExplodingCamel Member Posts: 7,473 ✭✭✭✭✭
    Does it work if I just
    *{position:fixed;} ?
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    Does it work if I just
    *{position:fixed;} ?

    I think it should work, since you simply apply it to everything. At least I don't see a reason why it shouldn't. If it doesn't work, you would notice it anyway :3

    And sorry for the late answer, didn't check my discussions ^-^'
  • ExplodingCamelExplodingCamel Member Posts: 7,473 ✭✭✭✭✭
    DasBloody said:

    Does it work if I just
    *{position:fixed;} ?

    I think it should work, since you simply apply it to everything. At least I don't see a reason why it shouldn't. If it doesn't work, you would notice it anyway :3

    And sorry for the late answer, didn't check my discussions ^-^'
    That's fine. I add that rule to all of my stylesheets, I was just wondering if it worked in IGM.
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    DasBloody said:

    Does it work if I just
    *{position:fixed;} ?

    I think it should work, since you simply apply it to everything. At least I don't see a reason why it shouldn't. If it doesn't work, you would notice it anyway :3

    And sorry for the late answer, didn't check my discussions ^-^'
    That's fine. I add that rule to all of my stylesheets, I was just wondering if it worked in IGM.
    It's still css, IGM can't change that. ;3
  • ExplodingCamelExplodingCamel Member Posts: 7,473 ✭✭✭✭✭
    DasBloody said:

    DasBloody said:

    Does it work if I just
    *{position:fixed;} ?

    I think it should work, since you simply apply it to everything. At least I don't see a reason why it shouldn't. If it doesn't work, you would notice it anyway :3

    And sorry for the late answer, didn't check my discussions ^-^'
    That's fine. I add that rule to all of my stylesheets, I was just wondering if it worked in IGM.
    It's still css, IGM can't change that. ;3
    Yeah, I just wasn't sure how IGM parses css, given that some things like @keyframes seem like what wouldn't allow.
    Can you have animated GIFs for icons?
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    DasBloody said:

    DasBloody said:

    Does it work if I just
    *{position:fixed;} ?

    I think it should work, since you simply apply it to everything. At least I don't see a reason why it shouldn't. If it doesn't work, you would notice it anyway :3

    And sorry for the late answer, didn't check my discussions ^-^'
    That's fine. I add that rule to all of my stylesheets, I was just wondering if it worked in IGM.
    It's still css, IGM can't change that. ;3
    Yeah, I just wasn't sure how IGM parses css, given that some things like @keyframes seem like what wouldn't allow.
    Can you have animated GIFs for icons?
    I never tried that, but again, I see no reason why it wouldn't be possible.
  • [Deleted User][Deleted User] Posts: 4,218
    edited October 2014
    The user and all related content has been deleted.
    Post edited by [Deleted User] on
    I had a dream my life would be
    So different from this hell I'm living
    So different now, from what it seemed
    Now life has killed the dream I dreamed
  • Solar's WrathSolar's Wrath Member Posts: 97 ✭✭
    Is is normal that I can't prevent the box to overlap when i shrink the window? I tried using the margin command and set limit in all direction but it doesn't work, no matter the size of the box, using either pixels or %, they will overlap if I shrink the page
  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭

    Is is normal that I can't prevent the box to overlap when i shrink the window? I tried using the margin command and set limit in all direction but it doesn't work, no matter the size of the box, using either pixels or %, they will overlap if I shrink the page

    Could you provide a screenshot, or at least tell what boxes are the troublemakers?
  • Solar's WrathSolar's Wrath Member Posts: 97 ✭✭
    edited May 2015
    DasBloody said:



    Could you provide a screenshot, or at least tell what boxes are the troublemakers?

    Well actually I managed to fix it using overflow commands, now i have a different problem ^^' gonna make a topic for my other problem

  • AuroyaNovoAuroyaNovo Member, Friendly, Cool Posts: 5,520 ✭✭✭✭✭
    Fuck... I broke the tut by clearing out my imgur folders x.x
«1
Sign In or Register to comment.