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
221 out of 228 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
212 out of 223 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

: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  New member 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  New member 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
:iconkittenoftheinternet:
KittenOfTheInternet 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
:iconrascalby:
Rascalby Featured By Owner Jan 15, 2015  Student Filmographer
They do now, thank you ^-^ 
Reply
:iconmarisaschatz:
MarisaSchatz Featured By Owner Jan 10, 2015  Hobbyist General Artist
Thanks so much for posting this.  It's fantastic and I've successfully utilized it after not -too- much trial and error  :D
Reply
:iconblack-jijel:
black-jijel Featured By Owner Jan 7, 2015
how to keep the original  deviantID icon !!
Reply
:iconkutiekittykandykorn:
KutieKittyKandyKorn Featured By Owner Dec 31, 2014  Hobbyist General Artist
It's not working for me whatever I do
Reply
:iconmokka-quill:
Mokka-Quill Featured By Owner Jan 15, 2015  Student General Artist
What was your problem? I had a lot of trouble but I was able to fix it so maybe I can help?
Reply
:iconkutiekittykandykorn:
KutieKittyKandyKorn Featured By Owner Jan 15, 2015  Hobbyist General Artist
Oh, actually it's fine now ^^ I think it was just because I just 
got a PM and it still hadn't gone through the DA system.

Thank you for trying to help though :3
Reply
:iconmokka-quill:
Mokka-Quill Featured By Owner Jan 15, 2015  Student General Artist
That's okay. I'm glad it worked out for you!
Reply
:iconkutiekittykandykorn:
KutieKittyKandyKorn Featured By Owner Jan 15, 2015  Hobbyist General Artist
Yeah ^^
Reply
:iconturtwig-z:
turtwig-z Featured By Owner Dec 28, 2014  Hobbyist General Artist
no matter what browser I use I don't have the copy link location option for the image-url and it's making me mad bc everything else works
gah
Reply
:iconcreamyshundala:
CreamyShundala Featured By Owner Dec 28, 2014  Hobbyist General Artist
I'm having problems with my about me box. It's not supposed to be doing this!!!!
prntscr.com/5m2vhs
It's not extending all the way and I have no idea why.
I'll note you my code if you want to see
Reply
:iconkinteki:
Kinteki Featured By Owner Dec 28, 2014  Hobbyist
Stupid question: if I installed a skin from deviantart how do I get it in my stash? O.o
Reply
:iconmokka-quill:
Mokka-Quill Featured By Owner Jan 15, 2015  Student General Artist
Depends, what are you trying to do?
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
102,314 (4 today)
Favourites
4,156 (who?)
Comments
1,367

License

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