Shop Mobile More Submit  Join Login
Deviation-box background tutorial by CypherVisor Deviation-box background tutorial by CypherVisor

»»»»»»»»»»»»»»»»»»»»»»»»»»» 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:
Custom-box Background Tutorial by CypherVisor

For deviantID-box widget:
deviantID widget box customization tutorial by CypherVisor




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 :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

Add a Comment:
 
:iconcarijet96:
carijet96 Featured By Owner Jun 28, 2015  Hobbyist General Artist
what am i gonna do when de deviation is to big?
not the background. when im doing it like the toutorial the whole thing is filled with my deviation and its cut on the edges. 
id be glad for some help.
Reply
:iconlinxthepowerful:
LINXthepowerful Featured By Owner Jun 7, 2015  Hobbyist General Artist
It just shows links to the  pictures:  Screen by LINXthepowerful

Is this how its supposed to look like?: Screen by LINXthepowerful
Reply
:iconprincess-marina-chan:
I fully figured out how to make it so it doesn't show up small or too big but just wondering on some advice on how to make it so the image doesn't look blurry on my main page?
Reply
:iconcaptricosakara:
CaptRicoSakara Featured By Owner May 12, 2015  Hobbyist Digital Artist
How do you change the Text color below the feature image?
Reply
:iconlaghrian:
Laghrian Featured By Owner Edited May 7, 2015  Student Traditional Artist
What if my daily devianton is menu? I mean menu with buttons, cant put img url cause I dont have it. How to do it?
Reply
:iconmarylandlovely:
MarylandLovely Featured By Owner Apr 30, 2015  Hobbyist General Artist
You make really great tutorials. Thanks so much!
Reply
:iconterra-bites:
Terra-Bites Featured By Owner Apr 28, 2015  Hobbyist General Artist
I was hoping there'd be a way to easily install a background onto the predesigned widgets.
That's alright. I'll just have to shove everything onto a massive custom box.
Reply
:iconpeejebus:
PeeJebus Featured By Owner Apr 22, 2015  Hobbyist General Artist
its not workign for me
Reply
:iconlivingbut-not-really:
livingbut-not-really Featured By Owner Apr 14, 2015  Hobbyist Writer
I still don't understand a thing about how this works...
Reply
:iconxxomgsouniquexx:
XxOMGsoUniquexX Featured By Owner Apr 8, 2015  Student General Artist
My thumbnail shows a broken link o.0
Reply
:iconsevencorridors:
SevenCorridors Featured By Owner Mar 7, 2015  Hobbyist General Artist
My thumbnail got oversized :o (Eek) Any solution to this problem ?
Reply
:iconmanyminigamer:
ManyMiniGamer Featured By Owner Mar 29, 2015  Hobbyist General Artist
it's maybe the size of your picture. They take the full size of your picture and put it that way.
Reply
:iconwreck-itralph:
Wreck-ItRalph Featured By Owner Feb 23, 2015  Hobbyist Traditional Artist
It doesn't fully work anymore and caused by dA admins.

