Shop Mobile More Submit  Join Login
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;

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

:bulletblue: 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.

:bulletblue: 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).

:bulletblue: 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.

:bulletblue: 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.

:bulletblue: 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).

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


Custom Backgrounds by SparkLum

See also:

Custom-box background tutorial by CypherVisor
Custom-box Background Tutorial by CypherVisor

Deviation-box background tutorial by CypherVisor
Deviation-box background tutorial by CypherVisor

deviantID-box background tutorial by CypherVisor
deviantID-box bckgrnd tutorial (OUTDATED) 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.
Add a Comment:
 
:iconelysianparis:
ElysianParis Featured By Owner Jun 23, 2014  Student Digital Artist
How do you change the size of a custom box?
Reply
:icona-p-p-l-e-j-u-i-c-e:
A-p-p-l-e-j-u-i-c-e Featured By Owner May 8, 2014  Hobbyist Traditional Artist
how do you tile a background?
Reply
:iconclefairykid:
ClefairyKid Featured By Owner May 23, 2014
Last I knew, you couldn't tile a module background, only a journal background, because of the kind of code used to place a background in the first place. This makes the size of the background image you use for a module quite large, and you need to try and make sure it's long enough to allow for any extra stretch that additional content in the module may make. You should be able to easily take the tile and manually tile it out in an image editing program and save it all as one large image though.
Reply
:icona-p-p-l-e-j-u-i-c-e:
A-p-p-l-e-j-u-i-c-e Featured By Owner May 23, 2014  Hobbyist Traditional Artist
oki thanks
Reply
:iconkatieepandaa:
KatieePandaa Featured By Owner Aug 20, 2013
could you tell me how to tile the background image??
Reply
:iconpanda037:
panda037 Featured By Owner Jun 9, 2013  Hobbyist General Artist
is it possible to associate the html codes with a javascript and css(stylesheet)? if yes, can you teach us how? thank you!

im asking this because i want to put an icon in my box(social media icons) and i want to apply hovering effects but i can't do it. the codes appear to be a text -_- replies are so much appreciated.
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Jun 27, 2013
I'm not sure that CSS effects are available in custom boxes, you are limited to < > tags for those, however, you can still use img tags to have the buttons without a hover effect. You can use those effects in a journal however, so you could design a journal skin to blend in with your profile and display the hover buttons that way.

Javascript is almost certainly not available in custom boxes, the closest thing you can do is use an embed tag and I only know of that being used for things like youtube player music and video at this point.
Reply
:iconpanda037:
panda037 Featured By Owner Jun 28, 2013  Hobbyist General Artist
TT^TT thanks for the info.
Reply
:iconlady-hannibal:
Lady-Hannibal Featured By Owner May 19, 2013  Professional Digital Artist
Wow, thank you for posting this! It's very helpful in creating customs backgrounds!
Reply
:iconclefairykid:
ClefairyKid Featured By Owner May 21, 2013
c:
Reply
:iconscutterland:
Scutterland Featured By Owner Feb 21, 2013  Student Digital Artist
Thank you for posting this, it definitely worked! :squee:
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Feb 24, 2013
You're welcome :hug: Glad to hear it worked c:
Reply
:iconmeeka-the-fire-wolf:
Meeka-The-Fire-Wolf Featured By Owner Dec 28, 2012  Student Traditional Artist
Is the image file like the thumbnail
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Jan 2, 2013
No, thumbnail codes are different from direct image codes. Thumbnails look like this:

:thumb000000: (with different numbers)

Direct image URLs look like this:

[link]

