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:
 
:iconunkoneo:
unkoneo Featured By Owner Edited 3 days ago
Is there any way to get it to overlap the left or right side of the box along with the bottom? (Just the left or right is fine too.) I'd like to get the image to overlap the text box on my page similarly to the way it does on my tumblr [ inkoid.tumblr.com/ ] but whenever I try to alter the width it will move below the text staying within the box :^( I'm stuck with squashed Seto
Reply
:iconfrosbie:
frosbie Featured By Owner Mar 23, 2015  Student Digital Artist
how do you make it float on top of the content-holder?
Reply
:iconaleksthepotato:
AleksThePotato Featured By Owner Mar 21, 2015  Student Digital Artist
Does it work for gifs too..?? ;w;
Reply
:iconcheraiu:
Cheraiu Featured By Owner Mar 22, 2015  New member  Digital Artist
yes!
Reply
:iconaleksthepotato:
AleksThePotato Featured By Owner Mar 22, 2015  Student Digital Artist
Thanks!
Reply
:iconcaptain-starburst:
Captain-Starburst Featured By Owner Mar 8, 2015  Student General Artist
i tried using this code, and i have made this work before, but when i tried to put this over the box it just splat it out, inside of the box, instead of outside.
any help? ??
Reply
:iconellielza:
ellielza Featured By Owner Mar 6, 2015  Hobbyist Digital Artist
Does the image need to be a specific size? How can you adjust how big it is?
Reply
:iconpoke-chann:
Poke-chann Featured By Owner Mar 2, 2015  Hobbyist Artist
I need help, please? it comes up as a normal thingy, as though i just put in the image code
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 3, 2015   Writer
What code did you use exactly?
Reply
:iconallykai:
Allykai Featured By Owner Mar 1, 2015
I feel like I come off as clueless, but the image just appears inside the custom box, below some text and above the other, instead of floating on it and the background. Anybody able to help?
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 3, 2015   Writer
Can you paste the code that you used exactly?
Reply
:iconallykai:
Allykai Featured By Owner Edited Mar 4, 2015
<d iv class="popup2-moremenu" >< div class="floaty-boat" >< img src="fc02.deviantart.net/fs70/f/201…"/ ></ div >

< div class="ccomment ccomment-featured" >< div class="ch-ctrl" >< div class="ch-ctrl cc-in" align="center" >< div class="popup2-moremenu" >< div class="floaty-boat" > < img src=""/ >< /div>
< br > Some text here.
< br>

 < b >< font size="3" >My title < /font > < /b >
< br >
My Text here (It was super long so I got rid of it, but if you need it all, I can supply it.)
text text text text < img src="DIRECT-IMAGE-URL" align="right"/ > text text text
</ div ></ div ></ div ></ div >< br >< br >

EDIT: My apologies! I didn't think that stuff worked in comments!
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Edited Mar 4, 2015   Writer
The image linked above is the background image, yes?
What image are you using in place of "DIRECT-IMAGE-URL"?

Regardless, try this (take out the space at the opening of each bracket):

< div class="popup2-moremenu">< div class="floaty-boat">

< img src="background image URL goes here"/>< /div>< /div>< div class="gr-box gr-genericbox">< br>
< span class="smbutton-purple popup2-clear"> (This is specific for white text; remove if you want a black text. If you remove this, be sure to remove the closing span tag at the end of the code.)
(Majority of text goes here - please make sure there aren't any broken < tags or > tags (missing the one on the other end) as that will affect the code.)
< img src="image URL you want to float goes here" align="right"/>
(remaining text goes here)
</ span>< /div>


Edit:
or - 

< div class="popup2-moremenu">< div class="floaty-boat">

< img src=" Background image URL ">< /div>< /div>
< div align="center" class="ch-ctrl indifade">< br>
< div align="left" class="ppp">
I'm a block of random text intended for use in order for the owner of this page to be able to see if the CSS code is working properly. If you see me, that's because they pushed the "Install" button, < img src=" Floating image URL " align="right"/> and they didn't mean to so just ignore me. They'll delete me soon.< /div>< /div>
Reply
:iconallykai:
Allykai Featured By Owner Edited Mar 5, 2015
That's working quite well for me, thanks! I hate to bother you further, but do you know how to make that box white too?
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 5, 2015   Writer
Did you use the first code, or the second code? The second code should be automatically white text on a blue box.

For the first code, this part:
< span class="smbutton-purple popup2-clear">

is what provides the white text.
Reply
:iconallykai:
Allykai Featured By Owner Mar 5, 2015
My bad, I meant for it to have a neutral-colored (or even white) custom box, not the text. ^^;
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 5, 2015   Writer
No worries. :)

