HOME | DD

CypherVisor — Custom-box Background Tutorial by-nc-nd

Published: 2010-06-23 21:01:34 +0000 UTC; Views: 573621; Favourites: 12561; Downloads: 0
Redirect to original
Description »»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««



Updated: 23-Feb-2014




How to use ?Just copy the source code(s) below and paste it in your Custombox module in your profile or group page.




Spanish translation of this tutorial





SOURCE CODE:


Code to insert an image without stretching: (ORIGINAL CODE)



Body text here..



Code to stretch an image (It works as to repeat image ONLY FOR SOLID COLOR IMAGES though!) :

Insert the width and height in the tag of the code as shown below:




EXAMPLE:

width="1000" height="1600" src="URL"/>

Body text here..





How to insert a content-holder box inside a custom box?
Simply copy a content-holder boxes from my gallery folder here: LINK and paste it where it says "Body text here.." in the above code.




My background image link (the background that I've used for demo in this tutorial)
------------------------------------------------------------------------------------------------------------------
http://fc07.deviantart.net/fs70/f/2013/227/0/1/demo_by_cyphervisor-d6i84qo.jpg



Other tutorials
Custom background for DeviantID-box widget:


Custom background for New deviation-box widget:





The content holder box used in this tutorial





Want to customize your profile more?
Check all my free resources + tutorials: somrat.deviantart.com/gallery/…



Having any doubt? Please read this F.A.Q. + Tips n Tricks before writing a comment below.
I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some
points to me as an appreciation or support.
I take commissions to make custom journal CSS too. Check out my Journal CSS folder or Read-made Journal Skins . Send me a note to contact me.
Related content
Comments: 3487

CypherVisor In reply to ??? [2013-07-09 17:29:05 +0000 UTC]

1) Open your image
2) Right-click and choose "copy image location" or "copy image URL" etc. depending upon which browser you are using.

You can just do a google search on how to copy image URL if you want.

👍: 0 ⏩: 1

Sabliime In reply to CypherVisor [2013-07-09 21:23:48 +0000 UTC]

thx

👍: 0 ⏩: 1

CypherVisor In reply to Sabliime [2013-07-10 15:04:14 +0000 UTC]

yw

👍: 0 ⏩: 0

Mellow-Bun In reply to ??? [2013-07-07 22:52:56 +0000 UTC]

How do you copy the link on DA?

👍: 0 ⏩: 1

CypherVisor In reply to Mellow-Bun [2013-07-08 15:58:18 +0000 UTC]

If you are using imageshak.us then you can chuck that out. Instead you can just upload it to sta.sh and get the links from there.

👍: 0 ⏩: 1

Mellow-Bun In reply to CypherVisor [2013-07-08 18:41:44 +0000 UTC]

Ohhh thank you so much!!

👍: 0 ⏩: 1

CypherVisor In reply to Mellow-Bun [2013-07-08 18:48:08 +0000 UTC]

yw

👍: 0 ⏩: 0

Inkswell In reply to ??? [2013-07-06 16:19:17 +0000 UTC]

This is very helpful, but for some reason it keeps saying on my journal: Malformed or blank selector (token: ). What does that mean?

👍: 0 ⏩: 1

CypherVisor In reply to Inkswell [2013-07-07 06:49:24 +0000 UTC]



Where are you putting this code?

👍: 0 ⏩: 1

Inkswell In reply to CypherVisor [2013-07-07 11:16:23 +0000 UTC]

In the journal, just in the CSS skins, but no matter what code I put in, it comes out as error.
I might try this again with another file and different size to see if that helps with anything.
I'm pretty new to this stuff, so I tend to overthink things

👍: 0 ⏩: 1

CypherVisor In reply to Inkswell [2013-07-07 14:47:28 +0000 UTC]

You can't use this code in your journal.

👍: 0 ⏩: 1

Inkswell In reply to CypherVisor [2013-07-07 14:53:30 +0000 UTC]

Yeah that's what I found, but the error is also occurring with my custom boxes.
I'll try again with another file in the custom boxes and see if it works.

👍: 0 ⏩: 1

