DIVs for Dummies
ALMOST LIKE USING WORD
This is a short tutorial on how to create your own Bill template/design or how to edit an existing one without having a degree in web design. If you were using a word template, you would still have to adjust it. Changing the order of DIVs or adjusting the margins or the size of the logo image is as simple as well.
Here you are: A simple manual on how to change the order of 'things' on your invoice, on how to adjust the space between those 'things' and on how to enlarge or shrink logo images…
ABOUT DIVS - OR HOW TO 'SORT THINGS'
Your invoice contains different blocks of information. For example, the header with your logo, company name, and your address. Then there is the part with the details about the client; like his name, client number, and address. All those blocks are nothing else then separated DIVs.
This is how a simple DIV looks like in code:
<div>I'm a stupid text in a DIV.</div>
And this is how it is displayed on your invoice:
I'm a stupid text in a DIV.
Guess what happens, if you add a second DIV:
<div>I'm a stupid text in a DIV.</div>
<div>I'm another stupid text in a DIV.</div>
Yes, you're right. This is what will be printed:
I'm a stupid text in a DIV.
I'm another stupid text in a DIV.
And now guess what happens, if you just change the sort order:
<div>I'm another stupid text in a DIV.</div>
<div>I'm a stupid text in a DIV.</div>
Congrats, you're right again:
I'm another stupid text in a DIV.
I'm a stupid text in a DIV.
That's almost nothing different from working with a Word template. But using some HTML and some CSS (what we will do in a second as well) has many advantages. Having a block in a block for example:
Let's put some blocks of information into a 'parent' block of information:
<div>I'm the PARENT DIV.
<div>I'm a CHILD DIV.</div>
<div>I'm another CHILD DIV.</div></div>
Yes, you're right. On the invoice this looks really boring:
I'm the PARENT DIV.
I'm a CHILD DIV.
I'm another CHILD DIV.
Stop. Before you start to fire up Microsoft Word and trash Bill we have to talk about how to 'style' those blocks of information; those DIVs. Before we can do that I have to tell you the most important information you need to know:
ALWAYS CLOSE YOUR
If you open a DIV like this:
<div>I'm the PARENT DIV.
you always have to close it like this:
</div>
Otherwise BAD THINGS will happen!
BTW: This is true for all the other TAGS as well:
This is a <strong>bold</strong> word!
When used correctly, it will look on your invoice like this:
This is a bold word!
The moment you forget to close it or forget the /:
This is a <strong>bold word!
Something like this will happen:
This is a bold word!
And since we did not close it, this can go on forever.
That's why we better close it right now with:
</strong>
Puhh. Everything back to normal.
Since we can 'style' those blocks with lots of things - like font size, space to the 'neighbor' blocks DIVs you can imagine that you can mess up your design pretty badly. So in case your invoice looks like
Now lets do some of the actual styling - shall we?
ABOUT CSS - OR HOW TO 'STYLE THINGS'
So far we have just 'separated' blocks of information. This helps a lot on an invoice but it looks kinda boring, I know. With the help of a CSS style sheet we can tell those blocks of information (those DIVs) how to look and where to place themselves on the invoice. In order for those individual blocks of information, those individual DIVs to be 'styled' differently - we simply give them names:
Let's name our block of information for the header of the invoice:
<div id="invoiceHeader">MOApp Software Manufactory</div>
Yes, on the invoice this still looks boring:
MOApp Software Manufactory
That's why we tell our style sheet (the .css file) to do this to the header:
#invoiceHeader { font: 32px Helvetica; color: #0096ff; }
And now it already looks much better:
MOApp Software Manufactory
Yes, for the first moment the 'code' looks like gibberish. But lets take a closer look:
font: 32px Helvetica;
Well, you told the block of information for your invoice header to use:
a font named Helvetica with the font size of 32 pixel.
It is as simple as that. Period. And no, changing the color is no brain surgery either. Just use this website: Color Scheme Designer.
Since you probably want to use only one font for your invoice (or at least for most parts) you may want to tell your 'complete' invoice what to use…
You should use 'body' for this in your style sheet (.css file):
body { font: 12px Helvetica; color: #000; }
Sometimes 'more space' between the lines looks nice:
body { font: 12px Helvetica; color: #000; line-height: 19px; }
Since we want some margins on printed invoices, we need to tell this to our style sheet (CSS)…
For the 'main' margins we use 'body' as well:
body { font: 12px Helvetica; color: #000; line-height: 19px; margin-top: 1in; margin-bottom: 1in; margin-right: 1.25in; margin-left: 1.25in; }
And yes, you can also use centimeter (cm) or millimeter (mm) or the good old pixels (px) - this is completely up to you.
But you should stick to one unit since you can use this margin and padding information also for 'arranging' your blocks of information, your DIVs, on your invoice. With margin and padding you can tell your DIV's, for example, how much space should be between them. I recommend to make use of padding when arranging your blocks since we want it to be simple and we are not creating a real websites…
Let's fix create another DIV:
<div id="leftAlignedWithoutSpace">Lorem ipsum trallala…</div>
And now let's tell this DIV how to dress up and behave:
#leftAlignedWithoutSpace { text-align: left; font-size: 11px; color: #d124bc; }
As already guessed (right?) this will look on the invoice like this
Lorem ipsum trallala…
Nothing new really, I know. But on an invoice we often want some space, some padding to other blocks of information and that can be done really easily…
Let's create a new DIV and this time give it some space:
<div id="leftAlignedWithSomeSpace">Lorem ipsum trallala…</div>
This you would have to tell your style sheet:
#leftAlignedWithSomeSpace { text-align: left; font-size: 11px; color: #d124bc; padding-left: 129px; }
Et voila:
Lorem ipsum trallala…
And now let's do this for the British:
<div id="rightAlignedWithSomeSpace">Lorem ipsum trallala…</div>
#rightAlignedWithSomeSpace { text-align: right; font-size: 11px; color: #d124bc; padding-right: 129px; }
Don't forget that the hand break is on the wrong side now as well:
Lorem ipsum trallala…
And, of course, this works for the top and the bottom exactly the same way:
padding-top: 29px; padding-bottom: 59px;
With this little information you can style your complete invoice just fine. You don't want to win a price, it doesn't have to be valid and no one will ever see your code. All you want is a nice looking invoice when printed out.
Remember the block in the block thing we did earlier? Now you understand that you can style the parent block with, for example, a padding of 20px from the top and 'substyle' a child block within this parent block with, for example, a padding of 129px from the left. If you need to adjust the complete block of information, you only have to do this for the parent DIV. If you change the top padding of the parent DIV to 40px, all containing DIVs will inherit this top padding and the one child DIV will still have the left padding of 129px. This way crazy things are possible :-)
I recommend that you now download one of the Designs, as well as the DesignBuilder, and just start to play around. When you mess up things, just re-import the design and start from scratch. That's the way we all do it, we all learn, and we all end up with something we did on our own.
When you're comfortable with re-arranging DIVs and styling them - you can go on to the last part of this short tutorial, which will probably be the most important task when creating your own design…
ABOUT IMAGES - OR HOW TO MAKE THE LOGO LOOK AWESOME
In order to be available on the Mac App Store (Bill free)and so that you can be sure that Bill will never do harm to your Mac it is a 'sandboxed' application. This means it is only allowed to 'play in his own sandbox. Therefore you should always make use of the built-in 'image view' for your logos or background images. Please use high resolution images with lots of DPI. If you want to use it as a background image it should be at least 4000 pixels wide/long and have at least 300 DPI.
Just drop your logo in Bill's Preferences onto the 'logo image view' and style it in your design's style sheet (CSS) as just learned above…
Add this to your template:
<div id="companyLogo">%LOGO%</div>
And now you can style it anyway you want:
#companyLogo { width: 128px; height: 64px; padding-right: 30px; padding-bottom: 30px; }
IMPORTANT: THIS WILL STYLE THE COMPLETE BLOCK OF INFORMATION.
YOU COULD ADD YOUR COMPANY'S NAME INTO THAT DIV AS WELL.
THE DIV IS JUST THE SURROUNDING CONTAINER.
We will now tell the 'companyLogo' container how to 'handle' the image (img):
#companyLogo img { max-width: 128px; max-height: 128px; }
And you will end up with something like this:
I know, there is a lot going on here. That's why we will split it up in little pieces. First, lets take a look at the 'surrounding' container, the
companyLogo
DIV…There is something new to be found:
width: 256px; height: 128px;
Yes, we can 'tell' a DIV its size.
We can also tell an image its size:
#companyLogo img { width: 128px; height: 128px; }
Yes, you're right. In my example I used something different:
#companyLogo img { max-width: 128px; max-height: 128px; }
Why I did this is actually quite simple:
If you give it a 'fixed' width it won't respect the ratio. And it will use up space we need for other things. So better tell it which space it can use while keeping its ratio. Now let's 'shrink' the image:
#companyLogo img { max-width: 32px; max-height: 32px; }
And, as expected, we end up with this:
And now let's do this for the American:
#companyLogo img { max-width: 512px; max-height: 512px; }
Yes, we supersized it:
Wait! What! That's not 512px! Yes, you're right. We forgot to tell the 'surrounding block' to grow as well. Let's quickly fix this:
#companyLogo { width: 512px; height: 512px; padding-right: 30px; padding-bottom: 30px; }
Now that's what I call a Quarter Pounder:
WTF? Are you kidding me? Well, that's why you have to use a 'large' image! Let's try that:
Finally, a badass logo!
People will want to pay their bills now immediately :-)
THERE IS MORE TO IT
For most learning all this will do the trick but there is one more thing I want you to know - it is called 'floating' and no, you don't have to search for your bathing suit!
When 'incorporating' images as learned above:
#companyLogo { width: 128px; height: 64px; padding-right: 30px; padding-bottom: 30px; }
#companyLogo img { max-width: 128px; max-height: 128px; }
and adding some text next to it, this will happen:
But often we want something like this:
To achieve this, all you have to do is this:
#companyLogo { width: 128px; height: 64px; padding-right: 30px; padding-bottom: 30px; float: left; }
Yes, you're right, this now applies to the whole 'surrounding' DIV. We can also do this:
#companyLogo img { max-width: 128px; max-height: 128px; float: left; }
And yes, this is, of course, possible as well:
#companyLogo img { max-width: 128px; max-height: 128px; float: right; }
When to 'style' a surrounding block, a PARENT DIV and when to only style a CHILD DIV, a CHILD ELEMENT (like an IMG) depends on what you want to do.
Let's take our invoice header for example. Do you want the company name to 'float' left to your logo and the company name is part of the #company container? Then you would probably only tell the image itself to float: left.
If you want another entire block of information to 'float' next to another block of information, you could do something like this:
<div id="leftFloating">INVOICE</div>
<div id="rightFloating">MOApp Software Manufactory</div>
And format it in the style sheet like this:
#leftFloating { float: left; background-color: #75d5ff; padding: 9px; }
#rightFloating { float: right; background-color: #ff89d8; padding: 9px; }
Which would look like this:
INVOICE
MOApp Software Manufactory
By wrapping it with an enclosing (surrounding) container:
<div id="surroundingHeader">
<div id="leftFloating">INVOICE</div>
<div id="rightFloating">MOApp Software Manufactory</div>
</div>
with a (for example) fixed size:
#surroundingHeader { background-color: #d4fb78; width: 512px; height: 128px; padding: 30px; }
you can do a lot to 'style' your invoice:
INVOICE
MOApp Software Manufactory
But you may want to use nicer colors, though…
LAST PIECE OF ADVICE
Even though CSS is very powerful and easy to use, sometimes the quick and dirty solution is better. Again, we don't want to win a prize - we just want a nice looking invoice…
To just add a quick line break use:
<br />
If you want to add a paragraph:
<p>I'm a paragraph!</p>
To make the font grow smaller:
<small>I'm written in a small font!</small>
And as already learned before:
<strong>I'm written in bold!</strong>
Do I have to remind you not to forget to always close the instruction?
And no, line breaks don't need a 'counterpart' :-)
With this little information you will be able to create your own handmade design for Bill in no time. OK, in some time :-) When in trouble: CSS Tutorial - W3Schools. I have to use this site all the time for myself. I'm not good at writing HTML/CSS code. Actually, I suck at it. So, no worries! You don't need to be good at it in order to create your own design!