ShopDreamUp AI ArtDreamUp
Deviation Actions
Suggested Deviants
Suggested Collections
You Might Like…
Featured in Groups
Description
»»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««
Updated: 23-Feb-2014
How to use ?
Just copy the source code(s) below and paste it in your Featured Deviation widget in your profile or group page.
Source Code:
<div class="popup2-moremenu"><br><div class="floaty-boat"><img align="center" src="BACKGROUND-URL"/><br></div></div><br><div class="popup2-moremenu"><br><div class="floaty-boat"><br><div align="center"><br><br><a href="DEVIATION-URL"><img src="DEVIATION-IMAGE-URL"/></a><br><br><br>DESCRIPTION TEXT HERE</div></div>
Code to stretch image (It works also as to repeat image ONLY FOR SOLID COLOR IMAGES though!) :
---------------------------------------------------------------------------------------------------------------------------------------------Insert the width and height in the <img> tag of the code as shown below:
<img width="YOUR-WIDTH-SIZE" height="YOUR-HEIGHT-SIZE" src="URL"/>
EXAMPLE:
<div class="popup2-moremenu"><br><div class="floaty-boat"><img align="center" width="1000" height="1600” src="BACKGROUND-URL"/><br></div></div><br><div class="popup2-moremenu"><br><div class="floaty-boat"><br><div align="center"><br><br><a href="DEVIATION-URL"><img src="DEVIATION-IMAGE-URL"/></a><br><br><br>DESCRIPTION TEXT HERE</div></div>
My background image link (the background that I've used for demo in this tutorial)
------------------------------------------------------------------------------------------------------------------
http://fc04.deviantart.net/fs70/f/2014/053/8/a/deviationboxdemo_by_cyphervisor-d77jeon.jpg
Other tutorials
For custom-box widget:
For deviantID-box widget:
Want to customize your profile page?
Check all my free resources + tutorials: [LINK]
Having any doubt with Custombox or Journal CSS? Please read this F.A.Q. + Tips n Tricks
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 send me a note
Image size
900x4016px 1.11 MB
Comments1581
Join the community to add your comment. Already a deviant? Log In
I found a solution for everyone who didn't get it to work it properly. You have to stretch out both the bg image as well as the deviation to fit in the box. SO:
1. Copy the code from this tutorial.
2. Follow the instructions on how to stretch out the bg image. Replace the original <img code with this code
You HAVE TO keep in mind the original image resolution. Check it down in the Details. My original image was 1000x647 and how I made it fit in to the box was scale it by 50%. Now I put 500 x 323 to the image code width and height. ALSO THE CODE MUST BE REPLACED, DO NOT KEEP THE ORIGINAL <IMG CODE IN THERE!!
I'm not sure if I explained it properly... ask if you didn't get it hehe
1. Copy the code from this tutorial.
2. Follow the instructions on how to stretch out the bg image. Replace the original <img code with this code
<img width="YOUR-WIDTH-SIZE" height="YOUR-HEIGHT-SIZE" src="URL"/>
For me putting width: 900 and height: 1000 worked just fine.
3. Now you have to do the same to the actual deviation img code. Otherwise the deviation will be too huge and it will get cut out. Replace the img code with the <img width="YOUR-WIDTH-SIZE" height="YOUR-HEIGHT-SIZE" src="URL"/> code.You HAVE TO keep in mind the original image resolution. Check it down in the Details. My original image was 1000x647 and how I made it fit in to the box was scale it by 50%. Now I put 500 x 323 to the image code width and height. ALSO THE CODE MUST BE REPLACED, DO NOT KEEP THE ORIGINAL <IMG CODE IN THERE!!
I'm not sure if I explained it properly... ask if you didn't get it hehe