Post by Bacon M on Apr 27, 2016 19:58:16 GMT
1. Pick how you want it laid out. Like, where the picture will go, what size you want everything to be.
2. Use this list to reference for different elements withing something called a div. You would use [ div style="elements here listed out and separated with;" ] without the space between the [ and div and the ;" and the ]. Then you put what you want affected by the div next to the ] and before a final ending tag of [ /div].
Text Elements
font-size: size here - size of text, usually in #px or #pt
font-family: family here - whatever type of font, like times new roman, courier new, etc. Note: This can be a GOOGLE FONT, but if you use one, at the top of the post use [googlefont="your font here"] and then add this font-family element to your div.
color: #hex color, there's a rainbow circle where you can pick a color you like, just copy the 6 digit cod and put it after the color:# - color of the text
General Elements
width: #pixel - how wide the div is
height: #pixel - how tall the div is
overflow:auto - if text within the div exceed the height, then a scroll with appear
background-color:#hex color - the background color of the div
background-image:url('URL HERE'); - If you want the div to have an image as a background instead
padding:#pixel - Will move everything around it away from the edges by this amount. Note: if you only want one side to have it all move away then.
margin:#pixel - okay I rarely use it and its hard to explain what it does. If you want to fool around with it, go ahead.
border: #color #pixels type - So your hex color, 6 digit code after a #, how big you want the border to be, and the type, such as solid, dotted, dashed, etc.
border-radius:#pixels - curves your border, border is not necessary though, if you don't have the previous element, the border will be transparent if using this one. More pixels = more curve.
Those are the basic ones I use, if you want to do something specifically, just ask, I probably forgot something. Just... if you want a hover thing, that's complicated. Well not really, but its complicated for someone who is just starting.
You WILL have a ton of these divs.
3. Select all. Click the center button in the editor. Go to where your text will be, select your dummy text of text here, and click the justify (or align left, I prefer justify). Check out your preview.
The hardest part is keeping track of where the div ends, the [ /div] will apply to whatever div is closest to it. Like, if you have [ div][ div]stuff here [ /div] the [ /div] applies to the bolded one. Once closed, the next [ /div] will ignore all closed ones and go to whatever the nearest non-closed div is.
For example, a basic skeleton of an image up top and text below it would look like this:
2. Use this list to reference for different elements withing something called a div. You would use [ div style="elements here listed out and separated with;" ] without the space between the [ and div and the ;" and the ]. Then you put what you want affected by the div next to the ] and before a final ending tag of [ /div].
Text Elements
font-size: size here - size of text, usually in #px or #pt
font-family: family here - whatever type of font, like times new roman, courier new, etc. Note: This can be a GOOGLE FONT, but if you use one, at the top of the post use [googlefont="your font here"] and then add this font-family element to your div.
color: #hex color, there's a rainbow circle where you can pick a color you like, just copy the 6 digit cod and put it after the color:# - color of the text
General Elements
width: #pixel - how wide the div is
height: #pixel - how tall the div is
overflow:auto - if text within the div exceed the height, then a scroll with appear
background-color:#hex color - the background color of the div
background-image:url('URL HERE'); - If you want the div to have an image as a background instead
padding:#pixel - Will move everything around it away from the edges by this amount. Note: if you only want one side to have it all move away then.
margin:#pixel - okay I rarely use it and its hard to explain what it does. If you want to fool around with it, go ahead.
border: #color #pixels type - So your hex color, 6 digit code after a #, how big you want the border to be, and the type, such as solid, dotted, dashed, etc.
border-radius:#pixels - curves your border, border is not necessary though, if you don't have the previous element, the border will be transparent if using this one. More pixels = more curve.
Those are the basic ones I use, if you want to do something specifically, just ask, I probably forgot something. Just... if you want a hover thing, that's complicated. Well not really, but its complicated for someone who is just starting.
You WILL have a ton of these divs.
3. Select all. Click the center button in the editor. Go to where your text will be, select your dummy text of text here, and click the justify (or align left, I prefer justify). Check out your preview.
The hardest part is keeping track of where the div ends, the [ /div] will apply to whatever div is closest to it. Like, if you have [ div][ div]stuff here [ /div] the [ /div] applies to the bolded one. Once closed, the next [ /div] will ignore all closed ones and go to whatever the nearest non-closed div is.
For example, a basic skeleton of an image up top and text below it would look like this:
Cool Quote Here
Text Here
[div align="center"]
[div style="width:500px;"][div style="width:500px;height:250px;"][img alt=" " style="max-width:100%;" src="http://placehold.it/500x250"][/div][div style="background-color:#000000;border:#ffffff 1px solid;padding:10px;"][div style="font-size:30px;font-family:Vivaldi;color:#ffffff;"]Cool Quote Here[/div][div style="height:250px;color:#ffffff;width:400px;background-color:#404040;"][div align="justify"]Text Here[/div][/div]
[/div][/div][/div]