Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Quick Links
Categories
- 15K All Categories
- 7.8K General
- 22 Announcements
- 6.1K Off Topic
- 1.3K Playground
- 359 Suggestions & Bug Reports
- 2.1K General Discussion
- 790 Help
- 950 Bug Reports
- 1.9K Suggestions
- 140 Legacy
- 21 General Discussion
- 31 Help
- 46 Bug Reports
- 42 Suggestions
- 1.2K Idle Game Maker
- 503 Developer's Lounge
- 134 Games
- 59 Suggestions & Bug Reports
- 364 Games - Old
- 371 RandomGen
- 371 General Discussion
- 43 Nested
- 43 General Discussion
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.
Check if you are posting in the correct category.
The Off Topic section is not meant for discussing Cookie Clicker.
Little CSS tutorial
AuroyaNovo
Posts: 5,493Member, Friendly, Helpful, Cool ✭✭✭✭✭
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.
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:
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:
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:
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:
Between the brackets, we now add this:
And with that done, we got this:
Note that you don't have to use this color. The actual part where you define the color is this:
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:
The "position: fixed;" is needed for almost every container, or they won't change their place.
Now the game looks like this:
The resources container now is below the clickables container. To understand how exactly the commands work, note that I typed
which means, that the space between the left edge of the screen and the container now is 55 pixel.
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.
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:
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:
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.
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:
Then the top bar will be hidden partially by your resources window. Like this:
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:
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!
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.
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=IDYou 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:
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:
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:
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:
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.
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:
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:
5
Comments
To show in an example:
#resources { position: fixed; background: #999999; right: 0; margin-right: 300px; top: 20%; width: 20%; height: 99px; }That would look like this:
The container now is 300 pixels away from the right screen edge, no matter what screen size. That prevents overlapping the store part.
And now, that was it. The very basics of CSS for IGM. There are many other options to use, if you want you can go through a deeper CSS tutorial on the web, to improve your games appearance even more. CSS is very easy to learn, and almost even easier to use once you get used to it. I also plan on doing more tutorials for more interesting stuff to greatly personalize your game.
Feel free to ask stuff if you don't understand something.
And have fun coding your game!
Edit: Keep in mind, that you might want to resize your browser window to see if everything works properly. As mentioned above, your containers may not overlap on your own screen, but maybe on a smaller one.
Edit2: One more important note: The upgrades container has per default a mouseover effect to auto resize the container. To avoid getting weird flashing bugs, you have to overwrite the default setting of the default IGM stylesheet. You can do that by adding this to your own stylesheet:
(the upgrades container has the default setting to automatically choose the height of the container on mouseover)
#upgrades:hover { height: desiredheight; }To avoid weird flickering, simply set the height here to the same amount you used for your normal upgrades container. Then it will always be the same size, no matter what.
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/)
top: 28px;orright: 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.
Does the universal selector work? (*)
Do I have to set the syntax highlighting to CSS?
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
You can set syntax highlighting to css if you want, but it is not needed. Everything will work without it.
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?
You don't need to specify all boxes.
Does CSS3 work?
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.
*{position:fixed;}?And sorry for the late answer, didn't check my discussions ^-^'
@keyframesseem like what wouldn't allow.Can you have animated GIFs for icons?
So different from this hell I'm living
So different now, from what it seemed
Now life has killed the dream I dreamed