HOME | DD
CypherVisor —
deviantID widget box customization tutorial
by-nc-nd
Published: 2012-06-13 19:29:45 +0000 UTC; Views: 195268; Favourites: 4811; Downloads: 0
Redirect to original
Description
______________________________________________________________________________________________________»»»»»»»»»»»»»»»»»»»»»»»»»»» 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
-----------------------------------------
:devYOUR_USERNAME:
YOUR NAME
Artist | Professional | Design & Interfaces
YOUR_COUNTRY_NAME
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
WHITE TEXT version
-----------------------------------------
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
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.
______________________________________________________________________________________________________
Related content
Comments: 1688
The ID picture isn't displaying, and the ID cuts off the text at the bottom. How can I fix this?
Great job on the tutorial, by the way. Very easy to understand. c:
👍: 0 ⏩: 1
As given in the tut...Use
tags to increase the increase the size of the box or push elements downward.
👍: 0 ⏩: 1
I've tried that, but it's still not showing all the text or the ID picture. Is there any specific place you would suggest to use the
tags? Also, I've noticed that some of the text turns white, though all the text is supossed to be black. Is there any way to fix that?
👍: 0 ⏩: 1
No use the tags at the bottom. Well, that shouldn't happen. Are you using the black text version? Btw, I can see all text to be black there in your deviantID box.
👍: 0 ⏩: 1
I'm using the black text version. It only seems to turn white sometimes though, like maybe after you veiw my profile a certain amount of times or something? I don't know, that's what it seems to do to me. And I used the tags many, many times at the bottom, but it still doesn't fix anything.
👍: 0 ⏩: 1
Well, I can't say anything without seeing the code that you are entering then.
👍: 0 ⏩: 1
Hiya!
First of all, congratulations on this tutorial and on the DD, it is well deserved!
Secondly, I followed all your instructions, I managed somehow to get it work and I am pretty much pleased with what I've done, considering that I'm a newbie at CSS and Html. This is the first customization that I've done on my profile and I am really, really thankful for your well-explained tutorial.
I have one small problem, and I don't know where/what to change. My monitor resolution is 1920x1080 and on that, the deviantID looks fine. But if I look at it on my 15" laptop monitor, the box is cut in half. Hmm..how should I explain this better..Well, if I minimize the browser window, it looks like this: [link]
Got any idea what I did wrong?
Thank you and I hope this won't be too long to read
Diana
👍: 0 ⏩: 1
Yeah, I understand. In the tutorial you shall find at the bottom some known issues that you might face. Just read through and you shall understand how to fix it.
👍: 0 ⏩: 1
Thanks for the response!
Well, I've read the known issues at the bottom of the tutorial over and over again last night and today, and still, I couldn't think of anything besides..that I've put the <#br> tags at a wider distance from one another. Then I had another idea, similar to journals' codes, about the position, whether it's relative or absolute
As I've said, I'm a newbie. So forgive me if I'm talking nonsense here
👍: 0 ⏩: 1
Okay, the solution you can do is by reducing the deviant-ID image that you are using and/or using
tags at shorter distance rather then putting them at a wider distance! 
👍: 0 ⏩: 1
Working great for me, though can't see my user name on it too well. Any way to change the color of the text there? Using the black font version, user name is currently in a light blue..... Can't read it too well over a grey on grey stripe.
👍: 0 ⏩: 1
Well, the hyperlinks automatically gets the same dark color when used inside a custom box. Though you can get a brighter text color by removing the hyperlink (:devUSERNAME:) and simply use text. For example remove the :devCypherVisor: and type in "=CypherVisor".
👍: 0 ⏩: 1
Hello
First I want to thank you for that great tutorial! It is very well made and I really like it ^___^
But I have one little problem and I hope you can help me there 
I got my background short enough to make the drop-down interest box visible, but I can't click on it :/ I don't know what I did wrong. I simply copied your code and only changed the things I should change. It looks correct, but I can't click on this drop-down thing
👍: 0 ⏩: 1
I can understand. Its completely fine. Just add 1 or 2 more
tags as explained in the tutorial at the end to push the drop-down interest box little bit downward and that should do the trick!
👍: 0 ⏩: 1
Oh it worked ^___^ It's kind of embarrassing that I did not thought of that by myself >///<
Thank you very much for your help and the fast answer! <3
👍: 0 ⏩: 1
That's okay!
And you're most welcome..
👍: 0 ⏩: 0
Thanks a lot for making it c:
👍: 0 ⏩: 1
Any help? The Background is okay,but the picture and text went to right and half of it isn't visible....
👍: 0 ⏩: 0
since Your image is the right size and all I used yours as an example and this is what happend [link] is there any way you can help me!?
👍: 0 ⏩: 1
Are you putting other links and text that are in the code?
👍: 0 ⏩: 1
I think theres links in it
👍: 0 ⏩: 1
Can this also be used for the Gallery and Favorites? Or only the ID?
This is really helpful and spiffy, love it!
👍: 0 ⏩: 1
For other tutorials please check my gallery folder here... [link]
👍: 0 ⏩: 0
Little question - cause I have stamps on my ID ... can I simply put the :thumb: - icons above the "lorem ipsum" stuff or do I need a more complicated way to get them back into my ID?
👍: 0 ⏩: 2
Yes, ofcourse you can!
tags.
👍: 0 ⏩: 1
Thanks, but I already threw my plans away to change my background cause it won't work and I have no idea why -.-°
👍: 0 ⏩: 1
Ok forget it -.- the code doesn't work... :/
👍: 0 ⏩: 0
ok i figured out the other thing, but its all there and showing up but it aint going down the entire ID
👍: 0 ⏩: 1
You need a bg with higher height resolution or stretch the image. I've explained everything in the tutorial. Just read through you'll understand I'm sure!
👍: 0 ⏩: 2
can you look at my ID and tell me what i need to do ?
👍: 0 ⏩: 1
As you are using an image as the background so better not to stretch the image. So, what you can do is increase the height of the image. If you are using an image of say 800x1000 px 1000=height then get an image which is like 800x2500 or so.
Also you need to copy all your content that you've written in the bio of your deviant ID in the code as explained in Step 4. Point 8.
👍: 0 ⏩: 1
it still covers things, even with changeing the size
you said Put ur Bio where the "Lorem Ipsum" thng was. I did, the thing is "Lorem Ipsum" is in the paragraph twice and is not inbetween "" marks
👍: 0 ⏩: 1
Sorry, I didn't get you. Where did you find the lorem ipsum text twice? Just copy the entire bio that you have in your devID at present (copy+paste from the edit mode btw) and replace the lorem ipsum text in the code. You need to put
tags as explained in the tutorial to make it display correctly.
👍: 0 ⏩: 1
READ HERE
(( Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. ))
See ? its there like 4 times
👍: 0 ⏩: 1
well ? i tried replaceing the entire paragraph and it still wont go over it..
👍: 0 ⏩: 1
<= Prev | | Next =>