HOME | DD
Astrikos — PE: How to embed things (WILL UPDATE FOR ECLIPSE)
Published: 2013-05-08 11:25:20 +0000 UTC; Views: 135913; 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
Is the text not showing up at all? Or what's happening?
👍: 0 ⏩: 1
no, its still there just underneath or above the gif
and i really want it to sit next to the gif
👍: 0 ⏩: 1
How big is the gif? You may need to resize it to be smaller.
👍: 0 ⏩: 1
i have tried many times resizing it, but that doesnt seem to affect it
👍: 0 ⏩: 1
This has been very very useful thank you!!
👍: 0 ⏩: 1
I've seen many deviants display thumbnails of deviations in the descriptions of images they submit.
Is there a different code to use when doing that, or am I just using the above coding wrong?
👍: 0 ⏩: 1
It is the :thumb0000000: code you see on the right hand side! 
👍: 0 ⏩: 1
And if you want to link a Sta.sh pic?
👍: 0 ⏩: 1
Then I would right click the sta.sh pic, and copy image URL.
Then I will type in
Done.
If you want it clickable, then you need to go:
I hope that helps you!
👍: 0 ⏩: 1
I read something about specific browsers bugging it up?
I keep getting this.
fc06.deviantart.net/fs71/f/201…
I'm using Chrome, so could that be the issue?
👍: 0 ⏩: 1
You need to put the link in ""
👍: 0 ⏩: 1
fc06.deviantart.net/fs71/f/201… ">
I must be screwing it up somehow...
👍: 0 ⏩: 1
This same thing is happening to me. D:
👍: 0 ⏩: 1
Still no word on how to fix it?
👍: 0 ⏩: 1
For some reason this just seems to be happening on Firefox- I switched to Chrome and was able to embed images normally! It's weird.
👍: 0 ⏩: 1
Well I'm on Chrome and get get it to work.
👍: 0 ⏩: 0
OMG THANK YOU!!!! I'VE BEEN TRYING SINCE LAST NIGHT TO GET GIFS ON MY PAGE ASDFGHJKL!!! You deserve a 
👍: 0 ⏩: 1
Haha, glad it helped you!
And thanks. <3
👍: 0 ⏩: 1
The image embedding isn't working on my page ;o; I keep tryna enter this image and it shows up as a little error thumbnail ;o;
👍: 0 ⏩: 1
yeah asdfasdf. The same one I used a while back. It just shows a little error thing ;o;
👍: 0 ⏩: 1
that's really strange. The HTML is correct. Try switching browsers?
👍: 0 ⏩: 1
I switched browsers and it worked uvu! thanks.
👍: 0 ⏩: 1
I'm glad you found it helpful!
👍: 0 ⏩: 0
How would I link this deviation (a birthday gift) to my page on a custom box to feature it? I cant seem to work with this image [link]
[link]
thanks so much!
👍: 0 ⏩: 1
Copy and Paste this in: :thumb375219427: or :bigthumb375219427: if you want it larger. Want it larger still?
If yes, I'll tell you how! c:
👍: 0 ⏩: 0
Thank you for this great tutorial 
👍: 0 ⏩: 1
Now this is something to remember, thanks
👍: 0 ⏩: 1
So do I! 
👍: 0 ⏩: 0
I never knew about big thumb! Thanks!
👍: 0 ⏩: 2
Would you happen to know the code for being able to have a box pop up on an image without it being clickable? For example, let's say you have a ...pixel doll! Instead of putting a © credit at the bottom with same text, you can have a box pop up with the name and such.
I've seen those around. Do you know the code?
👍: 0 ⏩: 1
Are you talking about the ones in journals?
Well, that requires knowledge of CSS and the .shadowholder properties.
It's a bit complex.
However, if you'd like, I can refer you to a number of tutorials! c:
👍: 0 ⏩: 1
<= Prev | | Next =>