Post by Dresden on Jul 13, 2015 22:24:06 GMT
Here's some basic tips and tricks as well as bases to making tables.
Coding Basics for Tables
Adding a background image to a solid background
Example
Riad
Adding a background image to a solid background
Example
Riad
Words: WORDS Addressed WORDS Mentioned: WORDS
To add an image that blends into a solid color for the background, choose the color you want and make sure you get the RGB (Red, Green, Blue code) AND the hex code (it'll have a # symbol and either letters, numbers, or a combination). You'll need those codes.
1) Take that color that you chose and add it onto the photo you want for your table using an airbrush tool or a brush tool, and make sure that the edge of the photo has been blended into that color. In this case, the image is on the bottom, so it's important to make sure that the top edge of the image is the background color so it's seamless. Save the image with a resolution width of anything between 500 px to 600 px so it will fit on the thread itself. Generally there's a "save for web" option in photo editing software. Use it to save it, and save as a JPEG.
*If you want something like the text that's on the image, you add the text within the photo editing software.
2) Upload the photo to an image site similar to pinterest or photobucket (I use photobucket) and right click and copy the image location.
3) To add the image, find this spot in the coding:
Where it says background, place the image location in the ( ), and where it says "bottom no-repeat," this anchors the picture. You either place it on bottom or top generally.
4) In the same image above, after the anchor line where there's a # symbol and a variation of letters and numbers, this is the HEX code for your color. Place the code here to make the background of the table match the image.
5) (Continuing using the photo as a reference) After the HEX code is the coding for the width of the table. Generally the width is between 500 px and 600 px. This is all you have to alter for the background image.
Coding the Text for the Table
Reference Image
Reference Image
1) The lines that say padding-left and padding-right aren't normally changed, but if for some reason your text box isn't centered or looks odd to you, adjust these as you see fit. The padding-top and padding-bottom are the ones that are changed more. They helped move the text box either up or down, depend ing on where the text runs.
Example:
Lorem ipsum dolor sit amet, dolorem voluptatum eu est. Mel dolore dissentias ei. An sadipscing comprehensam necessitatibus qui, has vulputate disputando ad. Mea ea mandamus salutandi expetendis, nam in odio errem scripserit, nam percipit assueverit et.
Eu laudem adipiscing definiebas mea. Eam te modo theophrastus. Omittam disputando omittantur no mei, duis probatus usu te, mel id clita ullamcorper. At mel intellegam interpretaris, his minimum platonem ex, id est delectus mediocritatem. Eum te impedit nominavi mediocritatem, mei ex everti pertinacia, velit urbanitas mea ad. Sanctus sadipscing cum ut, animal adipisci facilisis est te.
Harum nusquam mel ne, laoreet efficiendi eos in, ludus zril libris vel cu. His id clita partem perfecto, sint novum gloriatur ei duo, sit vide petentium an. Ea pri animal luptatum. No per omnis erant cetero, at vel postea theophrastus. Eam altera iudicabit ad, eos te omnes possim disputando.
Aliquip ancillae percipit sea ea. Apeirian vivendum postulant id eos, pro praesent conceptam maiestatis in. Eu his partem scaevola salutatus, et sea suas nihil discere, suas altera his an. Virtute consulatu adolescens et mea.
Nostrud ceteros sea ut. No tation atomorum quo. Pri ut omnium tibique vivendum. Labitur quaeque eum et, unum nullam vis ei.
Et accumsan rationibus has, has ignota oporteat pericula te. Decore numquam cum ut. Ea cum nulla lucilius. Pro et nonumes cotidieque reprehendunt, ea eum dictas quodsi, persius ponderum ad eam. An idque inciderint pri, soluta aliquando vel et. Cu eius decore qualisque cum.
Postea dolores ne sit, audire oportere complectitur nam ea, est iusto eruditi cu. Omittam liberavisse ius id, vix vero conceptam inciderint an. Quo aliquid habemus ne, cum an imperdiet posidonium. Ferri labores in mel, ullum lobortis sit eu. Probo essent repudiandae ut vim, ad eam veritus inciderint, at mel tation possim facilis. Eos at utinam expetendis, dicta minimum in vis.
In ullum partiendo persecuti est, et mei ubique accusam. Nam verear definitionem no. An homero delicata has, duo rebum indoctum tractatos et, est saepe quaeque tacimates id. Summo forensibus an pri, eos wisi ocurreret intellegam ut. No ius lorem nostro, nam an discere omittantur, ius no wisi maluisset. Omnes eloquentiam no has, labores dissentiet no eos.
Facete eripuit eleifend sea at. Amet mollis aperiam eam et, dicit homero evertitur vim et, vim ut lorem ludus. Id cum voluptaria voluptatum, semper perpetua referrentur mea et, ea vix tempor vituperata. Id salutatus scripserit ius, in amet perfecto vim.
An dicat vituperatoribus eum, exerci omnesque antiopam ex vis, ex clita aperiri ius. Nec ut alii vulputate, saperet meliore inimicus in eam, vix viris laudem numquam an. Cu duo duis meliore accusamus, te vel erat ornatus. Et vim modo natum graeco. Eu utroque assueverit ius.
Words: WORDS Addressed WORDS Mentioned: WORDS
Notice where the text falls, both the bottom and the top. The table appears short and the text runs into the picture. The padding is set to padding-left, padding-right, and padding-bottom. Left and right are 5 px, which looks fine. However, the padding-bottom is set to 200 px. I'm going to adjust it to 333 px, and here's the difference it makes:
Lorem ipsum dolor sit amet, dolorem voluptatum eu est. Mel dolore dissentias ei. An sadipscing comprehensam necessitatibus qui, has vulputate disputando ad. Mea ea mandamus salutandi expetendis, nam in odio errem scripserit, nam percipit assueverit et.
Eu laudem adipiscing definiebas mea. Eam te modo theophrastus. Omittam disputando omittantur no mei, duis probatus usu te, mel id clita ullamcorper. At mel intellegam interpretaris, his minimum platonem ex, id est delectus mediocritatem. Eum te impedit nominavi mediocritatem, mei ex everti pertinacia, velit urbanitas mea ad. Sanctus sadipscing cum ut, animal adipisci facilisis est te.
Harum nusquam mel ne, laoreet efficiendi eos in, ludus zril libris vel cu. His id clita partem perfecto, sint novum gloriatur ei duo, sit vide petentium an. Ea pri animal luptatum. No per omnis erant cetero, at vel postea theophrastus. Eam altera iudicabit ad, eos te omnes possim disputando.
Aliquip ancillae percipit sea ea. Apeirian vivendum postulant id eos, pro praesent conceptam maiestatis in. Eu his partem scaevola salutatus, et sea suas nihil discere, suas altera his an. Virtute consulatu adolescens et mea.
Nostrud ceteros sea ut. No tation atomorum quo. Pri ut omnium tibique vivendum. Labitur quaeque eum et, unum nullam vis ei.
Et accumsan rationibus has, has ignota oporteat pericula te. Decore numquam cum ut. Ea cum nulla lucilius. Pro et nonumes cotidieque reprehendunt, ea eum dictas quodsi, persius ponderum ad eam. An idque inciderint pri, soluta aliquando vel et. Cu eius decore qualisque cum.
Postea dolores ne sit, audire oportere complectitur nam ea, est iusto eruditi cu. Omittam liberavisse ius id, vix vero conceptam inciderint an. Quo aliquid habemus ne, cum an imperdiet posidonium. Ferri labores in mel, ullum lobortis sit eu. Probo essent repudiandae ut vim, ad eam veritus inciderint, at mel tation possim facilis. Eos at utinam expetendis, dicta minimum in vis.
In ullum partiendo persecuti est, et mei ubique accusam. Nam verear definitionem no. An homero delicata has, duo rebum indoctum tractatos et, est saepe quaeque tacimates id. Summo forensibus an pri, eos wisi ocurreret intellegam ut. No ius lorem nostro, nam an discere omittantur, ius no wisi maluisset. Omnes eloquentiam no has, labores dissentiet no eos.
Facete eripuit eleifend sea at. Amet mollis aperiam eam et, dicit homero evertitur vim et, vim ut lorem ludus. Id cum voluptaria voluptatum, semper perpetua referrentur mea et, ea vix tempor vituperata. Id salutatus scripserit ius, in amet perfecto vim.
An dicat vituperatoribus eum, exerci omnesque antiopam ex vis, ex clita aperiri ius. Nec ut alii vulputate, saperet meliore inimicus in eam, vix viris laudem numquam an. Cu duo duis meliore accusamus, te vel erat ornatus. Et vim modo natum graeco. Eu utroque assueverit ius.
Words: WORDS Addressed WORDS Mentioned: WORDS
Now the text is clear of my picture and auto-flows nicely.
Reference coding:
2) The width coding after all of the paddings sets the width of the text box. I generally set this width a little smaller than my image width.
3) The following coding is how your text will look. Here, you set the font family (the example is set to times new roman), the color (use a HEX code after the # symbol), the font size, the align of the font (justified, left, right, or centered), and the line height. Adjust to however you want.
4) Now, the next batch of coding is what sets up the parameters for the text box itself. Height changes the height of the box. This is generally the only thing that is altered here.
5) The batch of coding after the name sets up the bottom text of the table where is reads addressed, mentioned and words. The HEX code sets the color, and the align sets where these sections will be. (This part of the table is optional.) If you decide to leave off this extra batch, make to to keep the [ / div ] that's on it's own line above the bottom. This will make sure that the top text box is unaffected.
And this is the basic set up for a table and the coding to add flare to your posts. To create a box that holds the code so you can easily copy and paste it, use the code [ code ] Insert table code here [ / code ] (without the spaces) to create a code box. It should look like this:
[div style="background:url(http://i1363.photobucket.com/albums/r712/AMelodyGoneWrong/Tablre%20copy_zpsigmdpllr.jpg) bottom no-repeat #4F0B73;width:575px;border:3px #D3A475;border-radius:20px;margin:0 auto;"][div style="padding-left:5px;padding-right:5px;padding-bottom:333px;width:550px;font-family:Times New Roman;color:#DEA680;font-size:9pt;text-align:justify;line-height:13px;"][div style="height:250px;overflow:auto;padding-left:10px;padding-right:10px;"]
Riad
[/div]
[div align="center"][font color="#FDDEBB"]Words:[/font] WORDS [font color="#FDDEBB"]Addressed[/font] WORDS [font color="#FDDEBB"]Mentioned:[/font] WORDS [/div]
[/div][/div]Often, I use the character's name to distinguish which table code is which. This basic code can be altered to created more diverse tables, and I will add those tutorials later.