Shop Mobile More Submit  Join Login
Content-Holder Box Floating Image Tutorial by CypherVisor Content-Holder Box Floating Image Tutorial by CypherVisor

Exclusively for Premium members and Super groups only


How to use ?


Just copy the source code(s) below and paste it in your Custombox module in your profile or group page.


SOURCE CODE:



<img src="DIRECT-IMAGE-URL" align="right"/>




Note: Change your image alignment from right to left by replacing the align="right" with align="left" in the above code.


Fella image link (the image that I've used for demo in this tutorial)
------------------------------------------------------------------------------------------------------------------
http://fc01.deviantart.net/fs70/f/2013/069/d/6/fella_by_cyphervisor-d5xk416.png


Background image that I've used for demo in this tutorial:
-----------------------------------------
Background link: [link]
by =TaNa-Jo


The blue content holder box






Other Content-holder boxes: [link]





Other tutorials


Custom Box background tutorial:


Custom background for DeviantID-box widget:


Custom background for New deviation-box widget:




Want to customize your profile more?


Check all my free resources + tutorials: [link]



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 :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.
Add a Comment:
 
:iconkeithdrawsthecrew:
KeithDrawsTheCrew Featured By Owner Jun 28, 2015  Hobbyist Artist
How can I copy the long html..? .3.
Reply
:iconruekuma:
ruekuma Featured By Owner Jun 27, 2015
i tried but the image is still inside the box
Reply
:iconpterocards:
Pterocards Featured By Owner Jun 21, 2015  Hobbyist Digital Artist
What's a good small canvas size for this type of image? Thanks!
Reply
:iconraykoopa:
RayKoopa Featured By Owner Jun 21, 2015
Can I float images outside the negate-box thingie? I realized it with padding right now, but that steals space (s. my profile) =3
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 17, 2015  New Deviant Hobbyist Digital Artist
for any one having a hard time please comment under this comment. i will try helping all i can.
Reply
:iconspacefvck:
spacefvck Featured By Owner Edited 2 days ago  Hobbyist Digital Artist
okay, say i wanna put the image NEXT to a box inside of hovering over it?
like if you look at my page you'll see a second box with links/music in it
i want to get the transparent box moved to the left, and a gif next to it 0: is that possible??

aa nevermind i figured it out!!
Reply
:iconclgarette:
ClGARETTE Featured By Owner 4 days ago
is there any way to move the image around instead of just inserting it to the right, left, or center? ;3;
Reply
:iconqaypanda:
qaypanda Featured By Owner 4 days ago  New Deviant Hobbyist Digital Artist
no sadly there is not. : -( you could try doing what is did on my page by putting a little extra space in the img to give it a little more spacing but there is a pretty high chance it wont work. : -( 
Reply
:iconclgarette:
ClGARETTE Featured By Owner 4 days ago
yea ive tried that already
thanks for the help.
Reply
:iconnoasdraws:
NoasDraws Featured By Owner 5 days ago  New Deviant Student General Artist
My gif doesn´t aperar on my profile, it apears this strange icon thingy. Any ideas?
Reply
:iconqaypanda:
qaypanda Featured By Owner 5 days ago  New Deviant Hobbyist Digital Artist
that means the url that you are using for the link is not working with the code! try uploading to to sta.sh on some other img hosting site!! or the file could be too big for the code :0
Reply
:iconnoasdraws:
NoasDraws Featured By Owner 5 days ago  New Deviant Student General Artist
I tried using another image but it was not on stash, at it didn't work either, I will try uploading it on stash
Reply
:iconxebiux:
Xebiux Featured By Owner Jun 28, 2015  Student Digital Artist
how can I fix this?
D by XinYiLx
how can I make it not cut off the progress bars?
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 28, 2015  New Deviant Hobbyist Digital Artist
try moving the floaty down below the bar! if not you may have to move the icon down with the bar. :0
Reply
:iconxebiux:
Xebiux Featured By Owner Jun 28, 2015  Student Digital Artist
D by XinYiLx
it still cuts it off ;n;
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 28, 2015  New Deviant Hobbyist Digital Artist
how about you try shrinking the img with:
< img src="PIC URL HERE" align="left" width="#" height="#"/ >
(remove the spaces) you have to change the "#"'s to a smaller height and width than the normal img size
Reply
:iconxebiux:
Xebiux Featured By Owner Jun 28, 2015  Student Digital Artist
ok i'll try that
Reply
:iconmelaniethemarkiplite:
MelanieTheMarkiplite Featured By Owner Jun 27, 2015  Hobbyist General Artist
Well, as you can see--- I did the thing, with the thing-- the code, and the picture wasn't where fella was, so I looked at the comments down below where you were helping others and used those codes and I--

 /southern accent/ i diddly darn fricked up partner ;w; 
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 27, 2015  New Deviant Hobbyist Digital Artist
oh what happened??
Reply
:iconmelaniethemarkiplite:
MelanieTheMarkiplite Featured By Owner Jun 27, 2015  Hobbyist General Artist
Nevermind I think I got it now XDD 
 It was all messed up before and I was like
//panics 
11659968 1461652650815648 1408492676 O by MelanieTheMarkiplite
Reply
:iconattackfox:
AttackFox Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
So I have everything working (thank you) but I want my image to show much larger than what it's showing.
Reply
:iconqaypanda:
qaypanda Featured By Owner Edited Jun 23, 2015  New Deviant Hobbyist Digital Artist
use this code! 
< img src="orig08.deviantart.net/fc9f/f/2…" align="left" width="500" height="500"/ >
(remove the spaces) you can change the width="500" and the height="500" if you so please (500x500 is really big so i recommenced you change the size to fit!)
Reply
:iconattackfox:
AttackFox Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
sta.sh/04rjn641pgy
sta.sh/01fymz13vy78

Alright, so I tried that and this is what I'm getting
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
okay try getting the size of the img then times that by two and put it in so it isn't all strechy! :0 
Reply
:iconattackfox:
AttackFox Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
So it's 900x600
so I put in 1800 and 1200 and it got even more stretchy D:
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
uhh, i'm not sure what to say other that messing about with it or maybe removing the align="left". :0
Reply
:iconattackfox:
AttackFox Featured By Owner Jun 24, 2015  New Deviant Hobbyist Digital Artist
I got some help. Thanks so much though!
Reply
(1 Reply)
:iconhooded-pigeon:
Hooded-Pigeon Featured By Owner Jun 22, 2015  Hobbyist Traditional Artist
Hi! I'm having a bit of trouble.
I'm doing exactly as it has stated above, except when I put in my image, it stays inside the little text box instead of floating like it should here. Do you know how to resolve this?
Thank you! :aww:
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 22, 2015  New Deviant Hobbyist Digital Artist
try this: 
< div class="pager-dark smbutton-curvy pp" >< div class="text" >< div class="h" align="justify" >< span class="smbutton-purple popup2-clear" >< img src="[URL CODE]" align="left"/ >All the text here.< /span >< /div >< /div >< /div > 
(remove the spaces) if you want to float to the left of the text! (extra: you can change the align="left" to right if you so please!) (WARNING: it will not work it the img is to small, it will appear the img is in the box)

and try this:
< div class="pager-dark smbutton-curvy pp" >< div class="text ">< div class="h" align="justify" >< span class="smbutton-purple popup2-clear" >A bit of your text here < img src="[URL CODE]" align="left"/ >All you text here.< /span >< /div >< /div >< /div >
(remove the spaces) if you want to to float down with a little text at the top! (extra: you can change the align="left" here too!) (WARNING: it will not work it you don't put a space after the first line of text [you may have to put more than one!])
Reply
:iconhooded-pigeon:
Hooded-Pigeon Featured By Owner Jun 22, 2015  Hobbyist Traditional Artist
All that pops up for me when I use these codes is a black button thing, not my image. Also, it doesn't span to the left. 'Tis a bit confusing. Sorry for burdening you with this! :shrug:
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 22, 2015  New Deviant Hobbyist Digital Artist
hmmm did you replace the "[URL CODE]" with your url?
if not can you link what it looks like for you? both the code and the result?
Reply
:iconhooded-pigeon:
Hooded-Pigeon Featured By Owner Jun 22, 2015  Hobbyist Traditional Artist
I did!
This is what happens for both codes.
Before
After
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 22, 2015  New Deviant Hobbyist Digital Artist
ah! you forgot to remove the spaces behind the <'s and in front of the >'s. 
Reply
:iconhooded-pigeon:
Hooded-Pigeon Featured By Owner Jun 22, 2015  Hobbyist Traditional Artist
Ah, I forgot to tell you that I edited that after I took the screenshot. Sorry! ^^;
Reply
(1 Reply)
:iconrosherudesu:
rosherudesu Featured By Owner Jun 20, 2015  Student Digital Artist
I've worked it out, sorry for bothering you ^^ <3
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 20, 2015  New Deviant Hobbyist Digital Artist
ah i'm glad you found what was wrong! :0
Reply
:iconrosherudesu:
rosherudesu Featured By Owner Jun 20, 2015  Student Digital Artist
hi, everytime I try and embed my image into the code, the image just stays inside the content holder box. It is very confusing 
Reply
:icondae-thalin:
Dae-Thalin Featured By Owner Jun 13, 2015  Hobbyist General Artist
Is it possible to somehow get a floaty imagine on the actual background image? I would like to have an image aligned to lower edge of my background without actually painting it on said background(that way it keeps being cut off depending on screen resolution).
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 17, 2015  New Deviant Hobbyist Digital Artist
sadly there is no way, from what i can see the code that i know that can do that is unavailable to use on deviantart so some reason. : -c 
Reply
:iconmekikko:
Mekikko Featured By Owner Jun 9, 2015  Hobbyist Digital Artist
It keeps overlapping the floating image with the background image. Help!
Reply
:iconswiftehpaws:
swiftehpaws Featured By Owner Jun 1, 2015  Hobbyist General Artist
I already have a custom box set up for myself, but I also have a background I drew for myself that's pretty important I get it all in, but I have a hard time finding ways to fill the space up without littering my page or putting pagedolls in, but I'd like to break it and just fill it up with these transparent pixels I made for myself so it shows everything, but the content box is only at the top. Is there a way to do that?
Reply
:iconkittyrocker:
Kittyrocker Featured By Owner May 19, 2015  Hobbyist Digital Artist
Does anyone know how to get the image to overlap multiple content holder boxes?
Reply
:iconsilversocks112:
Silversocks112 Featured By Owner May 9, 2015
how do you upload an animated pagedoll that someone else made to stash? :'0
Reply
:icondavphin:
davphin Featured By Owner May 28, 2015  Hobbyist Digital Artist
just right click and choose 'save as'. the file will probably end in '.gif' instead of '.png' or '.jpg' etc. when you upload it to sta.sh, the preview you see in the thumbnail will be blank. after clicking on it, the actual image will appear. : )
Reply
:iconsilversocks112:
Silversocks112 Featured By Owner May 28, 2015
oh okies! thank you! ^.^
Reply
:iconwhispering-starz:
Whispering-Starz Featured By Owner May 8, 2015  Hobbyist General Artist
Can someone help me?? I've gotten this to work before but for some reason, it's not working now and I need it to for a coding for my friend's profile. Here's the whole box code I'm using and a screenshot of the box itself too.

Code
< div class="popup2-moremenu">< div class="floaty-boat">< img src="orig11.deviantart.net/0c6c/f/2…" />< /div>< /div>< div class="gr-box">








< acronym title="art (c) Finchwing"><img src="fc08.deviantart.net/fs70/i/201…">< /acronym>

< div class="ccomment ccomment-featured">< div class="ch-ctrl cc-in" align="center">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 < img src="orig11.deviantart.net/1a6d/f/2…" align="right"/>electronic typesetting, remaining essentially unchanged.< /div>< /div>< /div>


Help by Whispering-Starz   There's supposed to be a huge space in the code so that the image of the character that comes before the white box doesn't overlap the birds on the bg image
Reply
Add a Comment:
 
×




Details

Submitted on
March 10, 2013
Image Size
923 KB
Resolution
800×2800
Link
Thumb
Embed

Stats

Views
71,742 (61 today)
Favourites
4,863 (who?)
Comments
852
×