HOME | DD
CypherVisor —
deviantID widget box customization tutorial
by-nc-nd
Published: 2012-06-13 19:29:45 +0000 UTC; Views: 189931; Favourites: 4832; 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
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!
👍: 0 ⏩: 3
Thanks it worked ok but now my profile is scrolling. Is there anyway I can make it static?
👍: 0 ⏩: 0
this was real helpful, thanks.
👍: 0 ⏩: 0
Thank you for the tip!
But than my profile can scroll.... But I don't want it...
Do you have any help for this?
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
same, i cant find the image location link TxT
👍: 0 ⏩: 2
It's called "Copy Image Address" on Chrome
👍: 0 ⏩: 1
I don't believe Google Chrome has that option. This tutorial is old enough to have been made just before the Chrome era (AKA before the entire world switched to Google Chrome), so I'm assuming this person was using another web browser.
👍: 0 ⏩: 2
if your using sta.sh then when you open it in new tab you just have to right click on the image you uploaded and click on "Copy image location" and then paste it.
E.g = src="orig07.deviantart.net/3c5d/f/2… "/
👍: 0 ⏩: 0
Go to Edit Page on your home and then add DeviantID.
👍: 0 ⏩: 0
I've tried this a ton of different ways, but its like my actual ID picture is behind my background. I'm not sure how to get it ontop! D: help would be amazing! I dont really want to have to physically edit the background picture to have my id picture on it D:
👍: 0 ⏩: 1
You need to put it inside
so put it underneath that
(change w's to v's)
👍: 0 ⏩: 0
what dimensions should I use for the widget?
👍: 0 ⏩: 0
Intersting tutorial, thank you for making this even if i am not good at this moment with codes^^'
👍: 0 ⏩: 0
left click on the image and copy image address.
👍: 0 ⏩: 0
I figured out the extra core symbol problem everyone!! The trick is to remove :devYOUR_USERNAME: (which removes the second star) and then use
instead of for your name and move your name up a bit, because deviantart uses for your name as default. That makes the star line up with your name.
Here is code that works for me:
...<*div class="pppp" align="left">YOUR NAME
<*font size="3">Artist | Professional | Design & Interfaces
<*font size="2">YOUR_COUNTRY_NAME
Lorem Ipsum ...
Without the *'s
I have it working on my profile now, you can have a look. Here is the code that I ended up using. I didn't use because I needed to have it white, so I ended up adding a heart to make my name line up with the star.
for your name as default. That makes the star line up with your name.
Here is code that works for me:
...<*div class="pppp" align="left">YOUR NAME
<*font size="3">Artist | Professional | Design & Interfaces
<*font size="2">YOUR_COUNTRY_NAME
Lorem Ipsum ...
Without the *'s
I have it working on my profile now, you can have a look. Here is the code that I ended up using. I didn't use because I needed to have it white, so I ended up adding a heart to make my name line up with the star.
<*font size="3">Artist | Professional | Design & Interfaces
<*font size="2">YOUR_COUNTRY_NAME
Lorem Ipsum ...
Without the *'s
I have it working on my profile now, you can have a look. Here is the code that I ended up using. I didn't use
because I needed to have it white, so I ended up adding a heart to make my name line up with the star.
👍: 0 ⏩: 2
When I do this H3 appears in the box after I close out.
👍: 0 ⏩: 1
I think it's because you need to replace both
to and
to . tells it to start this font and
to stop using it. The reason works instead of is because that particular font fits perfectly with what DA uses in bios normally, which makes the star appear exactly where it should be.
Removing :devYOUR_USERNAME: just removes the second star.
Removing :devYOUR_USERNAME: just removes the second star.
👍: 0 ⏩: 1
Yeah I tried that but I was still having issues so I decided on a custom box Id instead. Thank you though for taking the time to help though!
👍: 0 ⏩: 1
your page looks very pretty (:
👍: 0 ⏩: 1
Thank you! Sadly I'm not very satisfied with it lol XD
👍: 0 ⏩: 0
This helped a lot, thank you so much!! <33
👍: 0 ⏩: 1
I'm glad I could help! Looks like you don't need that flower though, cause a part of your name gets hidden behind the star with it.
👍: 0 ⏩: 0
Thanks! This helped me so much!
👍: 0 ⏩: 0
Will this work in the donation widget???
👍: 0 ⏩: 0
How do I fix the core membership button? Two of them appeared on my box.
puducosplayer.deviantart.com/
👍: 0 ⏩: 3
I solved it and posted a comment at the top about it
👍: 0 ⏩: 0
I would also like to know how you fixed it too
👍: 0 ⏩: 1
I solved it and posted a comment at the top about it
👍: 0 ⏩: 0
I solved it and posted a comment at the top about it
👍: 0 ⏩: 0
Hi!
So when I did the the background image was the but the all the writing was underneath and not on it.
Anyone know how to fix this?
👍: 0 ⏩: 2
same problem, you find how to fix it?
👍: 0 ⏩: 0
Hey! I'm doing this, and I have opened the image in a new google tab and clicked its "copy image address" and inserted that into the "background image url" area. This however, only gives me the link issue. (link instead of background image) Did I do something incorrectly?
👍: 0 ⏩: 0
How would one go about centering their text if they so chose to do so?
👍: 0 ⏩: 0
Wow, why can't DeviantArt just add an option "choose background" or something? It's way too complicated in my opinion...
👍: 0 ⏩: 2
Because your pages are supposed to be default green and the backgrounds are "special"
👍: 0 ⏩: 0
M'kay, so I've screwed mine up somehow... My background image is thumbnail sized, and my lines seem double-spaced. can anyone help? (I'll leave it like it is so you can see)
flita.deviantart.com/?rnrd=199…
👍: 0 ⏩: 0
woot! I have been wrestling with this issue for a week, and thanks to YOU I now know how to set in a background image.
All the other tutorials I read did not clearly state that you must 'right click' and XXXXXXX, so I was just using the page location and of course it did not work.
So now I am very happy... thanks again.
👍: 0 ⏩: 0
Ok so I found one of the links for my profile picture, whats the other one? (I'm using Google Chrome)
👍: 0 ⏩: 0
| Next =>