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
203 out of 209 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
199 out of 209 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

: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
: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  Student General Artist
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 Digital 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  Student 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  Student 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  Student Digital 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
:iconkinteki:
Kinteki Featured By Owner Jan 15, 2015  Hobbyist
Well, to be honest I forgot X'D
its been some time since I asked and my pm will be over in a few days anyway, sorry
but thanks very much for asking!^^
Reply
:iconmokka-quill:
Mokka-Quill Featured By Owner Jan 15, 2015  Student General Artist
That's okay, sorry I couldn't help!
Reply
:iconkinteki:
Kinteki Featured By Owner Jan 17, 2015  Hobbyist
No problem at all! ^^
Reply
:iconzorathetwilightdrake:
ZoraTheTwilightDrake Featured By Owner Dec 23, 2014  Hobbyist Artist
Why does it have to be so complicated? Splitting Headache! 
Reply
:iconkiwicocktail:
KiwiCocktail Featured By Owner Dec 11, 2014  Hobbyist Traditional Artist
Amazingly useful! I had to change the code a bit to include everything I wanted, but this was absolutely helpful. Thanks for sharing! :heart:
Reply
:iconrachwantshercupcake:
RachWantsHerCupcake Featured By Owner Nov 18, 2014  Hobbyist General Artist
I have a question, and I did not find anything on it in you're F.A.Q. + Tips n Tricks.
the text in it is being cut off right after I get passed country (its only one line after that).
is there a way to fix this?
Reply
:iconlindseystyles:
LindseyStyles Featured By Owner Nov 10, 2014  Student Digital Artist
How do I add in the background?
Reply
:iconphoenixdawncreations:
PhoenixDawnCreations Featured By Owner Nov 8, 2014  Professional General Artist
Is there a way to work the code so that the text isn't all bolded? I'd like to bold things on my own inside the text (like how my devID is right now) to make my devID easier for visitors to read.
Reply
:iconathenanoza:
athenanoza Featured By Owner Nov 6, 2014  Student Digital Artist
I'm using firefox. 
When ever i right click it, there is no option of link location :C
I don't know what to do now
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
98,663 (9 today)
Favourites
4,063 (who?)
Comments
1,357

License

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