geekyBut how do I know what to change?
First, pay attention to what is commented. Commented text is marked normally with #. If the programmer who coded it used the proper protocol, it will also be green. For the most part the commented text is your instructions on how to use the tutorial. Commented text is what looks like this:
#######################################
# CUSTOM CSS MODIFICATION #
# kunzite1, xtomxfallsx #
# component-help/956788 #
# overrides Page::print_custom_head() #
# required by SHRINKING AND CENTERING #
#######################################Or this
# Set this to the width that you want both the navbar (if it exists) and the whole journal to be
# may be percentage (80%) or number of pixels (800px).As you can see in the example above, the instructions are clearly phrased. These instructions apply to the code directly below it, which reads:
var string k1Swidth = "80%"; # width of component layout (including entries and components)
var string k1Sheader_url = ""; # optional header image url
var string k1Sheader_alt = ""; # optional header image alt text
var bool k1Sroundnavbar = true; # set to false for square navbar cornersSo, if we look at the bit above, we know to look at the green sections for instructions of what to do. And the items in red we can change to our preferences. Just want a header and don't want to shrink and center your journal, change the percentage to 100%. If we want a header, we put the URL between the quotes on the next line, which is commented:
# optional header image urlIf we want a round navbar, leave it as
var bool k1Sroundnavbar = true;Sometimes, usually within print_custom_head(), you will see commented text that isn't marked with a #, and it will look like this:
background-image: url(); /* remove the gradient background */
height: 20px; /* adjust the height of the component */The parts that begin /* and end */ are also comments. As you can see, these do tell you what the options do, and they are also green as the comments above are.
So what do these colors mean?
In the most recent tutorials, colors are used to show what can and cannot be changed. If in doubt as to what a color signifies, always check the bottom of the Tutorials page. But for the sake of the this tutorial, I'll copy them over here:
default (doesn't use a class, will show community's font color) - code that doesn't need to be changed to make the enhancement work.
green - very important comments explaining the operation of code, and further customization that you can make. It explains code that is in the following three colors:
red - either a variable value to change to customize your look, or code that you can play with to affect layout of items. For example:
var string k1Swidth = "80%"; # width of component layout (including entries and components)
var string k1Sheader_url = ""; # optional header image url
var string k1Sheader_alt = ""; # optional header image alt text
var bool k1Sroundnavbar = true; # set to false for square navbar cornersHere you could change the 80% to whatever percentage you choose to adjust the width of your layout. You could also decide whether to have a round navbar or a square one, simply change the true to false. Note that usually if you see empty quotation marks, you can insert an item between quotes to add functionality, such as the options above for the header image.
blue - active lines that can be removed (or, preferably, commented) to remove functionality.
pink - inactive lines that can be decommented to enable functionality.
What does this decommenting and commenting and mean?
Well, as I said above, commented text or code is marked by #. All items so marked are ignored and inactive. So to decomment you would remove the # from before, and sometimes both before and after, the lines of code that you want to activate.
Likewise, if you want to inactivate a bit of code, you would place the # on either side of each line of code you want to ignore. This is preferable over actually removing the code as it makes it easier to activate it later should you change your mind rather than having to find back the tutorial you originally used and discover which bit of code you've removed.
And that's how you read a tutorial. I hope this has helped simplify things.