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
245 out of 254 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
229 out of 242 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconzevhara:
Zevhara Featured By Owner Aug 23, 2015  Hobbyist General Artist
Hi there! This tutorial was wonderfully helpful. I just have one concern-my deviantID box seems to be too short. I can see the top half of some of my stamps but the box just stops at a certain point.
Reply
:icondragondrawer102:
DragonDrawer102 Featured By Owner Aug 22, 2015  Student General Artist
     I'm having a problem here that I can't seem to fix. I followed what was in the tutorial and I looked for some other answers, but I can't seem to get my content out from the left side of the box. I changed the image size and made sure there were no spaces in the < br > tags. Nothing seems to work. It looks perfect on Chrome, but flawed on FireFox. Any solutions?:(
Reply
:iconjetstream-d-sparky:
Jetstream-D-Sparky Featured By Owner Aug 13, 2015  New Deviant Hobbyist General Artist
Ack, it doesn't work for me anymore.... :'c
Reply
:iconatmoner:
atmoner Featured By Owner Aug 10, 2015  New Deviant Hobbyist Traditional Artist
I am having a little problem with the star premium members, the star desperately remains above the background image

Sans titre by atmoner

If you have an idea to fix this, thanks!
Reply
:iconcloverdoe:
CloverDoe Featured By Owner 6 days ago
Same here ^^"
Reply
:iconbc-rain:
BC-Rain Featured By Owner Edited Aug 8, 2015  Hobbyist Digital Artist
It worked for me! But wouldn't people with different sized monitors see different effects of the background image? Like, people with wider screens might see space, while people with narrower screens might get some stuff (like the interests bar) cut off?
Reply
:icontestsubjectferal16a:
TestSubjectFeral16A Featured By Owner Jul 30, 2015  Hobbyist General Artist
I looked at this Tutorial and I am really really confused
Reply
:iconalaiaorax:
Alaiaorax Featured By Owner Jul 24, 2015  Student Digital Artist
Thank you for this♥ but how can make this white ------- and all text under it black?
YOUR NAME
Artist | Professional | Design & Interfaces
YOUR_COUNTRY_NAME

Reply
:iconbc-rain:
BC-Rain Featured By Owner Aug 8, 2015  Hobbyist Digital Artist
I don't think you can unless you know more advanced coding
Reply
:iconxxfabulouswolf:
xXFabulousWolf Featured By Owner Jul 20, 2015  Hobbyist Digital Artist
I can't do it now -.-
Reply
:iconterranout:
Terranout Featured By Owner Jul 18, 2015  Hobbyist General Artist
Thanks for this! it worked to me! :D
Reply
:iconkyori-san:
Kyori-san Featured By Owner Jul 17, 2015  Hobbyist Traditional Artist
Is it possible to add white content boxes?
Reply
:iconkyori-san:
Kyori-san Featured By Owner Jul 17, 2015  Hobbyist Traditional Artist
Is it possible to add white content boxes?
Reply
:iconredpassion:
RedPassion Featured By Owner Jul 14, 2015  Professional Digital Artist
Hey there^^ And thanks a lot for this great tutorial :D 
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.. :( What did I do wrong? :?
Thanks for helping me out :)
Reply
:icondadsonahuntingtrip:
dadsonahuntingtrip Featured By Owner Jul 11, 2015  Student General Artist
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?
Reply
:iconten-os:
TEN-OS Featured By Owner Jul 11, 2015  Hobbyist General Artist
i'm a chrome user as well, and "copy image URL" is exactly the same as copying the direct image link, just reworded. :^)
Reply
:iconkitten-ex-machina:
Kitten-ex-Machina Featured By Owner Jul 7, 2015  Hobbyist General Artist
I tried it, and it's still not showing the background image.
Reply
:iconkitten-ex-machina:
Kitten-ex-Machina Featured By Owner Jul 7, 2015  Hobbyist General Artist
Nevermind. Got it!
Reply
:iconstcdth:
stcdth Featured By Owner Edited Jul 6, 2015  Student Interface Designer
great tutLove
Can I translate your tut in the another language? I would surely burn the source
Reply
:iconmagnagengar:
MagnaGengar Featured By Owner Jul 3, 2015  New Deviant
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 :(
Reply
:iconmagnagengar:
MagnaGengar Featured By Owner Jul 4, 2015  New Deviant
I've found the problem! :) Thanks for the lovely tutorial! I give ***** (5 Stars)
Reply
:iconnmorris86:
nmorris86 Featured By Owner Jul 1, 2015  Professional General Artist
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?
Reply
:iconcommander-dominic:
Commander-Dominic Featured By Owner Jun 30, 2015
Have to try this.
Reply
:iconmango-candy:
Mango-Candy Featured By Owner Jun 30, 2015  Hobbyist Digital Artist
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?
Reply
:iconxxfabulouswolf:
xXFabulousWolf Featured By Owner Jun 25, 2015  Hobbyist Digital Artist
Finally after many attempts, I DID IT! THANK YOU!
Reply
:iconbeapanda:
BEAPANDA Featured By Owner Jun 24, 2015  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
:iconkyanye:
Kyanye Featured By Owner Jul 14, 2015
You need to add
every now and then to create manual breaks.
It worked for me, so I'd reccomend doing that.
Reply
:iconsilverlynx69:
silverlynx69 Featured By Owner Edited Jun 24, 2015   General Artist
use [-&nbsp-;] (remove the dash, no space ) it work on my deviantid box.
Reply
:iconbeapanda:
BEAPANDA Featured By Owner Jun 24, 2015  Hobbyist Digital Artist
where i put this code? thanks for answer ♥
Reply
:iconsilverlynx69:
silverlynx69 Featured By Owner Jun 24, 2015   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 Jun 24, 2015  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 Jun 24, 2015   General Artist
did you put the code correctly?? like this  & n b s p ;  (no space) 
Reply
:iconbeapanda:
BEAPANDA Featured By Owner Jun 25, 2015  Hobbyist Digital Artist
yes, but its still in the left, i don't know why U_U
Reply
:iconsilverlynx69:
silverlynx69 Featured By Owner Jun 25, 2015   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 Jun 23, 2015  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
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 General 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
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
110,155 (24 today)
Favourites
4,358 (who?)
Comments
1,405

License

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