Skip to content

Instantly share code, notes, and snippets.

@Shengaero

Shengaero/stylesheet-guide.md

Last active November 18, 2017 22:26
Show Gist options
  • Save Shengaero/948aba99b6b8e71d6a9620102a7d8b14 to your computer and use it in GitHub Desktop.
Save Shengaero/948aba99b6b8e71d6a9620102a7d8b14 to your computer and use it in GitHub Desktop.
Download ZIP
A cheatsheet for MHGHApp CSS stylesheet elements
Raw
stylesheet-guide.md

A Quick Forword On This Gist

This gist is for people who are willing to learn some basic skills regarding Cascading Style Sheets to create their own custom CSS for the MHGHApp.

In it we will have a quick overview of what CSS looks like, how to properly write it, and some examples of how you can apply it to the MHGHApp layout.

I know what some of you are thinking: "... But wait... Isn't this supposed to be a cheatsheet?"

Ahem...

If you are coming here because you think that you're going to just look down this page and and find your perfect "code" to make a skin for your MHGHApp with an anime girl you like on it, you've come to the wrong place.

If you are one of those people who came here looking for a 30 second "how 2 put best waifu on your MHGHApp"

  1. Copy paste the following into a text file called theme.txt: 
    .root {
  -fx-background-size: cover;
  -fx-background-position: center center;

  /* DO NOT REMOVE THE PARENTHESIS OR QUOTES, JUST DROP THE URL AND LEAVE */
  -fx-background-image: url("YOUR_WAIFU_IMAGE_URL_HERE"); 
}
  2. Rename the file to theme.css (ignore the warnings it won't corrupt it).
  3. Throw it into the folder with your MHGHApp.exe, MHGH.app, or MHGH.jar.
  4. In the settings tab of the app, fill in the "Custom CSS" field with theme.css and hit the check box at the bottom of the app.

For those of you who have been satisfied with this, you do not need to continue reading, my work here for you is done.
If you're not satisfied and do not want to learn, this guide cannot help you and neither can I (or anyone else who doesn't have the patience to hand you every answer).

The rest of this guide is intended for people who actually want to learn this stuff you'll be happy to know that this will teach you generally how to customize your CSS.

I don't want to spoonfeed every answer for multiple reasons:

For one, if the CSS changes for some reason in the future this guide will still be useful as it teaches you "how to do" the thing as opposed to "what to do to get x", which will be applicable to version after version of this app so long as it uses CSS stylesheets.

I also personally want to leave anyone who does read this with a basic skill to type some stupidly simple CSS because it's used by over 95% of all websites on the internet, and as you might expect generally knowing how to do it will not only help you more effectively customize your CSS for the app but it also means that you will have a skill that can be applied to 95% of the internet, and who doesn't love more skills amirite?

Finally, I think that jag might have the right idea here:

Now that I'm done ranting, I hope you'll take the time to read through the rest of this guide!

