HOME | DD
Astrikos — PE: How to embed things (WILL UPDATE FOR ECLIPSE)
Published: 2013-05-08 11:25:20 +0000 UTC; Views: 135851; Favourites: 1700; Downloads: 0
Redirect to original
Description
body div#devskin9188635 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin9188635 .gr-top { display:none; } body div#devskin9188635 .gr-top .gr { display:none; } body div#devskin9188635 .gr-top h2 img { display:none; } body div#devskin9188635 .gr-top h2 { display:none; } body div#devskin9188635 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; } body div#devskin9188635 .gr { background:transparent; border:none; } body div#devskin9188635 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin9188635 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin9188635 i.tri { display:none; } body div#devskin9188635 i.gr1 { display:none; } body div#devskin9188635 i.gr2 { display:none; } body div#devskin9188635 i.gr3 { display:none; } body div#devskin9188635 i.gb { display:none; } body div#devskin9188635 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin9188635 .top img { margin:0px auto; min-width:529px; } body div#devskin9188635 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin9188635 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin9188635 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin9188635 span.board { display:none; } body div#devskin9188635 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin9188635 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin9188635 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin9188635 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin9188635 a { color:#B73E62; text-decoration:none; } body div#devskin9188635 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin9188635 ul { margin:0px 0px 0px 0px!important; } body div#devskin9188635 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif')!important; } body div#devskin9188635 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin9188635 li b sup { font-size:10px; font-weight:normal; } body div#devskin9188635 .list { display:none!important; } body div#devskin9188635 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9188635 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin9188635 .clear_ { clear:both!important; } body div#devskin9188635 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin9188635 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin9188635 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9188635 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9188635 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin9188635 .links img { padding-left:8px; } body div#devskin9188635 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9188635 .buttons img { padding-right:8px; } body div#devskin9188635 blockquote { background:#E9F2E9; border:2px ridge #FF1966; margin:1.5em 10px; padding:.5em 10px; } body div#devskin9188635 blockquote:before { color:#9B9DA3; font-size:5em; line-height:.1em; margin-right:.25em; vertical-align:-.4em; } body div#devskin9188635 blockquote p { display:indent; } body div#devskin9188635 .box { background:#fff; box-shadow:3px grey; -moz-box-shadow:3px grey; -webkit-box-shadow:3px grey; border:2px solid#e5e5e5; padding:7px; margin:auto; text-align:center; text-decoration:none; letter-spacing:0px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; line-height:normal; overflow:auto; float:center; } body div#devskin9188635 h1, body div#devskin9188635 h2, body div#devskin9188635 h3, body div#devskin9188635 h4 { font-weight:normal; }
Written by Astrikos for projecteducate 's community week.
You may have noticed GIFS and hot things in people's journals and profiles.
With HTML and CSS, you can add some hotness to your journals and profile.
Pretty neat, yes?
Embedding Images and GIFsDeviantART Images
Images on dA can easily be linked with thumbcodes.
While on a deviation page, all you have to do is scroll down and look right until you see:
Copy and paste the thumb code.
:thumb367944988:
:thumb367944988:
And if you want it bigger:
:bigthumb367944988:
And bam. There you are.
If that's not good enough, you can play around with the size like this.. .
It's the thumbcode number without thumb in it... Trying it out... Gives us: If you want to play with height of dA deviations (with HTML) , you will need to use the method explained below. All kinds of images, not just deviantART ones With this method, you can link any image you want from the internet(including dA images) , however, HTML is involved. And now.... Go find your adorable/sexy GIF/Image on wherever. Tumblr is especially useful. So is google. Express yourself. The code is... That's it! Easy. Right click, then select Copy Image URL to get the direct image URL. And then you're done! Resizing: You can resize things the HTML way. (Width: 310) (height: 430) (Code: Default sizing Or for deviantART images, sta.sh, all you need to do is drag and drop and resize that way. (in Journals) You can resize the HTML Way.. However, you need to have images that link to the deviation. Linking Images Perhaps you want to create a graphic for your profile page that links to something else. First, find your image and upload it to st.ash or any other hosting program. Like flickr, tinypic, etc. I find sta.sh to be much quicker. I'll use project educate's header image: I the image URL so I right click on the image, Not : http:/communityrelations.deviantart.com/journal/Project-Educate-Continues-261205783 (this is from the address bar, not from right clicking and getting 'copy image URL'.) I take the image URL and paste it into this code format: <a href="whatyouwanttheimagetolinkto.com"> Click it! It will redirect you to project educate! You can also apply the resizing methods shown above. Embedding Video You can also embed snazzy youtube videos into your journals! Take a look at this code: Note: The ID means this.... http://www.youtube.com/watch?feature=player_profilepage&v=CIx0P1KDkVk An example would be And that gives us: Compatible video types: Embedding a music player Good luck and happy embedding! If you have questions, you may comment below!
and select copy image URL. 
For your direct image URL, you can find by right clicking and selecting copy image URL. It will end in an image file extension. (.jpg,..png,.gif,etc.)
In our example, this gives us the code:
<a href="projecteducate.deviantart.com"> <img src="http://fc01.deviantart.net/fs70/o/2013/024/0/0/350289350_646745_322748439_464988_header2.png"><a>
Related content
Comments: 779
s-m-batty.deviantart.com/journ…
It's the latest entry
👍: 0 ⏩: 1
Did you enter HTML mode before writing that piece of code?
If not, then it won't work.
👍: 0 ⏩: 1
yeah I tried that, it didn't work see: s-m-batty.deviantart.com/journ…
Also I get you want me to enter the phrase but honestly I don't know how, you didn't exactly give me obvious direction.
👍: 0 ⏩: 1
I don't think you put it in Html mode. You can enter it with the shortcut :control + e and then you enter it the code. Lol it's literally copy and paste, thought you didn't need instructions for that so I don't know why you're acting like im not that clear. Also provided a step by step way to send a screenshot a few replies back but alright, that's fine.
👍: 0 ⏩: 2
I don't even know what an Html mode is! It was mentioned in passing in your journal! I dunno what that means or what to do with it or what it even LOOKS like.
I'm not "acting" like you're not clear, I'm not MESSING with you and trying to make you feel like your instructions aren't adequate. I'm genuinely struggling with this and you DID NOT send me "step by step" instructions. You said: Enter HTML mode before writing the code. To ME that meant write "HTML mode" before the code you provided on your journal! Which FAILED TREMENDOUSLY.
And if I copy and paste the URL I just get a LINK which is what I'm TRYING NOT TO GET.
And I did "control+e" and THAT failed HORRIBLY as well. So, either I'm a dumbass, the instructions are not clear or DA hates me.
👍: 0 ⏩: 1
Now that you've done that, type in this into the textbox:data1.whicdn.com/images/684426… .jpg">.
Now hit done and see if it worked.
You can also remove the "I followed it to a T" part in your journal because for a lot of people, it worked fine because they entered HTML mode.
HTML mode won't change the appearance of the textbox, but you can double check by looking at the image I just sent you up above.
Hopefully this clears it up for you.
👍: 0 ⏩: 1
Ok, I followed your instructions... I switched it to HTML mode using the diagram you provided...
I put data1.whicdn.com/images/684426… .jpg"> in the text box and here's what happened.
s-m-batty.deviantart.com/journ…
Now NOTHING is showing up... And even when I didn't use data1.whicdn.com/images/684426… .jpg"> it STILL didn't work. So either way this isn't working for me! So I guess even when I DO follow instructions to a "T" I will find a way to FAILLLLLLLLLL.
👍: 0 ⏩: 1
Look man I'm just not good at following instructions. All's I know is I followed the instructions on this journal precisely and all's I get is a link to an image RATHER then the literal image itself.
👍: 0 ⏩: 1
Alrighty, I get you.
However, when I asked you to copy and paste a link so I could see it, you kept just saying, oh look it's the last journal so I assumed you were sassing me lol.
👍: 0 ⏩: 1
Well you know which journal it is, and honestly this is frustrating the hell out of me. I'm getting that weird pain in the back of my throat, I don't even know if this is worth it, even if I do follow your instructions exactly it never works out...
👍: 0 ⏩: 1
I think you should calm down a little bit
Also, I don't know what to tell you. It might be glitch, who knows?
👍: 0 ⏩: 1
Um where do I go to embed music?
👍: 0 ⏩: 1
You can click the link to CypherVisor 's tutorial!
👍: 0 ⏩: 0
yeap, i still cant do it
👍: 0 ⏩: 2
Your link shows up for me on my custom box, it might be that you need a premium membership to link things D: I don't know why that is, but it is D;
👍: 0 ⏩: 0
You can only do it in journal entry's an your bio
👍: 0 ⏩: 0
👍: 0 ⏩: 1
This code works, though!
👍: 0 ⏩: 0
you can use the add media toolbar to add in deviations that way resep pie susu dhian .
👍: 0 ⏩: 1
You're wonderful. Thank you so much!
👍: 0 ⏩: 1
Can you help me? I'm trying to embed a picture from the internet into my deviantID. Will you please help me?
👍: 0 ⏩: 0
I really want to image link one deviation to another in the description but the thumbs aren't working. Are they really just a premium thing..? Is there any way to do it other than .stash because I would like for the link to go directly to the deviation and not the .stash page
👍: 0 ⏩: 1
I think that in a description thumblinking is for premium only, which I find extremely weird! D:
👍: 0 ⏩: 1
Not working for me. I tried embedding that cat gif up there and it worked immediately, but for some reason when I try to embed:
38.media.tumblr.com/tumblr_ly0… " width="500" height="281">
it doesn't work. Any ideas? I'll be your best friend if you can help! I'll even throw in a free hug!
👍: 0 ⏩: 1
Okay I got it to work on my profile; I put it up there with the code that worked! 
👍: 0 ⏩: 0
I can link thumbs in my journal with that but would not work on descriptions of other deviations.
👍: 0 ⏩: 1
You can paste in the thumbcodes to descriptions and it works, or you can use the add media toolbar to add in deviations that way.
👍: 0 ⏩: 1
I just read something that you can only paste thumbs in descriptions if your a premium member.
👍: 0 ⏩: 1
Oh darn! I totally forgot about that...
👍: 0 ⏩: 0
The img src thing isn't working. u___u"
👍: 0 ⏩: 1
Can you show me what you coded and then I can test it for any bugs that you've might have missed?
👍: 0 ⏩: 1
<a href="doremirocker.tumblr.com "> 👍: 0 ⏩: 0
So I want to embed this sign hasdcdonesomethingstupidtoday.… into the info box for my group. How do I make that work?
👍: 0 ⏩: 1
I don't think dA supports the iFrames in the group descriptions.. Some of the widgets that can be embedded are hit or miss.
Try googling another type of countdown widget and tell me if it works!
👍: 0 ⏩: 1
Does the direct image embedding not work for your profile description? Because I'm having difficulties with that.
👍: 0 ⏩: 1
It works for your profile. Copy and paste the code you tried and maybe I can help you?
👍: 0 ⏩: 1
<= Prev | | Next =>