HOME | DD
CypherVisor —
deviantID widget box customization tutorial
by-nc-nd
Published: 2012-06-13 19:29:45 +0000 UTC; Views: 189945; Favourites: 4832; Downloads: 0
Redirect to original
Description
______________________________________________________________________________________________________»»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
How to use ?
Just copy the source code(s) below and paste it in your deviantID-widget box in your profile page.
Video tutorial for this: www.youtube.com/watch?v=Jwj8mb...
Tutorial courtesy: *AllAmericanArtist
SOURCE CODE:
BLACK TEXT version
-----------------------------------------
:devYOUR_USERNAME:
YOUR NAME
Artist | Professional | Design & Interfaces
YOUR_COUNTRY_NAME
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
WHITE TEXT version
-----------------------------------------
My background image link (the background that I've used for demo in this tutorial)
-----------------------------------------
http://fc05.deviantart.net/fs70/f/2012/155/a/d/bg2_by_cyphervisor-d529kxh.png
Other tutorials
For custom-box widget:
For New deviation-box widget:
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: 1688
Is it possible to add white content boxes?
👍: 0 ⏩: 0
Is it possible to add white content boxes?
👍: 0 ⏩: 0
Hey there^^ And thanks a lot for this great tutorial 
But sadly I got some problems with it... I did everything exactly the way you wrote it but if I copy it all in the Bio-box, just my ID image shows up for the half, but I can't see the rest. Also the box doesn't get longer and stuck on a limit of size.. 
Thanks for helping me out
👍: 0 ⏩: 0
I have chrome, and I can't find the direct image link when I right click on my Deviant ID picture, just the image location. All it shows is "save image" "copy image" "copy image URL" "open image in new tab" "search Google for this image" "print..." "block element" and "inspect element". Will it still work if I don't have that? If not, how do I get that?
👍: 0 ⏩: 1
i'm a chrome user as well, and "copy image URL" is exactly the same as copying the direct image link, just reworded. :^)
👍: 0 ⏩: 0
I tried it, and it's still not showing the background image.
👍: 0 ⏩: 1
Nevermind. Got it!
👍: 0 ⏩: 0
great tut
Can I translate your tut in the another language? I would surely burn the source
👍: 0 ⏩: 0
It didn't work for me
I'm using safari on my macbook pro. created the background in photoshop elements with your demotions and followed the directions exactly. I got the text to work, but the background and my profile pic didn't work
👍: 0 ⏩: 1
I've found the problem! 
👍: 0 ⏩: 0
how do I keep the text within my Dev ID box to not get cut off the screen when people change the window size of the browser? I want the text to scrunch or wrap, but the CSS I'm using isn't doing anything.
Anyone know?
👍: 0 ⏩: 0
All of my content seems to be working except there is a large gap between the start of my first text box and everything seems to be aligned to the left.
Anyone know what coding to use to fix this?
👍: 0 ⏩: 0
Finally after many attempts, I DID IT! THANK YOU!
👍: 0 ⏩: 0
my deviation-box content has moved to the left-hand side after saving. i did what you said, but its still doesn't working u.u
Can you help me, please? c:
👍: 0 ⏩: 2
You need to add
every now and then to create manual breaks.
It worked for me, so I'd reccomend doing that.
👍: 0 ⏩: 0
use [- -;] (remove the dash, no space ) it work on my deviantid box.
👍: 0 ⏩: 1
where i put this code? thanks for answer ♥
👍: 0 ⏩: 1
i put it right after the first code, right next to the
you can check my ss here : check this image : orig15.deviantart.net/e686/f/2…
you cant put many <- -;> to adjust it to center..
👍: 0 ⏩: 1
i did, but it doesn't work U_U
thank you, any way, for try to help me
👍: 0 ⏩: 1
did you put the code correctly?? like this & n b s p ; (no space)
👍: 0 ⏩: 1
yes, but its still in the left, i don't know why U_U
👍: 0 ⏩: 1
That's weird. mine worked. can you note me the css. i'll try it on my d.a. and see if i can fix it, if that is okay.
👍: 0 ⏩: 0
The only thing that I am having trouble with is that when I put it on, it doesn't go in a nice paragraph form. It spreads out and makes it one line so I can only see some of my description.
👍: 0 ⏩: 0
This was super helpful thank you so much!
👍: 0 ⏩: 0
I'm still having trouble with customizing it.. It ends up going to the left if I don't have all the links put in, and it ends up going out of the screen once they are in. I'm using a custom box code along with it.. But, I'd like to keep the custom box within the deviantID..
Help?
👍: 0 ⏩: 0
AWESOME!
Thank you so much for the tutorial~!
It was a little buggy at first but after reading through some of the comments and FAQ it was easy to find the answer to the troubles I was having ^^
👍: 0 ⏩: 0
^.^ The video isn't working just to inform you
👍: 0 ⏩: 0
oh god I don't understand a thing Q.Q
👍: 0 ⏩: 0
I don't have direct image link on my web browser! Is this going to effect me anyhow?
👍: 0 ⏩: 0
I am not sure what I did wrong but my DevID profile image is off center...I am not sure what to do...Help!
👍: 0 ⏩: 0
Hello! You're tutorial really helped me a lot, thank you so much! ^^ I had a quick question though about the end results (I think I may have typed something wrong^^'). May I please note you the link to my page, and may you please check it out to see what I did wrong?
Ah, nevermind I fixed it~ but thank you again for the tutorial! It really did help
👍: 0 ⏩: 0
I do not have the "copy link location" option. Is there another thing I can use for it?
I'm on a mac and using safari, btw.
👍: 0 ⏩: 0
Umm, could you tell me how you manually add the breaks to your bio thingy..?
👍: 0 ⏩: 1
If I assume this is what you are talking about, I think you do to add more spaces and if you need even more room either do it again or add after it. Sorry if this didn't help.
👍: 0 ⏩: 0
may I ask, is it possible to add boxes in the deviantID?
👍: 0 ⏩: 1
Thankyou good sir. I now have applied these teachings to my profile.
👍: 0 ⏩: 0
This tutorial is brilliant! Thank you for your help! <3
One inquiry if I may, I have followed the steps exactly, but the box of my deviantART ID just seems to stop and doesn't show the interests section, or the rest of my text?
I used a simple gradient box to show you what I mean...
I trialed the question/answers that were supplied but it make any difference
Please reply if you know what to do <3
👍: 0 ⏩: 0
The background shrinks and grows when i change the size of the tab, so that when the tab is too big or small the picture wont cover all of it. If i get the background to cover all of it when it's small, it wont cover all of it when it's larger (same for vice versa). how do i fix this?
👍: 0 ⏩: 0
Thank you so much for this, I think I've finally figured out how to make this work; I wasn't able to move the info box down from the left, so I took a picture of it and put it on the background where I wanted it, and deleted the code for it. Now I just have to make a picture I actually like . . .
👍: 0 ⏩: 0
Isn't there a way to auto word-wrap when the text reaches the end of the line? I want the text to fit automaticually when the page is not shown in full size. (like the original ID text does). Also that the profile picture stays auto centered. I tried this here, and I find it hard to have the text fit the whole page when I have to make the breaks manually. Also the spacing in between the lines is somhow very far. What would the command be, to change the spacing between lines? Does anyone know?
👍: 0 ⏩: 0
This post is a lifesaver! Thank you for making this!
👍: 0 ⏩: 0
Man, thank you so much for making this! It's by far the most helpful id customization ive ever found.
👍: 0 ⏩: 0
So.. I have google chrome and all I know is that I can copy image URL & copy image
How do I get the directed-image-link since it doesnt shows?
also, if I have stamps and icon do I have to take them off for doing this?
👍: 0 ⏩: 1
If you're still having trouble with this, open the image in a new tab/window. Right click it>>inspect element. I used the thing that starts with
Sorry if that makes no sense. XD That's for the direct-image-link and it worked for me for my ID.
👍: 0 ⏩: 1
hey, just so you know, there is a way easier way to do this. Just right click the image -> Copy Image URL
the image URL is the direct link to the image, AKA the same URL of the new window you opened
inspect element is usually used to check out the HTML of the webpage, rather than to view an image URL.
the <img> 'style' is actually a tag. tags are used in HTML to define elements on the page, such as images and text boxes like the one im typing in right now.
(sorry if this makes no sense and/or makes it seem like i think you're inexperienced with these things, i have absolutely no idea who you are and what you know. i just felt like pointing this out 
👍: 0 ⏩: 1
For some reason that wasn't working for me, though. =\
But thank you.
👍: 0 ⏩: 0
<= Prev | | Next =>