Single post in Styleclass and You: An Introduction

Tips and Tricks

Here are some helpful tips and tricks that I have picked up that I believe will help you! If you have some more, let me know and I might add them!

Comments

CSS can get rather confusing. You have thirty or more lines of code, don't get yourself lost! Try adding yourself some breadcrumbs: comments! To add a note to yourself or to even remove a block of code without deleting it, you can use one of two different ways. The first is the double-slash: Just add // and anything will be hidden until the code reaches a new line. If you have the editor enabled on PFQ, the comment formed will turn green. Easy, right? But what if you want to comment further than one line, or your code is already on one line? You should try this kind of comment, the slash-star. Surround both sides of the comment with /* these */. The comment will keep going until you add the other! This one is nicer because it won't automatically delete the end } as long as you are careful! It's all personal preference, if you need one line gone or a lot, try them both!

Organizing with New Lines

As you might have noticed, I have generally spaced out everything in the guide. This is optional! In some cases, having the code all jumbled together may be a good thing! Either way, you can agree thatis a little annoying and would be easier to read if each piece was on a new line. Plus, it would help if an error pops up!

Getting rid of the CSS BBCode

Did you know you don't even need the CSS BBCode anymore? Let me show you how! First, take your finished template, and take each instance of CSS and add each to its own class (the ones with the periods at the front). Check out this template Yamiro made: See that? When each pile of code is rearranged, it's easier to see where the text goes, and allows all of the code to be right next to each other. Simple, right?

Easy Referencing

Okay, you're all finished and then you go, "Oh shoot, Niall, I want to change the width of everything to be a lot wider! This is horrible!" to which I'd say, "Why not use references?" The 'At' Sign, @, is just like a hashtag on social media: all posts that have this mentioned can be looked up in an instance. You can use this feature to move specifications to an easier to reach place, like putting all of the settings at the top so that they can be changed separately from the coding. You can also tag multiple things to change them all at once! Since that made no sense at all, here's an example to show how you do it! @width and @height now control the text width (line 4) and the image width (line 6). This lets users change the first two lines to control the rest of the code, making it less of a chore in case you want to make any changes. Isn't that cool?

Being Mobile-Friendly

Have you ever tried pressing Alt+1 right before you post? You really should! This is what your template will look like when seen on a phone or another device that uses portrait mode. If you're not careful, it might be really messed up for others, even if you don't use a phone or tablet. And do you think this is fun? Not really... Here are some tips that I have collected with some friends' help! Your mileage may vary, feel free to message me or post here for some help!

1. Look over your coding for the following:
   padding | height | width | margin
   . If you have any of these, open a calculator app or website and divide all of these measurements by 6. Then, change the 'px' ending to a '%'. So 600px would become 100%, 300px is 50%, etc. Decimals should only be to the hundredths place (two numbers after the period). NEVER use 'width: 600px;' ever again!
2. If your template has a floating image, make sure the first step is repeated for each. Then, you need to add the following code somewhere:
   img { height: 100%; width: 100%; }
   If used correctly, this should force-resize the image, no matter what size the screen being used. At the default size (Alt+5), this should not distort the image and it should look right. Now switch to Alt+1 and see if the image stays in the correct position. If it does, you're golden! If neither sizes work, add more padding and margin CSS to corral the image onto the template.
3. Locate where the background image is defined (background colors should be fine) and add this code:
   background-size: 100% auto;
   This makes the width of the background change with the screen size change, while keeping the height normal and undistorted. Good luck!