(07-23-2014, 03:27 PM)ExKage Wrote: Yeah I'm in a pickle for that ; ;

(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...

(07-23-2014, 05:08 PM)Argent Wren Wrote:

(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:

[[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:

{| 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:

{| 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:

<br clear=all>

Hope that helps a little.

(07-23-2014, 06:56 PM)Erik Mynhier Wrote: I just started updating mine today. I am behind six months.

(07-31-2014, 02:25 PM)LiveVoltage Wrote: EDIT: Also, if anyone can help explain to me on how to paste a picture of my character on my wiki without it taking it 500% of the entire screen then that would be helpful. I tried it on my own and failed miserably.   Dx

(07-31-2014, 04:42 PM)LiveVoltage Wrote: Thats still pretty confusing and im having alot of trouble with it. Mind giving a cleaner and more thorough example?   :O