Shop Forum 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
386 out of 404 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
334 out of 357 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconpsyco-puppyg:
Psyco-puppyG Featured By Owner Sep 22, 2018
It didnt work I even have the core ;-;
Reply
:iconazforever-18plus:
AZForever-18plus Featured By Owner Aug 12, 2018  Student General Artist
The background picture shows up above the text rather than letting the text overlay it!?!?! HALP!!!
Reply
:iconl-emoncake-s:
L-emoncake-S Featured By Owner May 30, 2018   Artist
I don't have a link location for my deviantid picture because i use my own drawn artwork for it from my computer

what do i do ;-;
Reply
:iconpastelkittyqq:
Pastelkittyqq Featured By Owner Jun 24, 2018  Hobbyist Digital Artist
Upload that image to your sta.sh: sta.sh/
then get the url from there
Reply
:iconl-emoncake-s:
L-emoncake-S Featured By Owner Jun 24, 2018   Artist
ok thx
Reply
:iconthat-tickles:
that-tickles Featured By Owner May 10, 2018
I have extra space at the bottom of my profile, and an extra "core" symbol randomly placed there too.
Reply
:iconmiyeopta:
Miyeopta Featured By Owner May 1, 2018  Student
Why when I did it and 2 core member sign shows?
Reply
:iconsophibelle:
Sophibelle Featured By Owner Mar 9, 2018  Hobbyist General Artist
I have a... problem. My core star is still visible and I don't know how to get rid of it. I did everything right. I only made the text centered and wrote my username without the dev because I wanted it to be white. The star is visible with and without any code alterations.
Reply
:icon3kkio:
3kkio Featured By Owner Mar 7, 2018  Hobbyist Digital Artist
I tried. Didn't work. Then I realized it was meant for premium members and super groups.
Reply
:iconsoulridaaa:
SoulRidaaa Featured By Owner Jan 16, 2018  Hobbyist Digital Artist
How do I prevent 2 core symbols from showing up?
Reply
:iconmobz1lla:
MOBz1LLA Featured By Owner Jan 5, 2018  Hobbyist General Artist
Ahhh! I'm completely new to all of this coding stuff and this is super helpful! Thank you so much!
I do have a question, however. Is the only text colors available black and white?
Reply
:iconmobz1lla:
MOBz1LLA Featured By Owner Jan 5, 2018  Hobbyist General Artist
And I can't seem to get the core symbol to disappear in the box too, ahhh.... any help would be appreciated
Reply
:iconfreiha:
Freiha Featured By Owner Jan 7, 2018  Hobbyist Digital Artist
I've got the same problem. I've tried around for a while but it wouldn't disappear. :faint:
Reply
:iconmobz1lla:
MOBz1LLA Featured By Owner Jan 7, 2018  Hobbyist General Artist
Yeah....

I just gave up and made my own custom box.
Reply
:iconfreiha:
Freiha Featured By Owner Jan 7, 2018  Hobbyist Digital Artist
I see. That's why there's no core symbol on your profile.  :) Well, I might do that, too, if I can't find another workaround :iconthinkplz:
Reply
:iconmobz1lla:
MOBz1LLA Featured By Owner Jan 7, 2018  Hobbyist General Artist
Yeah X'D

There is one person, Aurora something who has a code somewhere. Maybe, if you find her comment and code you could make it work.
Reply
:iconfreiha:
Freiha Featured By Owner Jan 7, 2018  Hobbyist Digital Artist
Yes, I found it. It works. Thank you very much! :huggle:
Reply
:iconvaliantshadow:
ValiantShadow Featured By Owner Jan 7, 2018  Professional General Artist
Could you link me to that code?  My core dot is bugging the daylights out of me.
Reply
(1 Reply)
:iconmobz1lla:
MOBz1LLA Featured By Owner Jan 7, 2018  Hobbyist General Artist
Yay! Glad I could help >w<
Reply
:iconsoulridaaa:
SoulRidaaa Featured By Owner Jan 5, 2018  Hobbyist Digital Artist
MY interest drop down box disappeared, how do I get it to show?
Reply
:iconicecr3amkitty:
IceCr3amKitty Featured By Owner Jan 2, 2018  Hobbyist Digital Artist
what are the
direct image link and image URL
for apple?
Reply
:iconmobz1lla:
MOBz1LLA Featured By Owner Jan 5, 2018  Hobbyist General Artist
It should be "copy Image Address"
Reply
:iconicecr3amkitty:
IceCr3amKitty Featured By Owner Jan 5, 2018  Hobbyist Digital Artist
thank you. =w=
Reply
:iconmobz1lla:
MOBz1LLA Featured By Owner Jan 5, 2018  Hobbyist General Artist
My pleasure >w<