Admin Response by Wreck-ItRalph
Reply
:iconorangeponi:
OrangePoni Featured By Owner Feb 23, 2015  Hobbyist Digital Artist
I think the issues with the image overflowing the box can be fixed by adding style="max-width: 100%" after class="floaty-boat" (inside the div element)
Reply
:iconidoodlechibis:
IdoodleChibis Featured By Owner Mar 28, 2015  Hobbyist General Artist
I tried what you said & it still shows it to big, Did you make it its own like <div style="max-width: 100%" or like this <div class="floaty-boat" style="max-width: 100%"
I tried both and i still cant get it to work ; A ;
Reply
:iconluna-nightfire:
Luna-Nightfire Featured By Owner Feb 17, 2015  Hobbyist General Artist
the box for this is too small to fit the image and description could you possibly tell me how to fix this problem in extending the main box?
Reply
:iconorangeponi:
OrangePoni Featured By Owner Feb 23, 2015  Hobbyist Digital Artist
Check out the comment I just left above; leaving a reply on here so that you get a notification and are able to see it.
Reply
:iconno-pe:
No-pe Featured By Owner Feb 16, 2015  Hobbyist Artist
i have a problem , it didn't work . 
Reply
:icontasha9090:
Tasha9090 Featured By Owner Edited Feb 15, 2015  Hobbyist General Artist
I had a problem with my picture size issue being to big but then after trying to figure out a solution i saw to put width="500" in between img and src, it helped
Reply
:iconcrocodilesque:
Crocodilesque Featured By Owner May 31, 2015
Thanks so much!
Reply
:icontasha9090:
Tasha9090 Featured By Owner Jun 10, 2015  Hobbyist General Artist
your welcome
Reply
:iconnatanthe6th:
NatanThe6th Featured By Owner Apr 25, 2015  Hobbyist General Artist
yep, works for me as well! thx!
Reply
:icontasha9090:
Tasha9090 Featured By Owner May 7, 2015  Hobbyist General Artist
Awesome!
Reply
:iconlucynickbakura:
LucyNickBakura Featured By Owner Mar 25, 2015
thank you so much :hug: it works!
Reply
:icontasha9090:
Tasha9090 Featured By Owner Mar 25, 2015  Hobbyist General Artist
Your welcome ^_^
Reply
:iconbexxasaurus:
bexxasaurus Featured By Owner Feb 12, 2015  Hobbyist General Artist
I'm using the code that's not supposed to stretch the image, but my featured art is being stretched to fit on the entire widget.. any ideas why? :(
Reply
:icondroidigan:
Droidigan Featured By Owner Feb 11, 2015  Student General Artist
But is there a way for your "newest deviations" box to have the deviations atop the background, so you don't have to edit your box everytime you upload something?
Reply
:iconrippleart:
RippleArt Featured By Owner Edited Feb 16, 2015
No :(
Reply
:iconsnow-fangs:
Snow-Fangs Featured By Owner Feb 1, 2015  Student Digital Artist
Doesn't work for me
Reply
:iconswag-qu33n:
swag-QU33N Featured By Owner Jan 29, 2015  Student Digital Artist
How do we change file size?
Reply
:iconsonikkudrawings:
Sonikkudrawings Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
Something to add:
<div class="commentcount"><a href="DEVIATION URL#comments"><span class="iconcommentsstats"></span>X Comments</a></div>
You have to mannually update the number, though.
Reply
:iconliger-inuzuka:
Liger-Inuzuka Featured By Owner Jan 19, 2015  Professional Traditional Artist
Good day
We are seeking reworking our profile visual design and have come across your many tutorials, may we say they are fantastic and resourceful. Albeit we have a single inquiry; after searching through some of your tutorials one thing we can not locate is a tutorial of how you created custom headers for your widgets on your front page. Is there an established tutorial we failed to find, if not could you explain please how you created those custom headers?

Thank you
Reply
:iconpenguinlove2506:
penguinlove2506 Featured By Owner Jan 17, 2015  Hobbyist General Artist
Well everything is fine with the picture and all. But the featured deviation no longer shows up, it just shows the icon for a broken link. I think I broke something.
Reply
:iconkitopia:
kitopia Featured By Owner Jan 17, 2015  Hobbyist Filmographer
Copy and paste
if your image is too over sized. Where your image url is, after the " put

width="ANY WIDTH" height="ANY HEIGHT"> to choose it to your wants
Reply
:iconyoshi-kitten:
Yoshi-Kitten Featured By Owner Feb 7, 2015
omg thank you this helped so much!
Reply
:iconrazska:
Razska Featured By Owner Jan 21, 2015  Hobbyist General Artist
This tip was perfect -- thank you so much!! This was the exact problem I was having :hug:
Reply
:iconabysmai:
Abysmai Featured By Owner Jan 18, 2015  Hobbyist General Artist
May I just inform you that you're absolutely amazing oh my goodness! Seriously, I couldn't figure out how to get the resizing to happen to save my life. 
Reply
:iconkitopia:
kitopia Featured By Owner Jan 18, 2015  Hobbyist Filmographer
ahhh thank you !!! : D just saw some people below confused and i thought id help! <3
Reply
:iconabysmai:
Abysmai Featured By Owner Jan 18, 2015  Hobbyist General Artist
Well I'm glad you did!! Yeah you've definitely saved HTML lives after this. :thumbsup:
Reply
:iconmaroonmaverick:
MaroonMaverick Featured By Owner Jan 7, 2015  Student General Artist
for my first try, it work!!! yay! but thing is that when I put a description on it, it doesn't appear, maybe because of the size of my deviation? help! 
Reply
:iconizayas-neko-nyan:
Izayas-Neko-nyan Featured By Owner Jan 6, 2015  Hobbyist Digital Artist
Thank you so much for this tutorial! :D

Could you make one for the "Newest Deviation" box background (The slideshow one)? Please :3
Reply
:iconashravan:
Ashravan Featured By Owner Edited Jan 4, 2015  Hobbyist Traditional Artist
It deforms the pic..O.o What did I wrong? :icondragonidleplz:  ashravan.deviantart.com/


Well; could it be because I've the picture AND a customized text, so 800x800 is too less? 

(That's why the pic is only a link, because there is no space anymore? O.o)

Would be really glad you know the answer :aww:
Reply
:iconkhaoticcuteness:
KhaoticCuteness Featured By Owner Dec 29, 2014  Student Artist
I'm so sorry bout this but could you please tell me what I did wrong and how to fix it? I would really appreciate it thank you khaoticcuteness.deviantart.com…
Reply
:iconcaptain-starburst:
Captain-Starburst Featured By Owner Dec 27, 2014  Student General Artist
So I have this problem, Where Whenever, I add in the picture, Its over sized, and doesnt fit...
But other then that it works..
Reply
:iconshiadesu:
shiadesu Featured By Owner Jan 1, 2015  Hobbyist Digital Artist
i have the same problem (oMo;
Reply
:iconelisexprincess:
elisexprincess Featured By Owner Dec 26, 2014
Please help ;d
Reply
:iconcrown-rachel:
crown-rachel Featured By Owner Dec 21, 2014  Hobbyist Digital Artist
all of my deviations from the image URL turn out too big and dont fit inside the custom box D: 
and if i use a deviation's thumbnail URL instead, the image is way too small.
i guessing this cant be fixed because of the original sizes of my deviations lol. i dunno. i tried to size it up the thumbnails in a journal and then copy that URL, but it just gave me the full original size.
hnnnng i just want a pretty profile xD
Reply
:icontheshiranja:
TheShiranja Featured By Owner Dec 7, 2014  Hobbyist Traditional Artist
I tried your tutorial here and I must say, it was my first time doing codes but I managed and even learned something new :D
Thanks very much for doing this.
However I used the Favourite Deviation widget to do this, but there is a huge space between the picture and the first box. I tried removing all breaks but I didn't change. What could cause this? (you'll see what I mean when you look on my profile)
Reply
:iconxxetienettexx:
xXEtienetteXx Featured By Owner Nov 10, 2014
To anyone who is having issues with their image being too big for the box:

Go to your desired deviation, hit the Edit button, and copy the URL from the thumbnail of the deviation.
This in a way, will 'resize' the image to a suitable standard.
Reply
Add a Comment:
 
×




Details

Submitted on
June 27, 2010
Image Size
1.1 MB
Resolution
900×4016
Link
Thumb
Embed

Stats

Views
241,005 (124 today)
Favourites
2,796 (who?)
Comments
1,465

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×