(07-23-2014, 03:12 PM)A'ria Wrote:(07-23-2014, 03:05 PM)ExKage Wrote: I did a quick update on Kage's wiki but I can't figure out how to aesthetically keep the artwork nice and pretty ; ; while still not making the page ginormous.I'm having a similar problem in that the layout is in such a way that when I add photos, it knocks the layout around in weird places x.x...
Getting images to lay properly is really frustrating on wiki pages sometimes. There's a couple ways of doing it though, that give you a bit of control. The simplest is:
Code: (Select All)
[[File:Garlemald_Flag.jpg|thumb|left OR right|frame OR frameless|Text below image]]But this doesn't give you a lot of control. So another option is to use the class toccolours on a table. Rather than a lecture on code, I'll just post helpful examples. The following creates a table with a title, a picture, & text.
The stuff you'll want to change is in the "style" line. "Float" lets you choose alignment, "Margins" are the margins, "background" is the color (either of the box or the bar) in hex code (look up hex colors), font-size is self explanatory, & the 200px after the image is the image size. Other ones that work, for example for text, are "font=" and "color=". Just separate them by a semicolon as shown. This table is horrible looking, to show some of the styling:
Code: (Select All)
{| class="toccolours" style="width: 25em; float: right; margin-left:2em; margin-right:0em; margin-bottom:2em; background:#ffcccc" cellspacing="2"
! colspan="2" style="font-size:110%; background:#8DB6CD" | '''Image Box Title'''
|-
! colspan="2" align="center" | [[Image:Garlemald_Flag.jpg|200px]]
|-
! colspan="2" align="center" style="font-size:130%" | ''Text Regarding Image''.
|-
|}Here's another example that places just an image, without a background box or border. You can see in the first "style" line where I added border:none & background:transparent
Code: (Select All)
{| class="toccolours" style="width: 0em; border:none; float: right; margin-left:2em; margin-right:0em; margin-bottom:2em; background:transparent" cellspacing="2"
! colspan="2" align="center" | [[Image:Garlemald_Flag.jpg|200px]]
|}Finally, images like this can be moved, but the text will just wrap around it. But most people want the next section to fall completely below the image (instead of the image overlapping sections on the side). To do that, at the bottom of a section with an image, place the line:
Code: (Select All)
<br clear=all>Hope that helps a little.
