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:
 
:iconzaralith:
Zaralith Featured By Owner Jan 30, 2016  Hobbyist Photographer
This is broken.
Reply
:iconelleart15:
elleart15 Featured By Owner Edited Jan 13, 2016  Student Traditional Artist
 I did all the steps and it still turned out strange
Screen shot 2016-01-14 at 12.29.23 AM by elleart15   
it the featured deviation.. It is so difficult it seems to customize your DA profile...
Reply
:iconkadkidd:
kadKIDD Featured By Owner Jan 15, 2016  Hobbyist Artist
it happened to me too >.=.< so much work for nothing 
Reply
:iconelleart15:
elleart15 Featured By Owner Jan 16, 2016  Student Traditional Artist
Yeah, it was alot of work...I kind of gave up of decorating my deviantart profile. Its whatever though.
Reply
:iconkadkidd:
kadKIDD Featured By Owner Jan 16, 2016  Hobbyist Artist
Yeah Me too .
Reply
:iconinkyshade:
InkyShade Featured By Owner Jan 10, 2016  Hobbyist Traditional Artist
My image is a little too big.
Can I somehow expand my box?
Reply
:iconcattbon:
CattBon Featured By Owner Jan 5, 2016  Student General Artist
Could I somehow change the color of the text?
Reply
:icontesurii:
Tesurii Featured By Owner Jan 1, 2016  Hobbyist General Artist
I'm going to guess this doesn't work if your featured deviation is a journal. (,,,,:
Reply
:iconkadkidd:
kadKIDD Featured By Owner Dec 28, 2015  Hobbyist Artist
it didnt work :(
Reply
:iconnikashia:
Nikashia Featured By Owner Dec 12, 2015  Hobbyist Digital Artist
What could I do with awidget with more pictures?
Reply
:iconmars714:
mars714 Featured By Owner Oct 23, 2015  Hobbyist General Artist
Hi! I'm trying to change my description text color from the default in the code to black to better go with my background image. I tried the fallowing code: < font color="black" > TEXT < /font > But it is not working. Any tips? Great tutorial BTW!
Reply
:iconmaxtron9000:
Maxtron9000 Featured By Owner Sep 29, 2015  Hobbyist Digital Artist
this is all mine does. sta.sh/0dpfl5dvokz
Reply
:iconmoeba-pop:
Moeba-pop Featured By Owner Sep 25, 2015  Hobbyist Traditional Artist
I did this for my newest deviation thing and that little core-star shows through? > . <
Reply
:iconaureliacharmcutiees:
AureliaCharmCutiees Featured By Owner Sep 10, 2015
Thanks for all of these tutorials, I am finally getting somewhere with my page!
Reply
:iconfernandori0s:
FernandoRi0s Featured By Owner Sep 9, 2015  Hobbyist Digital Artist
this for premium?
Reply
:icondyanova:
Dyanova Featured By Owner Dec 4, 2015  Hobbyist Digital Artist
yep. We can't use it
Reply
:iconryxiall:
Ryxiall Featured By Owner Aug 11, 2015  Professional Digital Artist
Tried several times and it did not work for me :( All I got was a the background image showing, but nothing else.. Is the code outdated?
Reply
:iconb-ubbiegum:
B-ubbIegum Featured By Owner Sep 1, 2015  Hobbyist Digital Artist
you don't have pm/cm
Reply
:iconryxiall:
Ryxiall Featured By Owner Sep 1, 2015  Professional Digital Artist
Oh thankyou but this was months ago when I did have one ^^
Reply
:iconb-ubbiegum:
B-ubbIegum Featured By Owner Sep 2, 2015  Hobbyist Digital Artist
oh, i see
sorry xD
Reply
:iconpolarbearsincapes:
polarbearsincapes Featured By Owner Edited Aug 10, 2015  Hobbyist General Artist
I have a quick question. Is there anyway to fix an image from not fitting into the box? The deviations that I'm attempting to use are too huge that they just don't fit into the box.
Nevermind. I figured it out
Reply
:iconhyperdashpony:
HyperDashPony Featured By Owner Aug 31, 2015  Professional Digital Artist
How did you do it? I've been having the same problem with both the background image and the image I want to present. It works fine in Google Chrome, but not in FireFox.
Reply
:iconpolarbearsincapes:
polarbearsincapes Featured By Owner Edited Sep 4, 2015  Hobbyist General Artist
Same code but in the second half of it I just added width="300"> so it came out like <img src="DEVIATION-IMAGE-URLwidth="300"><br11><br11><br11>DESCRIPTION TEXT HERE
No 11's obviously.  
I took it from a thumbnail preview tutorial he had. 
Hope this helps, man. 
Reply
:iconxkeitara:
xKeitara Featured By Owner Dec 26, 2015  Hobbyist Digital Artist
THIS is super helpful! Should be featured or added to the description if you ask me ^^
Reply
:iconpolarbearsincapes:
polarbearsincapes Featured By Owner Dec 29, 2015  Hobbyist General Artist
Thanks! I just thought others could use the help because I know I spent about 3 hours fiddling with the string of code.xD

-snake
Reply
:iconhyperdashpony:
HyperDashPony Featured By Owner Sep 7, 2015  Professional Digital Artist
Yeah it did, thanks.
Reply
:iconliliebiehlina3siste:
liliebiehlina3siste Featured By Owner Jul 27, 2015  Professional General Artist
Will you do something like this for the commission widget as well? :la: if that is possible...
Reply
: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
:iconkyasarin101:
Kyasarin101 Featured By Owner Jul 29, 2015  Hobbyist Digital Artist
It did that for me as well DX
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
:iconzarinari:
Zarinari Featured By Owner Jul 21, 2015  Hobbyist Writer
No, the reason why only links are showing up is because you're only putting in links.  You need to put the code in first and then insert the links into the code.

Copy and paste the code in the description, then put the links where the bolded words are.
Reply
:iconlinxthepowerful:
LINXthepowerful Featured By Owner Jul 21, 2015  Hobbyist General Artist
Oh, I figured it out.  
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  Professional Digital 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
:icongh0stmitts:
Gh0stmitts 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 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
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
Add a Comment:
 
×




Details

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

Stats

Views
283,963 (22 today)
Favourites
2,999 (who?)
Comments
1,496

License

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