Enjoy! Kaidan (Shengaero#9090)

Quick Intro To Cascading Style Sheets

MHGHApp uses a popular style sheet template used in hundreds of thousands of websites known as Cascading Style Sheets (otherwise known as CSS).

Throughout this guide I will use reference terms to generally describe what I'm referring to.

/* Top Level = The top level of the CSS stylesheet */

/* Selector = A named body with braces */
selector {
  /* Body = Inside the selector */ 
  
  /* 
   * Property = A component of the body of a selector, sometimes preceeded by a "-" and always followed by a ":"
   * Value = A reference to give to the property it follows. Always ends with a ";"
   */
  property: value;
}

CSS follows a general guide of namespace-property-assignments which is the principle of creating a namespace (the selector in this case) and body, then giving properties an assigned value.

It also follows two unique rule called "overriding" and "inheriting":

  • Overriding: The ability to reassign previously assigned properties using a more powerful assignment.
  • Inheriting: The ability to implicitly assign properties of child selectors.

Most likely though, I won't be going over this kinda stuff, as it's not really related to the app itself, and you can take the time to learn it yourself on the hundreds of various websites that teach CSS for free and go much more in-depth than this guide ever will.

The general thing to keep in mind about CSS is that things are pretty self-explainatory.
A property might be called upper-left-border-radius and setting it's value will give it a radius in the upper left part of the border.
Best advice: If you are unsure about what it looks like, just try it out and see what you can do with it.

Getting To The Root Of Things

First of all, we're going to be discussing what are commonly known in CSS as classes.

A class is a specially named selector that starts with a ..
The most important class in any stylesheet (MHGHApp's included) is .root.

.root {
  -fx-background-size: cover;
  -fx-background-position: center center;
  -fx-background-image: url("https://i.pinimg.com/736x/72/5b/dd/725bdd629ce39e3edc28f6ad37e7de23--monster-hunter-art-hunters.jpg");
}

When you load this stylesheet into the app, you'll get something like this:

So, I guess we should break this stylesheet down and get down to the root of things:

.root {
  /* 
   * 1 - This assigns the background a size.
   * 2 - This assigns the background a position.
   * 
   * Note that size can be a number but in this case it is a "keyword assignment".
   * Some CSS properties in CSS can be assigned using a typical keyword or phrase even.
   * These are almost always VERY intuitive, and work exactly as you'd expect.
   *
   * For example, as expected, the two propery assignments here make the
   * background's size "cover" the entire body of the screen (1), and
   * center the background's position horizontally and vertically (2).
   */
  -fx-background-size: cover;             /* 1 */
  -fx-background-position: center center; /* 2 */
  
  /*
   * Sets the background to be an image at the specied url.
   *
   * Notice how a set of parenthesis and quotes surround the url, and how it's preceeded by the text url.
   * This is telling the stylesheet to load the image from the URL which is provided as a string literal.
   */
  -fx-background-image: url("https://i.pinimg.com/736x/72/5b/dd/725bdd629ce39e3edc28f6ad37e7de23--monster-hunter-art-hunters.jpg");
}

Some of you who are keen will notice all the properties in the example start with fx.
Why is that, you might be asking?

MHGHApp uses Java based code to create a window that you see when you load the app.
It specifically uses a Java framework for visual effects and GUI known as JavaFX.
As you might expect, mostly all the properties will begin with the prefix fx to signify they are part of the JavaFX CSS "interface".

Regarding a word I used in the example: "literal" there's a pretty simple wikipedia article regarding literals in coding you can find here. If you don't have a clue what they are, I recommend you read a little bit about it, as I'll be using the word quite frequently throughout this guide.

Getting Colorful

The last example is great and all, but it's pretty boring and the color of the rathalos clashes horribly with the color of the buttons and such, so let's get some better colors!

.root {
    -fx-background-image: url("https://i.pinimg.com/736x/72/5b/dd/725bdd629ce39e3edc28f6ad37e7de23--monster-hunter-art-hunters.jpg");
    -fx-background-size: cover;
    -fx-background-position: center center;
    
    /* New stuff! */
    -fx-background: #330000;
    -fx-base: #880000;
    -fx-accent: #880000;
    -fx-focus-color: #FF0000;
}

Some of you might be thinking: "Woah, woah, woah this a little too fast.."

Don't worry! These four things are all pretty much the same concept applied in different areas:

Each element labelled in this picture corresponds to one of the four new properties in the stylesheet above it.

Color is provided in one of two ways:

  1. Color Keyword (Ex: Green, Purple, Yellow, etc). These are limited but good if you don't really care what the color is precisely down to how much red, blue, and/or green it's composed of.
  2. Hexcode. Which is provided in the format #XXXXXX where Xs are a number 1-9 or letter A-F. If you don't have a clue how to make a hexcode for a color, this site can do it for you!

When modifing most elements in CSS, there will usually be some color properties (typically background/background-color at the least).
In fact this applies to more than just color, and you'll find that virtually every selector shares one or more common properties with another selector.

When we get to Working With Other Selector Classes this will become more apparent, so for now, just focus on .root.

If you're kinda following along you might be having some issues with getting the CSS to update.

First, make sure that you're clicking the checkbox every time you want to update the CSS on the app, as the app only loads CSS when you do that (IE: it's not reading it every time).

If that doesn't work, make sure whatever editor you're using is saving the changes you make to the file.
Some editors (most text editors in general to be more specific) don't just "save" your changes to a text file, and will require you to manually save them in order to update the file.

Finally, we're gonna add one more line which will become more important later:

.root {
    /* Previous code */
   
    -fx-font-family: "Tahoma";
}

This will change the font of text to Tahoma, and is provided as a string literal.

Working With Other Selector Classes

Well now this has all been fine and dandy, but it's still the same old stuff!
Nothing has really changed what if I want the buttons and text-boxes to be more circular?
What if I want a border around all the icons?

Alright you want something like that, let's start moving into different areas.

.root {
    /* Previous code */
}

.choice-box, .button, .toggle-button, .text-field {
    -fx-opacity: .9;
    -fx-border-color: #FFFFFF;
    -fx-border-radius: 15;
    -fx-background-radius: 20;
    -fx-font-weight: bold;
    -fx-border-width: 2;
}

"PFFFFFFFT WHAT THAT'S WAY TOO MUCH NEW STUFF!!!"
That's what you might be saying, but hang on for a second, is it really that new?

I stated earlier:

"The general thing to keep in mind about CSS is that things are pretty self-explainatory."

And that's because it is very easy to understand what each of those properties does!
What is confusing, is this line:

.choice-box, .button, .toggle-button, .text-field

What is that??
I mentioned many times earlier that there are multiple elements other than root.
What I also mentioned in the section about Color is that:

"you'll find that virtually every selector shares one or more common properties with another selector."

What that line is doing, is the equivalent of multitasking.
I'll pose the question, which looks more organized and quicker:

  1. When doing A and B and C and D, make sure to remember X

  2. When doing A, make sure to remember X When doing B, make sure to remember X When doing C, make sure to remember X When doing D, make sure to remember X

If you answered 1 congradulations, you have a soul valid understanding of how multi-class bodies work!

Multi-class bodies make it so you can apply common properties to multiple selector classes with only one block.
This gives us the ability to keep certain elements of the CSS look the same way, and when one changes, we can change the look of all the other elements being multi-selected!

Now that we know that, let's look at this diagram of what it actually looks like:

Now look back at the code for the multi-class selector:

.choice-box, .button, .toggle-button, .text-field {
    -fx-opacity: .9;
    -fx-border-color: #FFFFFF;
    -fx-border-radius: 15;
    -fx-background-radius: 20;
    -fx-font-weight: bold;
    -fx-border-width: 2;
}

If you make comparisons between each, you're going to find that every single one of them shares the elements, and that the elements match the ones dictated in the multi-class selector block above.

Overall, multi-selectors are a great way to simplify and unify the way your CSS looks, and prevent rewriting the same code for multiple classes.

Alright, now for the final stretch on this lesson (as I figure anything more than 300 lines is gonna get too boring for people).
Let's take a look at the Console tab:

Looks fine, but let's make it look more "techy"! Before we do, I want you to take note of the font that it's using.
It's Tahoma, the same as the one declared in the .root way before.

This is called inheriting and while I won't go into it too much it's the idea that all properties that you don't custom set in the stylesheet get their common values derived directly from the .root class.
You might have noticed this in the mutli-class selector example, how we didn't actually set the color's of those buttons or text-fields in the selector body, but they somehow managed to get set in the end.

But isn't that a shame? I want the font to be fantasy... :(
Here's where we talk about overriding properties:

.text-area {
    -fx-font-family: "fantasy";
    -fx-opacity: .7;
}

And voila:

We just overrode the value set by the root for this specific element!
Now if you're worried about everything else becoming fantasy worry not, because the property value being overriden here only applies to that selector body and nothing else!

This is good if you want a common color theme everywhere, except one or two places, and I'd recommend you look into it a bit more elsewhere if all of this is peaking your interests (CSS is pretty boring, so I don't blame you if by this point you're not really interested in learning more :P).

Conclusion

I hope you took the time to read to the end of this gist, as I took a lot of time writing it.
Moreover I really hope that you learned how to do the stuff because if you did, you should be able to masterfully.

The particular CSS I walked-through in this guide was made by jagrosh#4824 (A.K.A. the guy who made the app itself).
If you want to share your CSS or want more examples (including the one described here), the gist here details both a way to submit to it, as well as catalogues various submissions by other users.

Signing off for now, safe and happy hunting to you all!

Last Updated in version MHGHApp 0.04

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment