Shop Mobile More Submit  Join Login
deviantID widget box customization tutorial by CypherVisor deviantID widget box customization tutorial by CypherVisor
______________________________________________________________________________________________________
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
-----------------------------------------
<div class="popup2-moremenu"><br/><div class="floaty-boat"><img align="center" src="Background-image-url"/></div></div><div class="popup2-moremenu"><br/><div class="floaty-boat"><br><br><br><a href="Deviation-URL"><img align="center" src="Deviation-image-link"/></a><div align="left" class="pppp"><font size="5">
<b>:devYOUR_USERNAME:</b></font>

<h3>YOUR NAME
<font size="3">Artist | Professional | Design & Interfaces</font>
<font size="2">YOUR_COUNTRY_NAME

Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s, when an unknown printer took a galley of type<br> and scrambled it to make a type specimen book. It has survived not only five<br> centuries, but also the leap into electronic typesetting, remaining essentially<br> unchanged. It was popularised in the 1960s with the release of Letraset sheets<br> containing Lorem Ipsum passages, and more recently with desktop publishing<br> software like Aldus PageMaker including versions of Lorem Ipsum.
</font></h3></div>
</div></div>

<br><br><br><br><br><br><br><br><br><br><br>



WHITE TEXT version
-----------------------------------------
<div class="popup2-moremenu"><br/><div class="floaty-boat"><img align="center" src="Background-image-url"/></div></div><div class="popup2-moremenu"><br/><div class="floaty-boat"><br><br><br><a href="Deviation-URL"><img align="center" src="Deviation-image-link"/></a><div align="left" class="pppp"><span class="smbutton-purple popup2-clear"><font size="5">
<b>:devYOUR_USERNAME:</b></font>

<font size="3">YOUR NAME</font>
<font size="3">Artist | Professional | Design & Interfaces</font>
<font size="2">YOUR_COUNTRY_NAME

Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s, when an unknown printer took a galley of type<br> and scrambled it to make a type specimen book. It has survived not only five<br> centuries, but also the leap into electronic typesetting, remaining essentially<br> unchanged. It was popularised in the 1960s with the release of Letraset sheets<br> containing Lorem Ipsum passages, and more recently with desktop publishing<br> software like Aldus PageMaker including versions of Lorem Ipsum.
</font></span></div>
</div></div>

<br><br><br><br><br><br><br><br><br><br><br>




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 :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.
______________________________________________________________________________________________________
Add a Comment:
 

Daily Deviation

Given 2012-06-19
Ever wanted to customize your ID even more? Well deviantID widget box customization tutorial by =CypherVisor can help you with that. This is an easy-to-follow tutorial that will leave your ID looking fabulous.

Resources & Stock Images / Tutorials / deviantART Tutorials / Miscellaneous Tutorials ( Suggested by Mod-a-holic and Featured by bradleysays )
:iconraventhetitan:
i found this to be very helpful!! i just wanted to thank you for this, i had been wondering for some time how exactly i was supposed to do the backgrounds, and you have awnsered that question very clearly! i give you 5 stars on everything, because this was probably the most help i've gotten on anything about the backgrounds and such. its nice to know that there are people that like to help :) its really great qualitiy too, not blurry like some of the other things i looked at :) you my good sir have done an excellent job! XD
What do you think?
The Artist thought this was FAIR
233 out of 241 deviants thought this was fair.

:iconstephiphotography:
This is something I had been trying (and failing) to achieve on my page for a long time! So when I saw this I was very pleased. The layout is effective with simple steps to follow making it possible for anyone who wants to achieve this customization of their Id page. The only difficulty is that the IMG URL and Direct link are so confusing to get the correct way round (maybe just me) But I think the use of print screens is what makes this even easier to understand. Overall thanks for an amazing job! I think that it couldn't have been done any better personally.
What do you think?
The Artist thought this was FAIR
219 out of 230 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconxxfabulouswolf:
xXFabulousWolf Featured By Owner 4 days ago  Hobbyist Digital Artist
Finally after many attempts, I DID IT! THANK YOU!
Reply
:iconbeapanda:
BEAPANDA Featured By Owner 5 days ago  Hobbyist Digital Artist
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:
Reply
:iconsilverlynx69:
silverlynx69 Featured By Owner Edited 4 days ago   General Artist
use [-&nbsp-;] (remove the dash, no space ) it work on my deviantid box.
Reply
:iconbeapanda:
BEAPANDA Featured By Owner 4 days ago  Hobbyist Digital Artist
where i put this code? thanks for answer ♥
Reply
:iconsilverlynx69:
silverlynx69 Featured By Owner 4 days ago   General Artist
i put it right after the first code, right next to the <img src">