They always end with the image extension, so in this case, .png . You will need the direct image URL for inserting images.
Reply
:iconmlp-scribbles:
MLP-Scribbles Featured By Owner Dec 27, 2012  Hobbyist Digital Artist
is there one for webcams
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Jan 2, 2013
One what? A custom box? You can put the custom box codes wherever you like, although they don't always work so well in some modules rather than others, those which automatically generate their content are not very compatible with these codes, but it's been a while since I used the webcam module, so I don't know whether it's able to support the code or not. I would recommend adding the code in (if you can) and if it works, it works, and if it doesn't, then replace the webcam module with a custom box module with the same content, I don't think it will look any different aside from the little icon in the top left corner.
Reply
:iconak-47x:
AK-47x Featured By Owner Dec 25, 2012
so how do you use the ones on DA
Reply
:iconpikacat13:
PikaCat13 Featured By Owner Nov 19, 2012  Hobbyist General Artist
I'd want to do this one [link]
but i don't really understand the CONTENT HERE part, oh gosh i'm stupid
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Nov 27, 2012
"CONTENT HERE" refers to your content, so, what do you want to be in the area? Writing? Something about yourself? A photo? A thumbnail code to display art? Stamps? You can put whatever you want in the content area.
Reply
:iconpikacat13:
PikaCat13 Featured By Owner Nov 28, 2012  Hobbyist General Artist
ooooooooooo okay :la: thank you so much.
Reply
:iconaaronbonetti:
AaronBonetti Featured By Owner Nov 10, 2012  Professional Digital Artist
every time i put a background in it covers other images or videos im displaying in the box! how do i make the background not cover them? (but the text isnt covered so that parts fine)
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Nov 15, 2012
You need to ensure that the code for adding the background is the first code you add in the box, and then you need to use custom box codes such as those explained here: [link] to present content above the background image. All background image codes work by covering whatever content is within the module and then by having new content added on top, usually by using those custom boxes that automatically place themselves on top of that layer, although you can potentially fiddle around with other things to place them on top without them.
Reply
:iconaaronbonetti:
AaronBonetti Featured By Owner Nov 15, 2012  Professional Digital Artist
thanks for the help :)
Reply
:iconannaarmona:
AnnaArmona Featured By Owner Nov 1, 2012  Professional Traditional Artist
please tell me how instead of the background can put my picture. like this [link]
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Nov 15, 2012
I could be wrong but I think it's the same code, just with a different size picture, if playing with the image size doesn't work, try asking =CypherVisor as he may know something more specific.
Reply
:iconannaarmona:
AnnaArmona Featured By Owner Nov 16, 2012  Professional Traditional Artist
Thank you!
Reply
:iconcheyluvsu03:
cheyluvsu03 Featured By Owner Sep 26, 2012  Hobbyist General Artist
I don't understand :( can you please help me?
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Oct 1, 2012
You need to be specific, what part(s) do you not understand? I can't help if I don't know what you need help with ^^;
Reply
:iconcheyluvsu03:
cheyluvsu03 Featured By Owner Oct 2, 2012  Hobbyist General Artist
...all of it
Reply
:iconoppuy:
oppuy Featured By Owner Sep 26, 2012  Hobbyist Artist
i never understand
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Oct 1, 2012
What parts do you not understand? If you are specific, I will know what you need help with c:
Reply
:iconoppuy:
oppuy Featured By Owner Oct 2, 2012  Hobbyist Artist
nevermind i found out about my stuff thanks anyway
Reply
:iconkattwoof:
kattwoof Featured By Owner Aug 3, 2012  Student Digital Artist
FINALLY a tutorial I understood!!
Reply
:iconsailorsilverstar:
sailorsilverstar Featured By Owner Jul 9, 2012  Hobbyist General Artist
Thank you for this, very helpful but how do you do that AND change the font color?
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Jul 20, 2012
At this time, you cannot change the font colour unless it changes automatically to accommodate the colour of the background, say in buttons like the white button and red buttons. The colour of text is predetermined in the dA system and can only be changed in css within journals. You can however, play with <font-size=1></font> up to 7 to change the size, even within buttons c:
Reply
:iconsailorsilverstar:
sailorsilverstar Featured By Owner Jul 20, 2012  Hobbyist General Artist
bummer, thank you very much for helping me out ^_^ :hug:
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Jul 20, 2012
That's ok c: It's one of those tags everyone wishes existed :lmao:
Reply
:iconsailorsilverstar:
sailorsilverstar Featured By Owner Jul 20, 2012  Hobbyist General Artist
lol maybe one day
Reply
:iconroses-to-ashes:
Roses-to-Ashes Featured By Owner May 29, 2012  Hobbyist General Artist
"You must create the image at the size it will appear in the module, these images do not tile"
if that means you can't put one image under another that is false.. you can do it

