DeviantArt Customisation, Custom Box Backgrounds

Hello this is ClefairyKid, your new co-founder, I've just joined the group to lend some of my experience on the subject of profile customisation. What follows is some advice taken from the article I wrote here; DeviantArt Customisation Explained. Go there if you want a general overview of all customisation concepts (I'll be covering one subject at a time here to save confusion).

Custom Box Backgrounds

The thing I am most often bombarded with questions about. There are some important things to remember about these;

You MUST be a premium member on dA to use the code.

You must create the image at the size it will appear in the module, these images do not tile, therefore it is best to create a static image with as small a file size as possible so that it does not take too long to load.

You need to therefore account for the changing length of the module as you edit it's content, making a physical size of about 600px by 2000px a safe choice (although there will be other suggestions from tutorials etc out there).

You need to host the background image somewhere, you can do this for free on a site like Photobucket, or in your deviantart scraps (make sure to allow the download option if you upload it to dA). You will need the direct URL link to copy into the code used in the module.

PLEASE NOTE however, if you choose to host the image offsite, the site may automatically resize the image even when using the direct link, the best way to avoid this is to use scraps on dA.

You should only use these codes in custom module widgets (the ones with the little notepad icon in the top left corner), as it can be more complicated to achieve the effect in widgets that display automatic content (not impossible but more advanced than I will cover here).

All content of the module (writing, images, thumbs etc,) MUST be placed within the area that says "CONTENT HERE", otherwise it is covered over by the background. I recommend using custom box codes by SparkLum within this area because it neatly centres your content and provides a plain background for your text to sit over, thus making it readable whilst still having a fun background picture. I will cover those boxes in another blog entry.

The Code

<div class="popup2-moremenu"><div class="floaty-boat"><img src="DIRECT LINK TO IMAGE FILE HERE"></div></div><div class="gr-box">
CONTENT HERE
</div>

Resources

See also:

Custom-box background tutorial by CypherVisor


Deviation-box background tutorial by CypherVisor


deviantID-box background tutorial by CypherVisor

For backgrounds in the DeviantID module (effects of the code may be affected by upgrading to the new devID module but I cannot confirm it).

For another variation on background code.