you can check my ss here : check this image : orig15.deviantart.net/e686/f/2…

you cant put many <-&nbsp-;> to adjust it to center..

Reply
:iconbeapanda:
BEAPANDA Featured By Owner 4 days ago  Hobbyist Digital Artist
i did, but it doesn't work U_U
thank you, any way, for try to help me :D
Reply
:iconsilverlynx69:
silverlynx69 Featured By Owner 4 days ago   General Artist
did you put the code correctly?? like this  & n b s p ;  (no space) 
Reply
:iconbeapanda:
BEAPANDA Featured By Owner 4 days ago  Hobbyist Digital Artist
yes, but its still in the left, i don't know why U_U
Reply
:iconsilverlynx69:
silverlynx69 Featured By Owner 4 days ago   General Artist
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.
Reply
:iconfuocostella:
FuocoStella Featured By Owner 6 days ago  New Deviant Hobbyist General Artist
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.
Reply
:iconthemasterwatcher:
TheMasterWatcher Featured By Owner Jun 19, 2015  New Deviant
Can I try it in Android?
Reply
:iconteeroo:
teeroo Featured By Owner Jun 12, 2015  Student Digital Artist
This was super helpful thank you so much!
Reply
:iconanathemanemic:
AnathemAnemic Featured By Owner Jun 1, 2015  Hobbyist General Artist
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?
:shrug:
Reply
:iconkh180:
kh180 Featured By Owner Apr 28, 2015  Hobbyist Digital Artist
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 ^^
Reply
:iconsiennablue:
SiennaBlue Featured By Owner Apr 23, 2015  Hobbyist General Artist
Thank you!  :)
Reply
:iconderangedsenpai:
DerangedSenpai Featured By Owner Apr 18, 2015  Hobbyist Traditional Artist
^.^ The video isn't working just to inform you
Reply
:iconlivingbut-not-really:
livingbut-not-really Featured By Owner Apr 14, 2015  Hobbyist Writer
oh god I don't understand a thing Q.Q
Reply
:iconawesomestar2002:
Awesomestar2002 Featured By Owner Apr 9, 2015  Hobbyist Filmographer
I don't have direct image link on my web browser! Is this going to effect me anyhow?
Reply
:iconsugar-sugarjun:
Sugar-SugarJun Featured By Owner Edited Apr 9, 2015  Hobbyist Digital Artist
I am not sure what I did wrong but my DevID profile image is off center...I am not sure what to do...Help!
Reply
:iconduskshadoe:
DuskSHadoe Featured By Owner Edited Apr 5, 2015  Student Traditional Artist
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? Bunny Emoji-66 (Thank you arigatou) [V3]   Um



Ah, nevermindSweating a little... I fixed it~ but thank you again for the tutorial! It really did help :)
Reply
:iconcommanderlavellan:
CommanderLavellan Featured By Owner Edited Apr 3, 2015  Student Digital Artist
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.
Reply
:icontyeskishino:
TyeskiShino Featured By Owner Mar 16, 2015  Hobbyist General Artist
Umm, could you tell me how you manually add the breaks to your bio thingy..?
Reply
:iconkaitlin73:
Kaitlin73 Featured By Owner Mar 21, 2015  Student General Artist
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.
Reply
:iconb-rltlsh:
B-RlTlSH Featured By Owner Mar 14, 2015
may I ask, is it possible to add boxes in the deviantID?
Reply
:icontaniida-chan:
TaniIda-Chan Featured By Owner Apr 29, 2015  Hobbyist Digital Artist
yes, it is cx
Reply
:iconnicholas-mark-amos:
NICHOLAS-MARK-AMOS Featured By Owner Mar 9, 2015  Hobbyist General Artist
Thankyou good sir. I now have applied these teachings to my profile.
Reply
:iconpromenadequeen:
PromenadeQueen Featured By Owner Feb 28, 2015
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?
Somethingelse by PromenadeQueen
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
Reply
:iconloadingremexe:
LoadingRemexe Featured By Owner Feb 28, 2015  Hobbyist General Artist
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?
Reply
:iconsarkiya:
sarkiya Featured By Owner Feb 23, 2015  Student
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 . . .
:)
Reply
:iconvapolord:
Vapolord Featured By Owner Feb 12, 2015  Hobbyist General Artist
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?
Reply
:iconitsteriyaki:
itsTERIYAKI Featured By Owner Feb 9, 2015
This post is a lifesaver! Thank you for making this!
Reply
:iconmortoboe:
mortoboe Featured By Owner Feb 7, 2015  Hobbyist General Artist
Man, thank you so much for making this! It's by far the most helpful id customization ive ever found. 
Reply
:iconekayaru:
EkaYaru Featured By Owner Feb 2, 2015  Hobbyist Digital Artist
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?
Reply
:icongray-wolf-queen:
gray-wolf-queen Featured By Owner Feb 6, 2015  Hobbyist General Artist
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 <img style and ends with .png">

Sorry if that makes no sense. XD That's for the direct-image-link and it worked for me for my ID.
Reply
:iconpastelsneakers:
pastelsneakers Featured By Owner Feb 6, 2015  Hobbyist General Artist
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 ^^;)
Reply
:icongray-wolf-queen:
gray-wolf-queen Featured By Owner Feb 7, 2015  Hobbyist General Artist
For some reason that wasn't working for me, though. =\

But thank you. =D
Reply
:iconcasthavian:
Casthavian Featured By Owner Feb 1, 2015  Hobbyist General Artist
My text is just too long and I can't see half of it and it covers the "interest" area :/
Is there a text limit on this?
Reply
:iconrippleart:
RippleArt Featured By Owner Jan 31, 2015  Hobbyist General Artist
Never mind my old critique, here's my new one: this totally worked!!! Although your suggestion of tel words per
was a bit miscalculated (mine needed more) this was a brilliant and most helpful tutorial for those who have never coded in their life like me, and a majority of the population on earth. A lot of the other tutorials were trying to explain code to me but i don't wanna hear all that because it makes my head spin. You simply told me where to put stuff to make it work and it did. At first it didn't work but i think that's because i didn't put all the
in yet. So thank you for being a huge help.
Reply
:iconmissjenrose:
MissJenRose Featured By Owner Jan 25, 2015  Hobbyist General Artist
This is amazing! Thank you, thank you, thank you! :glomp:
Reply
:iconshi-ryuu:
Shi-Ryuu Featured By Owner Jan 24, 2015  Hobbyist General Artist
I have a question, how can I do for apply this using chrome? cause I can just copy the image URL of my deviant-ID, where is the other link?
Reply
:iconpsycopix:
psycopix Featured By Owner Jan 23, 2015  Student General Artist
If this is so hard, what's the point of having a Premium Membership?!?
Reply
:iconmaukazz:
Maukazz Featured By Owner Jan 18, 2015  Hobbyist Digital Artist
how i can hide my profile picture and my username in the deviant ID ????
Reply
:iconrascalby:
Rascalby Featured By Owner Jan 10, 2015  Student Filmographer
Did I do something wrong?
rascalby.deviantart.com/
I did what the tutorial said, but the DeviantID box won't go all the way. Is there a way to fix this? :) 
Also, thanks for the all the tutorials!! :D They've been very helpful!!
Reply
:iconxeniastar:
XeniaStar Featured By Owner Edited Mar 14, 2015  Hobbyist General Artist
Hey there ^^"
I think Im having the same problem you had before. I would be really grateful if you could tell me what you did to solve it hehe 
The ´problem is both for the id and the featured devation xeniastar.deviantart.com/
Thanks :D
Reply
:iconrascalby:
Rascalby Featured By Owner Mar 18, 2015  Student Filmographer
At the end, I just placed more rows of < br >'s. C: 
Reply
:iconxeniastar:
XeniaStar Featured By Owner Mar 18, 2015  Hobbyist General Artist
Hahaha, yep, thanks a lot ^^
Reply
:iconrascalby:
Rascalby Featured By Owner Mar 19, 2015  Student Filmographer
You're welcome ^^ 
Reply
:iconmokka-quill:
Mokka-Quill Featured By Owner Jan 15, 2015  Student General Artist
Are < br > tags not having any effect on extending the length of the box? 
Reply
Add a Comment:
 
×




Details

Submitted on
June 13, 2012
Image Size
1,010 KB
Resolution
800×5000
Submitted with
Sta.sh
Link
Thumb
Embed

Stats

Views
105,210 (78 today)
Favourites
4,238 (who?)
Comments
1,380

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×