Happy coding!
Reply
:iconladyseshiiria:
LadySeshiiria Featured By Owner Nov 30, 2017  Hobbyist General Artist
I just placed the code in a custom box and renamed the custom box and used br tags to fix the length of the box. I had issues with double core and I tried troubleshooting and doing what others said to, to no avail. :(
Reply
:icontats2:
tats2 Featured By Owner Nov 5, 2017  Hobbyist Digital Artist
Thank you
Reply
:icontomfraggle:
TomFraggle Featured By Owner Oct 31, 2017
Your video tutorial is stating it no longer exists on YouTube.  Might want to fix that.  Thanks!
Reply
:iconhoovlesnbits:
HoovlesNBits Featured By Owner Aug 25, 2017  Hobbyist General Artist
It doesn't show up very well on mobile devices. Everything gets cut off and shifted unless I view it on my 22 inch monitor. Any work around? 
Reply
:iconskarletshadows:
SkarletShadows Featured By Owner Dec 3, 2017  Hobbyist Digital Artist
Whats getting cut off?
Reply
:iconwhetsit-tuya:
Whetsit-Tuya Featured By Owner Aug 21, 2017  Student General Artist
Thanks, it halfway worked
Reply
:iconfeislandqueen:
FEislandqueen Featured By Owner Jul 30, 2017  Hobbyist General Artist
everything worked out find but I just have one problem my deviation is displaying as a thumb link.
Reply
:iconskykristal:
SkyKristal Featured By Owner Jul 27, 2017  Professional General Artist
i cant find the link location of the image..Im so confused.
i tried out 3 different browers.
Reply
:icontiny-doodles:
Tiny-Doodles Featured By Owner Jul 15, 2017  Hobbyist Digital Artist
Everything seems to work perfectly for me but I do have a couple questions if that is okay:
1) I don't want to display my real name and country name, what do I do?
2) I added  to the top of the code like one of the commenters said, but now my box has a scrollbar, is there any way to remove that?
3) The ID box is perfectly readable in full screen but once I start to make the Chrome window smaller the text shifts behind other boxes, thus making it unreadable, how do I fix this?
Reply
:iconshadewolf643:
shadewolf643 Featured By Owner Jun 29, 2017  Hobbyist Digital Artist
why is my background image at the top?
Reply
:iconmorippin:
morippin Featured By Owner Jul 7, 2017  Hobbyist General Artist
Maybe it's too short!
Reply
:iconmelissmallsourgeship:
MelisSmallsourgeShip Featured By Owner Jun 9, 2017  Hobbyist General Artist
It won't save the image.
Reply
:iconmelissmallsourgeship:
MelisSmallsourgeShip Featured By Owner Jun 9, 2017  Hobbyist General Artist
Will it work on Microsoft paint?
Reply
:iconpastelkittyqq:
Pastelkittyqq Featured By Owner Jun 1, 2017  Hobbyist Digital Artist
I know how to remove the core/other symbol!
Add <~span class="previewbox"> to the beginning of the code (remove ~).
This is a white layer that covers over the normal box, everything can be added as normal.
(If background messed up, add: 
width="700"
right before the > in the img src code!
Reply
:icontats2:
tats2 Featured By Owner Nov 5, 2017  Hobbyist Digital Artist
Thanks it worked ok but now my profile is scrolling.  Is there anyway I can make it static?
Reply
:iconfeislandqueen:
FEislandqueen Featured By Owner Jul 30, 2017  Hobbyist General Artist
this was real helpful, thanks.:-)
Reply
:iconsweetybat:
SweetyBat Featured By Owner Jun 9, 2017  Hobbyist Digital Artist
Thank you for the tip! :D
But than my profile can scroll.... But I don't want it...
Do you have any help for this?
Reply
:iconasksanescourge:
AskSaneScourge Featured By Owner Edited May 17, 2017  Hobbyist General Artist
Unfortunately with the changes to the website, they've made it nearly impossible to code for non-CORE members. On my priority account I wouldn't have to deal with this issue, but no matter how many times I adjust the coding or change around everything, it does not work. I will keep trying, but if you have any sources to updated tutorials around the years 2015-2017, links from anyone would be appreciated.

As well, I can't find any way to get the image location link, I've tried Googling it, but there's nothing.
Reply
Add a Comment:
 
×




Details

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

Stats

Views
162,150 (11 today)
Favourites
5,194 (who?)
Comments
1,696

License

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