Scrapbook
Some peoples scrapbooks are organised or interesting, this will be neither.
Notes on How the Heck CSS Code Works
Note on the notes: This is not intended as a guide for other people, more of a personal time-saving device so I don't have to look things up so much when I try and make a snazzy template. Obviously if someone wants to use it they're welcome to, but there are tutorials elsewhere from people who actually know what they're talking about.
#style=: The rest goes after that. Words come after the bracket closes. At the very end put ;[/style.
#style2: and style2 can be used to have a style inside a style! Inception! (Can there be a style3? I have no idea.) Everything works as normal, though closing bracket is obviously /style2
#Width: literally how big this is going to be. Width:500px; = 500 pixels.
#Padding: the space around the content (little gap between text and walls). I can do padding-top/right/left/bottom to make them different, or just padding:Xpx for one that works with all of them. I can also do padding:Xpx,Ypx,Zpx,Wpx, which is top, right, bottom, left, in that order. I can do other stuff also (two/three values instead of four if I'm lazy and want two sides the same) but frankly this is a complicated as I'm happy with right now.
#Margins: This moves around the whole style. So, from outside to inside we have margins > borders > padding. Set to margin:auto unless I'm feeling daring, as that centres everything. margin:Xpx. Generally a good idea to do margin-left/right/etc. if I'm using them to make sure they're equal.
#Borders: My favourite thing so far. There're four components to this - colour, width, radius (how circular is it?), and style. You can lump them all together (except for radius?) - border:3px solid #000000, and also do border-left:/border-right: etc. etc.
...*Style: dotted, dashed, solid, double, groove, ridge, inset, outset
#Backgrounds: background:color (NOT COLOUR!) for a colour, background-image:url(link) for an image, which repeats. It's possible to change how a background repeats with background-repeat:, which has the options of repeat-x (only X-axis), repeat-y (only y-axis), no-repeat (obvious) and two others (inherit and initial) I don't understand. Without using repeat it does so automatically
...*Seamless backgrounds are useful for this
...*background-attachment: scroll (default), fixed (does not move), local (does move, unclear of difference), then inherit and initial again
...*background-position: I have no idea what this is and it seems too advanced for me to bother finding out about right now.
#Gradients: Technically part of backgrounds, but heck. background-linear:gradient (default) or background-radial:gradient (centred). Background-repeating-linear/radial-gradient means the gradient repeats, which looks kinda naff in my opinion, but it's an option. After all that, we have brackets! (direction,colour1,colour2) for linear, but direction doesn't seem to work so just (colour1,colour2) until I figure that out. I can have more colours too, which is double snazzy to be honest. Just stick them in between.
...*Transparency: Use 'transparent' instead of a colour: (colour1,colour2,transparent) or whatever.
#Fonts: It doesn't appear to be possible to insert Webfonts into the Style, so that's not really relevant to me. However, I can use color:#blah to make a snazzy colour default.
#Shadows: box-shadow:Xpx Ypx Zpx #blah. This can be used in /style to create a shadow around the box. There's also [shadow] for text and [shadow2=1,2,3,#blah] for different sorts of shadows. Using the third (Z/3) px seems to work best.
[color=#E6E6FA]If it's not working!: Chances are I've either spelled color as colour, messed up the spelling, stuck something on the wrong side, or forgotten the closing brackets.
To add: that cool floating-picture thing everyone else seems to be able to do.
Some peoples scrapbooks are organised or interesting, this will be neither.
Notes on How the Heck CSS Code Works
Note on the notes: This is not intended as a guide for other people, more of a personal time-saving device so I don't have to look things up so much when I try and make a snazzy template. Obviously if someone wants to use it they're welcome to, but there are tutorials elsewhere from people who actually know what they're talking about.
#style=: The rest goes after that. Words come after the bracket closes. At the very end put ;[/style.
#style2: and style2 can be used to have a style inside a style! Inception! (Can there be a style3? I have no idea.) Everything works as normal, though closing bracket is obviously /style2
#Width: literally how big this is going to be. Width:500px; = 500 pixels.
#Padding: the space around the content (little gap between text and walls). I can do padding-top/right/left/bottom to make them different, or just padding:Xpx for one that works with all of them. I can also do padding:Xpx,Ypx,Zpx,Wpx, which is top, right, bottom, left, in that order. I can do other stuff also (two/three values instead of four if I'm lazy and want two sides the same) but frankly this is a complicated as I'm happy with right now.
#Margins: This moves around the whole style. So, from outside to inside we have margins > borders > padding. Set to margin:auto unless I'm feeling daring, as that centres everything. margin:Xpx. Generally a good idea to do margin-left/right/etc. if I'm using them to make sure they're equal.
#Borders: My favourite thing so far. There're four components to this - colour, width, radius (how circular is it?), and style. You can lump them all together (except for radius?) - border:3px solid #000000, and also do border-left:/border-right: etc. etc.
...*Style: dotted, dashed, solid, double, groove, ridge, inset, outset
#Backgrounds: background:color (NOT COLOUR!) for a colour, background-image:url(link) for an image, which repeats. It's possible to change how a background repeats with background-repeat:, which has the options of repeat-x (only X-axis), repeat-y (only y-axis), no-repeat (obvious) and two others (inherit and initial) I don't understand. Without using repeat it does so automatically
...*Seamless backgrounds are useful for this
...*background-attachment: scroll (default), fixed (does not move), local (does move, unclear of difference), then inherit and initial again
...*background-position: I have no idea what this is and it seems too advanced for me to bother finding out about right now.
#Gradients: Technically part of backgrounds, but heck. background-linear:gradient (default) or background-radial:gradient (centred). Background-repeating-linear/radial-gradient means the gradient repeats, which looks kinda naff in my opinion, but it's an option. After all that, we have brackets! (direction,colour1,colour2) for linear, but direction doesn't seem to work so just (colour1,colour2) until I figure that out. I can have more colours too, which is double snazzy to be honest. Just stick them in between.
...*Transparency: Use 'transparent' instead of a colour: (colour1,colour2,transparent) or whatever.
#Fonts: It doesn't appear to be possible to insert Webfonts into the Style, so that's not really relevant to me. However, I can use color:#blah to make a snazzy colour default.
#Shadows: box-shadow:Xpx Ypx Zpx #blah. This can be used in /style to create a shadow around the box. There's also [shadow] for text and [shadow2=1,2,3,#blah] for different sorts of shadows. Using the third (Z/3) px seems to work best.
[color=#E6E6FA]If it's not working!: Chances are I've either spelled color as colour, messed up the spelling, stuck something on the wrong side, or forgotten the closing brackets.
To add: that cool floating-picture thing everyone else seems to be able to do.
Floating styles!
'float:' then right or left is how you do this. It might go over the outside style if it's an inner one, though, which can be fixed with padding.
'float:' then right or left is how you do this. It might go over the outside style if it's an inner one, though, which can be fixed with padding.