Used this tutorial to help find the right code:

< div class="altview h">< div class="pp">

So if you still wanted the white text, it would look like this:

< div class="popup2-moremenu">< div class="floaty-boat">
< br>< img src=" Background image URL ">< /div>< /div>
< div class="altview h">< div class="pp">< br>
< span class="smbutton-purple popup2-clear">
I'm a block of random text intended for use in order for the owner of this page to be able to see if the CSS code is working properly.If you see me, that's because they pushed the "Install" button, < img src=" floating image URL " align="right"/> and they didn't mean to so just ignore me. They'll delete me soon. < /span>< /div>< /div>< /div>< /div>

If you want black text, just remove the < span > sections:

< div class="popup2-moremenu">< div class="floaty-boat">
< br>< img src=" Background image URL ">< /div>< /div>
< div class="altview h">< div class="pp">< br>
I'm a block of random text intended for use in order for the owner of this page to be able to see if the CSS code is working properly.If you see me, that's because they pushed the "Install" button, < img src=" floating image URL " align="right"/> and they didn't mean to so just ignore me. They'll delete me soon. < /div>< /div>< /div>< /div>

Again, take out the spaces after the opening "<".

Hope that helps!
Reply
:iconhearsegurl:
HearseGurl Featured By Owner Edited Mar 1, 2015   Photographer
I was wondering how to get it exactly like this but in the almost black colour? Is there coding for black or a different link?
Thanks
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 3, 2015   Writer
They've coded black boxes here: Black Content-holder boxes by CypherVisor  :D
Reply
:iconhearsegurl:
HearseGurl Featured By Owner Mar 3, 2015   Photographer
I couldn't get them to work, I must be missing something, but I got help from a friend either way. Thanks For Your Reply. :hug:
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 4, 2015   Writer
Okay - glad you got something worked out with your friend helping you. :)
Reply
:iconhearsegurl:
HearseGurl Featured By Owner Mar 4, 2015   Photographer
:D
Reply
:iconchemax3x:
CHEMAX3X Featured By Owner Feb 27, 2015  Hobbyist Artisan Crafter
Hello, first of all thanks for this tuto, it's really helpful =D, i have a question, can i put the image at the top of the div and in the center ? thanks in advance =D
Reply
:iconstickfreeks:
StickFreeks Featured By Owner Feb 24, 2015  Professional General Artist
Is there a way to get multiple images to float in a horizontal sequence? Like:

Image 1 Image 2 Image 3

Not:
Image1
Image2
Image3

I'm trying to hyperlink it to different folder galleries and didn't really find any tutorials on the subject other than yours on sequencing buttons horizontally, which didn't work with the image float code. ^-^'
Reply
:iconthathackedjukebox:
THAThackedJUKEbox Featured By Owner Feb 17, 2015  Hobbyist Digital Artist
how do you get it to work for journals?
Reply
:iconmango-candy:
Mango-Candy Featured By Owner Feb 13, 2015  Hobbyist Digital Artist
Is there a way to make an image float above another image?
Reply
:iconsheeppoops:
SheepPoops Featured By Owner Jan 30, 2015  Student Digital Artist
I just cant get this to work no matter how hard I try. D:
Reply
:icontemeraire-sama:
Temeraire-sama Featured By Owner Jan 31, 2015  Hobbyist General Artist
psst do you still need help with it?
Reply
:iconsheeppoops:
SheepPoops Featured By Owner Jan 31, 2015  Student Digital Artist
I sorta figured it out, but yeah kinda.
I can never get the image to float above like it does in the tutorial ><
Reply
:icontemeraire-sama:
Temeraire-sama Featured By Owner Jan 31, 2015  Hobbyist General Artist
i just had a look at your profile :3
is the image supposed to left or right?
and; it always needs to be at the very end of the custom box text :3
Reply
:iconsheeppoops:
SheepPoops Featured By Owner Jan 31, 2015  Student Digital Artist
OH it has to be at the end?
I tried that but it wouldnt hover ;;u;;
Does it need to be before </ div> or after all the coding?
I think when I put it after coding it dissappears though.

