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.

A big stylesheet tutorial

Mac15001900Mac15001900 Posts: 104Member ✭✭✭
edited June 2015 in Developer's Lounge
Yup, it's a big tutorial for making stylesheets. Enjoy!


1. Some vocabulary.
Webpages consist of three basic documents. In a very big simplification:
HTML: The stuff on the page, text, pictures and so on.
CSS: The style of the page. It outlines how each element looks like and where is it positioned.
JavaScript: Logic of the page. In IGM it calculates the amounts of resources you should have etc.

An IGM stylesheet is something that attaches to the end of the CSS document.


2. The basics and positioning
DasBloody has made an excellent tutorial on this, so I'm just going to link it.
Go here.


3. Search and destroy style


Let's now change the way a building looks like. You will need to modify some of it's components. To know how are they named, open an IGM game, right-click a building and select 'inspect element'. You should see something like this on the bottom of your screen:


There are two things you can to make your life easier now. First, click the button in the upper-right corner to move everything to the right. Secondly, select 'Sources' on the top bar and press F8.


If that doesn't work, just try googling how to freeze Javascript in your browser.
IGM updates its HTML every second and it can sometime be hard to explore it then.

Go back to the elements tab. Now you should be able to freely explore the HTML tree by clicking the arrows next to each element.


You can also mouse-over each element to make it highlight in the game. You can use it to find out which one do you want to modify. Each of them has one or more classes, like class="costs-stone cost enabled"
This is what you are looking for. In your stylesheet you can add:
.cost{ color: blue;}
in order to change each cost line to blue.

This however will change every cost everywhere. Suppose you want to only change the color of costs of buildings.
For this, you will need to play with CSS selectors. Here is a good reference for them. And here are two examples of how to use them:

.class1 .class2{ color:blue; }
Will select every element with class2 inside an element with class1 (on the HTML 'tree').

.class1.class2{ color:blue; }
Will select every element with class1 and class2.

And a more complex example:
.building:not(.moreThan0) .name~.amount{
font-size:0px;}
Will hide the amount of every building with the amount 0.


4. Actually adding some style
Now that you know how to select what do you want to modify, you can start adding some styling to it. The way I always do it is by... googling it. "CSS how to X" will probably throw an article from W3Schools, which will have all the commands and examples you need. I will just list some properties you might be interested in:

Literally all visual stuff that I use: color, background, opacity, border, box-shadow, text-align, font-size, font-weight, text-decoration.
Some more positioning things: position, height, width, min-width/height, padding, margin, float, align.

Example of a finished styling for an element (name of a building):
.building .name.buildingType{ font-size: 16px; font-weight: bold; position: absolute; width: 100%;}
That has the following effect:



Now just one rule you must remember: any CSS styling for a given element will always overwrite styling for this elements above it. This means that this:
.building .name.buildingType{ color: blue;} .building{ color:green;}
Will overwrite the color for .building .name.buildingType to green, since .building applies to it too. Because of this, always style more general elements first.


5. Pseudo elements and hovering

For each element, you can create something that will display before it and after it. Those two things are called pseudo elements and are incredibly useful in IGM to replace some content with another. I'll just throw in an example:
.occupations  .label{
	font-size:0px;
}
.occupations .label::after{
	font-size:12px;
	content: 'occupies ';
}
This replaces the 'takes' text in each building that takes up a resource with 'occupies', by first hiding by changing its font-size to 0 and then adding some text after it, with any desired content.
Remember that the content property only works with ::after and ::before elements.

Next, there is the :hover property. It's actually quite simple. This
.button:hover{
border-color: yellow;
}
Will change the color of the border of any button you mouse-over to yellow (and back to what it was when you mouse-out).


6. Animations
There are two ways to make animations with CSS. One of them involves @keyframes - it doesn't work in IGM, since anything with @ will crash your stylesheet. The other one involves transitions. I'm not going to explain them, because it's already done well here.
I'll just throw in an example of a fancy effect I've made when mousing over a button:

.button:not(.disabled){ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .button:not(.disabled)::before{ content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2ac52a; /*This is the color of the effect*/ -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .button:not(.disabled):hover, .button:not(.disabled):focus, .button:not(.disabled):active { color: white; } .button:not(.disabled):hover:before, .button:not(.disabled):focus:before, .button:not(.disabled):active:before { -webkit-transform: scale(1); transform: scale(1); }


7. Final tips

Check out stylesheets for other games. CTRS has all the stuff I've talked about here, for example.

Don't be afraid to google stuff. People before you have wondered "how to do X in CSS" and many of them already got their answers on StackOverflow. You can just browse through that.

Also, ask me questions. I've probably didn't mention something here or explained something poorly. And I'd really like to know about that.

Otherwise, that's it. Go ahead and make a stylesheet. Style your buildings, resources, log, tooltip, particles and your dog. Have fun!
Post edited by Mac15001900 on
Tagged:

Comments

  • TelluriumTellurium Posts: 5,403Friendly, Cool, Idle Game Master, Conversationalist, Turquoise Mod
    Promote given. I wish this existed when I was working on WD's stylesheet!

    (Also wow, I need to play your game now.)
  • LunaticGamblerLunaticGambler Posts: 32Member ✭✭
    edited October 2015
    Thank you, for the tutorial. But you could change title / organisation to make your tutorial more Comprehensive

    (I had some trouble to find what I need x)

    So I've managed to do some titles into resources but i'd like to have numbers left aligned, names centered, and production rate right aligned.

    Is there a way to do that ? I can't find resources elements (something like .resource .production or .ammount
    Post edited by LunaticGambler on
    image
  • Mac15001900Mac15001900 Posts: 104Member ✭✭✭

    Thank you, for the tutorial. But you could change title / organisation to make your tutorial more Comprehensive

    (I had some trouble to find what I need x)

    So I've managed to do some titles into resources but i'd like to have numbers left aligned, names centered, and production rate right aligned.

    Is there a way to do that ? I can't find resources elements (something like .resource .production or .ammount

    It is generally meant to be read in order, it goes from how to find an element to how to add styling.

    Use "margin:auto;" to horizontally center an element, "float:right/left;" to align it to a side.

    The problem with resource "names" is that they are not really a thing. To style an element you will need to examine the classes it belongs to and it's position in the tree to use the right selectors (as described in point 3).

    I hope this helps :)
  • jorgito24jorgito24 Posts: 73Member
    Mac15001900 could you help me and go to my discussion about css and how my buildings stack on eachother link forum.dashnet.org/discussion/12424/my-buildings-are-stacking-on-eachother-pls-help-me-i-have-tryed-finding-the-problem-for-hours#latest
  • LunaticGamblerLunaticGambler Posts: 32Member ✭✭
    edited October 2015

    It is generally meant to be read in order, it goes from how to find an element to how to add styling.

    Use "margin:auto;" to horizontally center an element, "float:right/left;" to align it to a side.

    The problem with resource "names" is that they are not really a thing. To style an element you will need to examine the classes it belongs to and it's position in the tree to use the right selectors (as described in point 3).

    I hope this helps :)

    Sooo, I don't really know how I could use that :

    <div id="resource-lifeessencia" class="thing resource nopic moreThan0"> <div> <span class="amount resourceAmount"> 450 </span> life essencias (0/s) </div> </div>


    Here is the part of my CSS, dealing with resources :

    .resource {text-align: right;} .resHeader {font-size: 0px; width: 100%; text-align: center;} .resHeader .name {font-size: 14px; font-weight: bold;} .resource .amount {text-align: left;}


    What I'd like to see is something like :
    |xxx_______Resource(0/s)|
    instead of
    |_______xxx Resource(0/s|
    image
  • Mac15001900Mac15001900 Posts: 104Member ✭✭✭

    It is generally meant to be read in order, it goes from how to find an element to how to add styling.

    Use "margin:auto;" to horizontally center an element, "float:right/left;" to align it to a side.

    The problem with resource "names" is that they are not really a thing. To style an element you will need to examine the classes it belongs to and it's position in the tree to use the right selectors (as described in point 3).

    I hope this helps :)

    Sooo, I don't really know how I could use that :

    <div id="resource-lifeessencia" class="thing resource nopic moreThan0"> <div> <span class="amount resourceAmount"> 450 </span> life essencias (0/s) </div> </div>


    Here is the part of my CSS, dealing with resources :

    .resource {text-align: right;} .resHeader {font-size: 0px; width: 100%; text-align: center;} .resHeader .name {font-size: 14px; font-weight: bold;} .resource .amount {text-align: left;}


    What I'd like to see is something like :
    |xxx_______Resource(0/s)|
    instead of
    |_______xxx Resource(0/s|
    For me that looks like it should work. Try adding .resource div{margin: auto;} and show me a screenshot of how that looks like.
    jorgito24 said:

    Mac15001900 could you help me and go to my discussion about css and how my buildings stack on eachother link forum.dashnet.org/discussion/12424/my-buildings-are-stacking-on-eachother-pls-help-me-i-have-tryed-finding-the-problem-for-hours#latest

    Will do so once I have more than a short moment, since it looks kinda complicated, hold on there buddy ;)
  • jorgito24jorgito24 Posts: 73Member
    Ok
  • Mac15001900Mac15001900 Posts: 104Member ✭✭✭


    Will do so once I have more than a short moment, since it looks kinda complicated, hold on there buddy ;)

    Or screw it, I only have my first lecture tomorrow at 4 pm anyway :D
    You had a mistake in selectors (details in your thread), try to be more careful in the future.
  • LunaticGamblerLunaticGambler Posts: 32Member ✭✭
    Basicly it looks like I can't put 2 alignment argues at a time.

    Text is else ragged left or ragged right
    image
  • Mac15001900Mac15001900 Posts: 104Member ✭✭✭

    Basicly it looks like I can't put 2 alignment argues at a time.

    Text is else ragged left or ragged right

    Can you show an example? "text-align: center;" should override other text-align properties as normal, it might be something about selectors.
Sign In or Register to comment.