check out [link] and in the artist comments where it says multiple images..
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Jun 16, 2012
Well, firstly, that tutorial was created after recent changes to the coding in the site, and also after I wrote this article :giggle:

Secondly, I've checked it out, and in a way it's still sort of true, you really should be creating your background all as one image, but if you find it not quite long enough, apparently you can now simply repeat the code for the background to continue it. This to me sounds like it would create more complications and problems than it would solve, and it certainly doesn't sound like something I'd use to make many many rows of small images... The trouble being that background code overrides anything and everything in the box previously, so without having tested this idea myself, I don't know how you'd apply it a second time without covering everything you've already put in the box... it may now be possible, but it's not really practical or recommended that you do a million of those codes to create the background effect. I mean just image the potential loading time with computer loading lots of images as opposed to one large one. Because it's still not technically "tiling" it's going to load each one as a new image, rather than being smart about loading one image and then repeating it : P
Reply
:iconroses-to-ashes:
Roses-to-Ashes Featured By Owner Jun 16, 2012  Hobbyist General Artist
oh well I didn't mean use the duplicate code for small images.. sorry if it sounded that way.. sometimes I have long custom boxes and two images just work better.. (if that made any sense :P )
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Jun 16, 2012
Yeah, that would work ok, if what that tutorial says is true, but again, I would have thought it would override all other content placed so far, leaving a long blank space...
Reply
:iconroses-to-ashes:
Roses-to-Ashes Featured By Owner Jun 16, 2012  Hobbyist General Artist
nope works all good :) there is a slight white line(gap) in between the two images buts its not very noticeable :)
Reply
:iconartressdesigns:
ArtressDesigns Featured By Owner May 29, 2012  Hobbyist Digital Artist
Well, I learned some things that i did not know! :giggle: First of all, I've been searching for the size to make. I've been doing mine as 1200 x 1500 :rofl: but little did i know its because photobucket was shrinking it!! lols

Thanks for this wonderful article hun. :heart: :hug:s
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 29, 2012
Use sta.sh in deviantART itself. Its easy, reliable and fast. :)
Reply
:iconfirstfear:
firstfear Featured By Owner Nov 20, 2011  Professional Digital Artist
Great article! :) Just an FYI though. Photobucket isn't the best choice for hosting images for a custom box BG because of how long/large they need to be. Photobucket tends to shrink images once they reach a certain size.

Here's an example of what I mean.

My original BG ->[link]
882px 2,000px


The BG on PB->[link]
352px 798px

I made no changes to the size. Photobucket did this on it's own x_x
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Nov 20, 2011
Yeah I noticed something like that might be happening but wasn't sure, since I tried to host it away from dA due to how many people who steal my background... but now I host it on the scraps of my stock account that no one knows about :giggle:

I can add that note if these things are editable but I dunno if they are ^^; It's my first time being apart of a group like this
Reply
:iconzara-leventhal:
zara-leventhal Featured By Owner Dec 11, 2011  Student General Artist
On the other hand, imgur.com is a really good choice for uploading custom box backgrounds. It saves the size and the url of the uploaded image is incredibly short. :3
Reply
:iconfirstfear:
firstfear Featured By Owner Nov 21, 2011  Professional Digital Artist
haha I'm not sure if they're editable either xD. My comment is first though so people will see it ^.^. Even hosting your image on another account it's still easily findable though for someone that is determined to take w/o permission x_x. Your BG is pretty awesome xD. Sometimes I wish DA had 'no right-click' implemented. If someone wants people to be able to download something it should only be doable through the 'download' button on the right , and only when the uploader allows it x_x
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Nov 21, 2011
Turns out they are editable :giggle: I added a dot point for it but people should see the comment too :aww:

Aw thanks, I still want to find another option, something a little more interesting than a pattern, even if it were something more complicated just for one module : )
Reply
Add a Comment:
 
×

Featured in Collections

Journals, News by little-billie




Details

Submitted on
November 19, 2011
Link
Thumb

Stats

Views
16,204 (4 today)
Favourites
190 (who?)
Comments
50
×