Also, Does the image need to be a certain size?
I feel like maybe its too small and so it doesnt hover much.
Reply
:icontemeraire-sama:
Temeraire-sama Featured By Owner Jan 31, 2015  Hobbyist General Artist
i would give it-just in case- a proper size :3
you can use it eg in your stash-
and not after the div, then it'd be just normally below the text c:

when you have ..uhm a text off:
"Wie liegt im MondenlichteBegraben nun die Welt;
Wie selig ist der Friede, Der sie umfangen hält.
Die Winde müssen schweigen, (around here the code)So sanft ist dieser Schein;
Sie säuseln nur und weben und schlafen endlich ein."
Reply
:iconsheeppoops:
SheepPoops Featured By Owner Jan 31, 2015  Student Digital Artist
Maybe its because I'm not using a proper size then.. hmmm, Ill definitely have to figure out what size works!
Reply
:icontemeraire-sama:
Temeraire-sama Featured By Owner Jan 31, 2015  Hobbyist General Artist
okay c:
if you have any more problems, feel free to contact me xP
Reply
(1 Reply)
:iconcrimson-kaizer:
Crimson-Kaizer Featured By Owner Jan 25, 2015  Hobbyist Writer
I don't understand.
Reply
:iconutoran:
utoran Featured By Owner Jan 22, 2015  Student Traditional Artist
nice
Reply
:iconmauuchi:
mauuchi Featured By Owner Jan 21, 2015
Hii! Sorry if this's been answered before, but, does it work without custom box? I'm trying and the image just stays under the text ;w; thanks!
Reply
:iconawkward-lllusl0n:
Awkward-lLLUSl0N Featured By Owner Feb 22, 2015  Hobbyist General Artist
If you still need an answer, the align code should work without custom boxes, since I've used it on some of my roleplay accounts before and they turned out exactly how I wanted them.
Reply
:iconcarbon-vanilla:
Carbon-Vanilla Featured By Owner Jan 21, 2015  Hobbyist General Artist
Oooh that is slick! :lmao:
Reply
:iconfishy-nugget:
Fishy-Nugget Featured By Owner Jan 15, 2015  Hobbyist Digital Artist
it doesnt work with this box White Content-Holder Boxes v2 by CypherVisor  :c Help.
Reply
:iconowlce:
owlce Featured By Owner Jan 20, 2015  Hobbyist Digital Artist
I've got that problem too D: 
Reply
:iconfishy-nugget:
Fishy-Nugget Featured By Owner Jan 20, 2015  Hobbyist Digital Artist
:c yeh
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jan 16, 2015
Is it? I did not try it.
Reply
:iconfishy-nugget:
Fishy-Nugget Featured By Owner Jan 20, 2015  Hobbyist Digital Artist
could you help me? D:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jan 21, 2015
Some of the content-holder boxes do not allow images to float. Try with another code and see if that works.
Reply
:iconmasterploxy:
MasterPloxy Featured By Owner Jan 11, 2015  Hobbyist Artist
Is there a way to move the image in a specific location? or is it really just Left, Center, & Right?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jan 16, 2015
You can just place left or right.
Reply
:iconmasterploxy:
MasterPloxy Featured By Owner Jan 16, 2015  Hobbyist Artist
nu! nu! like in a specific location...let's say i want to move a png image a little bit to the right of the left alignment, do i have to insert a tag that makes invisible spaces n stuff?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jan 21, 2015
Unfortunately you can't do that. :(
Reply
:iconmasterploxy:
MasterPloxy Featured By Owner Jan 21, 2015  Hobbyist Artist
Dun DUn DUNNNNNNN
Reply
Add a Comment:
 
×




Details

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

Stats

Views
61,271 (127 today)
Favourites
4,306 (who?)
Comments
769
×