CypherVisor In reply to Inkswell [2013-07-07 15:09:03 +0000 UTC]

Oh okay. Yeah sure, please do and let me know what happened.

👍: 0 ⏩: 1

Inkswell In reply to CypherVisor [2013-07-12 18:12:12 +0000 UTC]

Alright, I found that there was just a small bug in firefox that kept adding additional codes. Don't know why but I fixed the problem after re-instaling it. Now everything is working ^^

👍: 0 ⏩: 1

CypherVisor In reply to Inkswell [2013-07-12 19:15:02 +0000 UTC]

Okay! Great!

👍: 0 ⏩: 0

Officially-Tarri In reply to ??? [2013-07-05 19:55:16 +0000 UTC]

Thanks that helped a lot!

👍: 0 ⏩: 1

CypherVisor In reply to Officially-Tarri [2013-07-06 07:01:49 +0000 UTC]

I am glad that I could be of your help!

👍: 0 ⏩: 1

Officially-Tarri In reply to CypherVisor [2013-07-06 14:16:36 +0000 UTC]

"tighthug:

👍: 0 ⏩: 0

WolfyCHEZA In reply to ??? [2013-07-04 15:04:08 +0000 UTC]

I try your tutorial but I don't managed to see images completely. Could you help me please?

👍: 0 ⏩: 1

CypherVisor In reply to WolfyCHEZA [2013-07-04 15:58:41 +0000 UTC]

Yes, tell what is the problem that you are facing?

👍: 0 ⏩: 1

WolfyCHEZA In reply to CypherVisor [2013-07-04 16:14:52 +0000 UTC]

Well i understood the trick for the profile and the FAQ in my page but for commissions info i have only one complete image. I don't have any background. I tried to add width and height but i don't see it. You can see the problem under the FAQ in my page

👍: 0 ⏩: 1

CypherVisor In reply to WolfyCHEZA [2013-07-05 10:33:00 +0000 UTC]

Seems like everything is working to me.

👍: 0 ⏩: 1

WolfyCHEZA In reply to CypherVisor [2013-07-05 11:41:40 +0000 UTC]

This morning I created a white background (800x1000) for commissions info. It's not an optimum solution but it's ok

👍: 0 ⏩: 1

CypherVisor In reply to WolfyCHEZA [2013-07-05 16:09:11 +0000 UTC]

okay. Let me know if you need any help.

👍: 0 ⏩: 1

WolfyCHEZA In reply to CypherVisor [2013-07-05 16:30:12 +0000 UTC]

thank you, you are very kind ^^

👍: 0 ⏩: 1

CypherVisor In reply to WolfyCHEZA [2013-07-05 17:09:03 +0000 UTC]

👍: 0 ⏩: 0

MilanoandAndona In reply to ??? [2013-07-03 18:54:34 +0000 UTC]

What does "Body Texst" mean, and what do I have to place there to make it work?

👍: 0 ⏩: 1

CypherVisor In reply to MilanoandAndona [2013-07-04 10:30:38 +0000 UTC]

Body text is the part where you write all your content that you usually write in your custom box widget.

👍: 0 ⏩: 0

goldenheartforever In reply to ??? [2013-07-02 18:59:30 +0000 UTC]

This was very helpful!
Yet for some reason the art I made for the background is covering the whole box.
What did I do wrong?

👍: 0 ⏩: 1

CypherVisor In reply to goldenheartforever [2013-07-03 18:07:27 +0000 UTC]

It is perfectly normal. You just need to copy the existing content and re-write your content in the "body text here.." part of the code.

👍: 0 ⏩: 1

goldenheartforever In reply to CypherVisor [2013-07-05 02:57:51 +0000 UTC]

Ok I will try that!
Thanks so much for being so nice on giving me
your advise! Your a ton of help and very sweet!

👍: 0 ⏩: 1

CypherVisor In reply to goldenheartforever [2013-07-05 10:31:14 +0000 UTC]

No problem hun!

And you are welcome anytime!

👍: 0 ⏩: 1

goldenheartforever In reply to CypherVisor [2013-07-06 02:39:52 +0000 UTC]

