HOME | DD
TheOutli3R — Kitsch's Extra-Wide Content Box Tutorial.
#customizationtutorial #customizable #customization #tutorial #customboxbackground
Published: 2017-03-12 04:21:49 +0000 UTC; Views: 3151; Favourites: 79; Downloads: 0
Redirect to original
Description
A tutorial made specifically for my extra-wide, multi-colored content boxes to make installation and customization super easy and stress-free! Fair warning - This code will only work for said boxes and cannot be used for anything else on this site.If you'd like to use them, head on over here and use the widget in the right-hand corner to download your assets and get started:
You can also download some great-looking custom widget backgrounds as well:
> CODE EXCERPTS FROM THE TUTORIAL FOR EASY COPY/PASTING <
STEP ONE
< div class="popup2-moremenu">< div class="floaty-boat">< br>< img height="" width="" align="center" src="BACKGROUND URL HERE">< /div>< /div>< br>< br>
< div class="popup2-moremenu">< div class="floaty-boat">< br>< br>< br>< br>< br>< img width="" height="" src="CUSTOM BOX URL HERE">< /div>< /div>
STEP TWO
< div class="gr-box gr-genericbox">< div class="pp" align="center">< p>< font face="YOUR FONT HERE" size="5">< b>YOUR TITLE HERE< /b>< /font>< /p>< hr>
< font face="YOUR FONT HERE" size="3">YOUR CONTENT HERE< /font>< br>< /div>
< br>< br>< br>< /div>
TO ADJUST HEIGHT OF CUSTOM BOX
< img width="458" height="YOUR VALUE HERE" src="CUSTOM BOX URL HERE">
TO ADJUST HEIGHT OF WIDGET
< div class="gr-box gr-genericbox">< div class="pp" align="center">< p>< font face="YOUR FONT HERE" size="5">< b>YOUR TITLE HERE< /b>< /font>< /p>< hr>
< font face="YOUR FONT HERE" size="3">YOUR CONTENT HERE< /font>< br>< /div>
< br>< br>< br>
< br>< br>< br>
< br>< br>< br>< /div>
If y'all have any questions or run into problems, pls ask in the comments! I'm super happy to help, and by asking publicly, you might help someone else out as well. (Also it's just nice to have a record for later FAQ's, y'know?)
Thank you for downloading, and pls enjoy!
Done in Adobe Ai cs6.
All assets © TheOutli3R
Related content
Comments: 11
Thank you a lot ! This was the most usefull tutorial out of 25 i've seen today !
👍: 0 ⏩: 1
Hey thank you !! Glad you found some use for it :]
👍: 0 ⏩: 1
Thank you ! I really appreciate the work you put into this !
👍: 0 ⏩: 0
Hey! So I have a question. Do you know how to make a content holder box more wider?
👍: 0 ⏩: 1
The current content boxes available on DeviantART cannot exceed their original size, that's why I've created this alternative tutorial.
Coupled with the P2U boxes linked in the description, you can use this tutorial to by-pass dA's code and make your content boxes larger, but you can't resize anything currently existing on this site, unfortunately. Their HTML won't allow for it.
👍: 0 ⏩: 0
Thank you so much for this tutorial and your premium backgrounds, looks really nice!!! , it was really helpfull to me, I fought with this in my profile for 2 hours more or less but finally I achieved it
I'd like to ask if you know how to change the color of the font, if you see in my profile there is a custom box called ❤ Testing box ❤ and the color of the font is dark, but Just in case I want to change to white (as an example) how can I do it?
and one more thing, do you know what fonts are allowed to use it here on deviantart?
👍: 0 ⏩: 1
Hey thank you so much! That's really kind of you to say, and I'm so happy you're enjoying my resources!
As for changing the font colors, here is a fantastic walkthrough listing all the options that dA allows. It's a bit limited, but there's still enough there to work with.
And as far as I know, dA will allow you to use any font that is web-safe, so long as you have it installed to your computer's fontbook. Now, the catch is that if you use something that not everyone else has, like Proxima Nova or Open Sans, your font won't show up for those who don't personally own and / or have that font installed, and your text will be substituted for Baskerville Regular (for some unknown reason).
Here is a small list of web-safe fonts that are guaranteed to work as they come pre-installed on most computers, but do feel free to branch out!
👍: 0 ⏩: 1
thank you so much for your help, you're really kind!!
👍: 0 ⏩: 1
Do you have to copy both the codes in step one? It's not working for me. .-.
I'm so confused D:*
👍: 0 ⏩: 1
In step one you'll need to copy this code:
< div class="popup2-moremenu">< div class="floaty-boat">< br>< img height="" width="" align="center" src="BACKGROUND URL HERE">< /div>< /div>< br>< br>
< div class="popup2-moremenu">< div class="floaty-boat">< br>< br>< br>< br>< br>< img width="" height="" src="CUSTOM BOX URL HERE">< /div>< /div>
and remember to remove any spaces you find so that the code works properly. Did you purchase the content boxes from the widget to the right? You'll need to do that in order to get the white box code you need. Once you do, you'll paste that code where it says CUSTOM BOX URL HERE in the above syntax.
👍: 0 ⏩: 0