sandman
Hi, I'm new to the site (and a REAL newb when it comes to Textile) but I've already figured out a couple of things. However, I'm trying to do something and I don't know how.
First take a look at this page:
"Obsidian Portal Wiki - Deidades":http://www.obsidianportal.com/campaign/14925/wikis/deidades
As you can see it looks kind of funny. It doesn't look bad, but what I want to do is this (I've made a picture of what I would like to do):
"Custom Picture":http://www.uploadgeek.com/share-360D_4B7AA533.html
So, here's the problem:
# How do I align all the pictures to the left? (btw: all the icons are 50 x 50 , so they are squares)
# How do I align the text the way I did in the picture (centered and to the right, with a couple of blank spaces between the image and the name)
# As you can see in the picture, I've put an arrow to a dot. If you look at the "wiki page as it is now":http://www.obsidianportal.com/campaign/14925/wikis/deidades, I had to place that dot so that the second heading would be placed where it belongs. I've intentionally left the 3rd heading without the previous dot so you can see what happens if I don't place it. Could anybody tell me how to place the heading without having to use that dot?
Thanks.
Comments
Also, it might be helpful if you posted the code you are currently using to this thread... just make sure you format your comment as "text" instead of "textile" when you do.
http://www.uploadgeek.com/share-DE02_4B7ABD88.html
And here's the code I'm using:
h3. *Dioses Buenos y Legal Buenos*
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! [[Avandra]] - Bueno
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6826/Icon-Bahamut.jpg(Icon-Bahamut)! [[Bahamut]] - Legal Bueno
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6827/Icon-Moradin.jpg(Icon-Moradin)! [[Moradin]] - Legal Bueno
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6828/Icon-Pelor.jpg(Icon-Pelor)! [[Pelor]] - Bueno
.
h3. *Dioses No Alineados*
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! [[Corellon]]
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! [[Erathis]]
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! [[Ioun]]
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! [[Kord]]
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! [[Melora]]
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! [[The Raven Queen]]
!(media-item-align-left)http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! [[Sehanine]]
h3. *Dioses Malignos y Ca
Using Textile, the best way to achieve those results is most likely to use a table. Example here:
h3. *Dioses Buenos y Legal Buenos*
table{width:300px}.
|=. !http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! |-. Avandra - Bueno |
|=. !http://cdn.obsidianportal.com/assets/6826/Icon-Bahamut.jpg(Icon-Bahamut)! |-. [[Bahamut]]- Legal Bueno |
|=. !http://cdn.obsidianportal.com/assets/6827/Icon-Moradin.jpg(Icon-Moradin)! |-. [[Moradin]]- Legal Bueno |
|=. !http://cdn.obsidianportal.com/assets/6828/Icon-Pelor.jpg(Icon-Pelor)! | [[Pelor]]- Bueno |
Here's the breakdown:
Make sure you have a line space between the h3 tag and your table... otherwise the entire table will get caught up in the header tag.
table{width:300px}.
This provides you a way to format the table using style CSS tag. In this case, I'm using "Width" and setting it to be 300px. This constraints the entire table to only 300 pixels wide, rather than 730 pixels (which is the maximum for the OP page). Change the 300 value if you find the table to have too much space or if lines are wrapping that you don't want.
Some more table-related options here: http://www.w3schools.com/css/css_table.asp
|=. !http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! |-. Avandra - Bueno |
Pipes ("|") make cells. Think of them like the seperator lines between cells. Each line is a new row. Make sure you have equal number of cells in each row. The example here has two cells per row.
Note that the (media-item-align-left) has been removed from this image link. The reason for that is you don't need it when you're formatting it in the cell in this table (see centering below).
=.
after the pipe aligns the cell contents as centered horizontally. Note the space between the . and the ! for the image tag.
-.
aligns the cell contents vertically. We don't use this on the image because it is already the largest thing in the way, so everything is being resized to fit the height of the image. If you had a larger image next to it and you wanted it to be in the middle, then you'd use this for the image as well.
A good reference for Textile can be found here: http://thresholdstate.com/articles/4312/the-textile-reference-manual#toc_0
Edit: Updated original to show your actual code.
| cell1 | cell2 |
| cell3 | cell4 |
In the example below, I also added a cell width attribute "{width:75px}." to the first cell in the images column of each table, otherwise the table will space the cells evenly and will spread out to fill the whole width of the page. If you try this and there is too much or too little space in the first column, simply adjust the number in the width attribute.
I also left the header rows outside of tables, because textile does not like to format header text inside a table cell, so really your page will be a series of several simple tables for each list of deities. I have done the code for the first table and the first couple rows of the second below.
Note: In textile tables, spaces are very important! make sure there are no extra line-breaks between table rows on a given table, and make sure there are no extra spaces after the last "I" in a table row.
Let me know if this works!
h3. *Dioses Buenos y Legal Buenos*
|{width:75px}. !(media-item-align-left)http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! | [[Avandra]] - Bueno |
| !(media-item-align-left)http://cdn.obsidianportal.com/assets/6826/Icon-Bahamut.jpg(Icon-Bahamut)! | [[Bahamut]] - Legal Bueno |
| !(media-item-align-left)http://cdn.obsidianportal.com/assets/6827/Icon-Moradin.jpg(Icon-Moradin)! | [[Moradin]] - Legal Bueno |
| !(media-item-align-left)http://cdn.obsidianportal.com/assets/6828/Icon-Pelor.jpg(Icon-Pelor)! | [[Pelor]] - Bueno |
h3. *Dioses No Alineados*
|{width:75px}. !(media-item-align-left)http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! | [[Corellon]] |
| !(media-item-align-left)http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! | [[Erathis]] |
You bring up a nice differences though, which I think are a tad more elegant than my example:
First, using the width tag in the first cell and letting the rest fill the space rather than modifying the entire table.
Second, setting the first cell does it for the row, so you only need it once.
Third, by utilizing the media-item tag, you reduce hand-coding and make the entire media library insertion unchanged.
Probably reflects that I don't use the library - I prefer my own website host for images. Old habits are hard to change, I suppose.
Dethstryke: you where right, I forgot to set it to "Public"
Here's how it turned out: "Deidades":http://www.obsidianportal.com/campaign/14925/wikis/deidades
I left the first category with both methods (first one from Dethstryke, second from Grunn). I am wondering why is the second table placed more "to the left", or is it just the image? (because the 2nd column seems to be aligned with the 2nd column from the first table)
Thanks again guys, this is exactly what I wanted to do! And thanks for explaining what each part of the textile code means, that helped A LOT.
To get Gnunn's code to look exactly alike, change all four "media-item-align-left" to "media-item-alighn-center". :) That is what choosing "center" in the Library prompt will do for you when inserting the image.
Looks good. I'm not fluent in anything but English, so I can only tell you it looks pretty. ;)
Haha, thanks again Dethstryke.
Here's how I did the code for the 2nd table:
h3. *Dioses No Alineados*
table{width:300px}.
|=. !http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! |-. [[Corellon]] |
|=. !http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! |-. [[Erathis]] |
|=. !http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! |-. [[Ioun]] |
|=. !http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! | [[Kord]] |
|=. !http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! | [[Melora]] |
|=. !http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! | [[The Raven Queen]] |
|=. !http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! | [[Sehanine]] |
Here's an alternative. I haven't been able to get the width tag and the =. tag to work nice at the first cell together, so I get around it by adding text-align:center on the first image. *shrug*.
I did remove the extra formatting to try to streamline it. It seems the tables default to vertical center, so I took that from all the right side cells. Here's the code:
h3. *Dioses No Alineados*
table{width:300px}.
|{width:60px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! | [[Corellon]] |
|=. !http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! | [[Erathis]] |
|=. !http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! | [[Ioun]] |
|=. !http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! | [[Kord]] |
|=. !http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! | [[Melora]] |
|=. !http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! | [[The Raven Queen]] |
|=. !http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! | [[Sehanine]] |
should work as well if you want to set the cell alignment the same way for each cell, as opposed to setting it with css attributes using Dethstryke's work-around.
I have found that Textile table formatting can be really picky when it comes to the order in which your code is presented. This is especially the case when combining css attributes, text alignment and/or row or column spans into a single bit of formatting. Sometimes, if they are not presented in the correct order, it can totally break a table's formatting. when using html/css, on the other hand, order of operations seems to be a little more flexible.
Trying to learn Textile more though. It feels like once I get past the learning curve, it could be a lot nice sandbox to play in, but it's hard when you can lay down a table in notepad without reference. :/
table{width:300px}.
|{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! |-. [[Corellon]] |
|{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! |-. [[Erathis]] |
|{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! |-. [[Ioun]] |
|{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! | [[Kord]] |
|{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! | [[Melora]] |
|{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! | [[The Raven Queen]] |
|{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! | [[Sehanine]] |
Grunn's method worked too (with {width:75px}. ), but since it wasn't centered I would have to give an even bigger width than 75px so it the end it was a little easier with Dethstryke's method.
Sorry for being such a pain in the butt guys.
Btw: where did you get this codes? Or do you just know how to program and that's where my problem is? and also... what is CSS and what is it used for??? xD (told ya I was new) :P
I honestly had very little knowledge of html and no knowledge of textile when I really got rolling on my OP site back in November. It's really all about experimentation and trial and error.
"This":http://redcloth.org/hobix.com/textile/ is the most comprehensive resource I've found for Textile formatting and I use it extensively.
I actually tend to use a sort of mixed html/css/Textile when I code my wiki. I like that Textile code often visually corresponds with the resulting layout, but it is definitely fickle and so sometimes using html & css are easier/simpler.
"Check it out here":http://thresholdstate.com/articles/4312/the-textile-reference-manual#toc_0
I second ChainsawXIV's link. He is a wealth of information in general!
I did check out the hobix textile link, but as you can see what I needed help with was learning that what I wanted to do had to be done with a table, which I hadn't even considered in the first place.
I didn't know the other textile reference manual Dethstryke mencioned, so I'll give it a try.
As for the unofficial FAQ, I see that there's A LOT of info there, so I'll just have to be patient I guess, haha.
Thanks for explaining CSS 101 and for all the help guys xD