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:
 
:iconaentha:
Aentha Featured By Owner 2 days ago  Student Artist
Thank you for the tutorial! :heart:
Reply
:iconpoke-chann:
Poke-chann Featured By Owner Apr 2, 2015  Hobbyist Artist
nvm i got it
Reply
:iconpoke-chann:
Poke-chann Featured By Owner Apr 2, 2015  Hobbyist Artist
i'm very confused...

is there any chance that i could send you the current code and the link to the page doll and you could send me the correct code back...?
Reply
:iconunkoneo:
unkoneo Featured By Owner Edited Mar 28, 2015
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
:iconroguemudblood:
RogueMudblood Featured By Owner Apr 5, 2015   Writer
I'm not sure where on your profile you're wanting to implement the code, but something like this:


< div class="popup2-moremenu">< div class="floaty-boat">< br>< img src="orig12.deviantart.net/2bb9/f/2…">< /div>< /div>< br>< div align="center" class="gr-box gr-genericbox">< div align="left" class="ppp">< span class="smbutton-purple popup2-clear">I'm saving up for a MYO Cinna slot //i'll buy it when they're open. vwv and i would greatly < img src="33.media.tumblr.com/5a7b26a0ed…" align="left" width="85%"> appreciate anything!! <33
< br>
Current amount saved: 632:points:
points needed: 2,368:points:
< br>
< br>
< br>
want to commission me? < a href="sta.sh/0alt153timo">click here!< /a>
want to donate? < a href="captain-starburst.deviantart.c…">click here!< /a>
hhhhh thank you so soso much!!
< /span>< /div>< /div>< /div>

which results in this: Capnstarburst by RogueMudblood  ?
Reply
:iconcaptain-starburst:
Captain-Starburst Featured By Owner Apr 5, 2015  Student General Artist
ahh i got it to work before i had redone my page. nwn
but thank you! it can help really soon actually because i cannot get happy with my page and re-do it every few weeks and im starting to not like my page anymore.
thanks!! ;v;;
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Apr 5, 2015   Writer
No worries. :D
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
:iconroguemudblood:
RogueMudblood Featured By Owner Apr 5, 2015   Writer
< img src="your img url" width="%desired" height="%desired">
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
:iconstraythemushroomkid:
StrayTheMushroomKid Featured By Owner Edited Apr 5, 2015  Student General Artist
I have tried both but it just stretches the box to fit the picture in...?

Edit: I have been trying different codes for almost 2 hours. None of them work. The picture just stretches the box to fit.
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Apr 5, 2015   Writer
Can you copy the code you're using so I can look at it?
Reply
:iconstraythemushroomkid:
StrayTheMushroomKid Featured By Owner Apr 5, 2015  Student General Artist
I'm trying to get it to work with this:


<*div class="cctextarea"><*div class="gr-body pp"><*div class="popup2-moremenu"><*div class="floaty-boat"><*br><*img src="fc09.deviantart.net/fs70/f/201…"/><*/div><*/div><*div class="gr-box gr-genericbox">
<h3 align="center">| Stray | 18 |  ♂ |  Finland | Aquarius |</h3>


<*img src="pre02.deviantart.net/492c/th/p…" align="right" width="275"/>


<*/div><*/div><*/div>


But tried it with lorem ipsum like this:

<*div class="cctextarea"><*div class="gr-body pp"><*div class="popup2-moremenu"><*div class="floaty-boat"><*br><*img src="fc09.deviantart.net/fs70/f/201…"/><*/div><*/div><*div class="gr-box gr-genericbox">
<h3 align="center">| Stray | 18 |  ♂ |  Finland | Aquarius |</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. <*img src="pre02.deviantart.net/492c/th/p…" align="right" width="275"/>Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.


<*/div><*/div><*/div>

You can see it on my page, how it just makes the box longer... xS
I'm so bad at coding stuff even tho I'm supposed to study it.  At least it's not this kind of thing ^__^"
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Edited Apr 5, 2015   Writer
Because of the height of this image, you're going to want to put more of your text after the image.

Here's what I used, and it does "float" but it's a narrow one because of the size of the image within the box, so it makes the text that can be displayed to the side relatively small.

< div class="cctextarea">< div class="gr-body pp">< div class="popup2-moremenu">< div class="floaty-boat">< br>< img src="fc09.deviantart.net/fs70/f/201…"/>< /div>< /div>< div class="gr-box gr-genericbox">
< h3 align="center">| Stray | 18 |  ♂ |  Finland | Aquarius |< /h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. < img src="pre02.deviantart.net/492c/th/p…" align="right" width="275">  Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.< /div>
Reply
(1 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
:iconmarqimoo:
marqimoo 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
Add a Comment:
 
×




Details

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

Stats

Views
63,201 (43 today)
Favourites
4,405 (who?)
Comments
787
×