Ops, now it is just giving me a link with ".." at the end.
I am terrible at this. I am sorry.
Can you help me again?
Sorry if I am bothering you!

👍: 0 ⏩: 1

CypherVisor In reply to goldenheartforever [2013-07-07 14:45:56 +0000 UTC]

Are you inserting the code inside the href="URL" (inside the double quotes) properly?

👍: 0 ⏩: 1

goldenheartforever In reply to CypherVisor [2013-07-08 02:14:36 +0000 UTC]

Well I think I am. I have tried it at least 10 times.
Is it the picture I made? I can leave it up so I can
show you what it is doing. It is covering the whole
thing and says "insert text here".

Here is my image: [link]

So I copy the Direct link and then put it in the place where it says "URL" right?

👍: 0 ⏩: 1

CypherVisor In reply to goldenheartforever [2013-07-08 15:51:46 +0000 UTC]

Are you using this link:

http://imageshack.us/a/img39/6037/e6ez.jpg

👍: 0 ⏩: 1

goldenheartforever In reply to CypherVisor [2013-07-09 00:09:23 +0000 UTC]

There we go!
Now it works! Thank you so much!
You helped a ton! Thank you!!!

Sorry for being trouble some!

👍: 0 ⏩: 1

CypherVisor In reply to goldenheartforever [2013-07-09 17:21:40 +0000 UTC]

You're welcome!

And np

👍: 0 ⏩: 0

asylumcomix In reply to ??? [2013-07-02 18:29:25 +0000 UTC]

Do you know any websites I can get free background images, or can I just search on deviant art?

👍: 0 ⏩: 1

CypherVisor In reply to asylumcomix [2013-07-03 18:07:13 +0000 UTC]

You can just search here in DA. or in the group #CustomizeYourProfile

👍: 0 ⏩: 1

asylumcomix In reply to CypherVisor [2013-07-03 18:20:24 +0000 UTC]

oh great~!
But, If I am going to use this one [link] for example, what link do I have to use then?

👍: 0 ⏩: 1

CypherVisor In reply to asylumcomix [2013-07-03 18:21:50 +0000 UTC]

http://fc03.deviantart.net/fs71/f/2012/290/8/1/floral_custom_box_by_fantasy33-d5i334p.png

👍: 0 ⏩: 1

asylumcomix In reply to CypherVisor [2013-07-03 18:49:35 +0000 UTC]

okay ^^
So this I put inside the source code?

👍: 0 ⏩: 1

CypherVisor In reply to asylumcomix [2013-07-04 06:37:50 +0000 UTC]

Yep.

👍: 0 ⏩: 0

FrXstBite In reply to ??? [2013-06-30 22:39:32 +0000 UTC]

What do I put if I want to use this one? [link] . im just getting a link

👍: 0 ⏩: 1

CypherVisor In reply to FrXstBite [2013-07-01 15:29:50 +0000 UTC]

Here's the bg link

http://fc09.deviantart.net/fs70/f/2013/107/c/0/animated_custom_box_by_frostflightthefox-d622z1u.gif

👍: 0 ⏩: 1

FrXstBite In reply to CypherVisor [2013-07-01 18:46:06 +0000 UTC]

Oh okay I got it thanks

👍: 0 ⏩: 1

CypherVisor In reply to FrXstBite [2013-07-02 14:52:19 +0000 UTC]

Cool!

👍: 0 ⏩: 0

Cookie-Le-Creepe In reply to ??? [2013-06-28 20:16:33 +0000 UTC]

[link] I made my own, but i dont know if the size fits and if i will be able to see whats written.
Thanks

👍: 0 ⏩: 1

CypherVisor In reply to Cookie-Le-Creepe [2013-06-28 22:06:54 +0000 UTC]

The size is huge! You can make it half the width that it is right now. And if you are planning to write your content directly over the box without any content-holder boxes then it would be difficult to see text when it comes over the dark area of the bg. I would rather suggest you to use content-holder boxes to write your content in your boxes.

👍: 0 ⏩: 1


<= Prev | | Next =>