HOME | DD

SparkLum — Custom Boxes Tips and Tricks
Published: 2010-11-29 06:24:05 +0000 UTC; Views: 7120; Favourites: 158; Downloads: 0
Redirect to original
Description body div#devskin0 hr { }

Written by Nironan12

You can see a preview of all custom user boxes here here !

How to Make a Sticky Bar


This tutorial applies only to this custom user box:


What this tutorial will do is stick your green/red bar to the top of your widget.


Example



NOTE: This will not work in the deviantID widget unless you have no deviantID selected.

Copy and paste the following code into the module you wish to apply the code to:



PASTE YOUR BAR CODE HERE
THIS IS WHERE YOUR CONTENT WILL GO

And we're done! Just modify the bolded code with your content.

How to Make Linkless Buttons


This tutorial applies only to these custom user boxes:


You know what a link (or hyperlink) is right? Well, these button have a place for hyperlinks. This tutorial removes them in case you don't have or don't want a link.

In each of those custom user box codes, you will find something that should look like this:
Regular Button
Take out the href="" part, and it should look like this:

Regular Button
And there we have it! These buttons will keep you stationary should you click one them.

How to Make No-Subtitle Boxes


This tutorial applies only to these custom user boxes:


Those boxes have a placeholder for subtitles, but what if you have nothing to put? This tutorial will remove the subtitle placeholder if you don't have or don't want a subtitle.


Example


First, remove this from the code:


SUBTITLE HERE
After you remove that, locate the following in the code:


And change it to the following:


Now you only have a title, which is now larger to fit the empty space where the subtitle was.

How to Add Padding


This tutorial applies only to these custom user boxes:


Do you want your boxes to have more breathing room? This tutorial will increase the space between your content and the edges of the box.

First locate the following in the code


Do you see the part where is says pp? This creates padding. You can only have one to four p's. Here's a basic list:
  • p - Not very much padding.
  • pp - Default padding. Medium.
  • ppp - A large but good amount of padding in most cases.
  • pppp - Maximum padding. High.


How to Customize User Box Icons


This tutorial applies only to these custom user boxes:

Note! I highly suggest you don't alter the icons of the Warning Box and Group Box because they will lose their authenticity.

This tutorial has actually already been done by CypherVisor !



How to Make Any Button Disabled


This tutorial applies only to these custom user boxes:


There is a special regular button that is disabled. It's just slightly transparent. If you want to, for example, make your green button look disabled, find this in the code:
Green Button!
And add disabledbuttonafter the other content in the class element:
Green Button!
For the big buttons, put it in the class element of the a tag, not the span tag. Like so:
Big Purple Button!

Related content
Comments: 16

alexlovedogz [2014-02-16 03:43:46 +0000 UTC]

Do u know how to make a custom backround wider so it fills the whole custom box space?

👍: 0 ⏩: 0

hyoori [2013-08-07 16:23:08 +0000 UTC]

I wuv you

👍: 0 ⏩: 0

tansyuduri [2013-06-07 16:54:26 +0000 UTC]

erm. how about making a background repeat?

👍: 0 ⏩: 0

PitayaArt [2012-08-12 02:46:46 +0000 UTC]

this is confusen

👍: 0 ⏩: 0

Kat-Skittychu [2012-03-05 22:51:36 +0000 UTC]

I've got a question, I want to change my font color but its not working.. and I want to keep my background.. I've seen some boxes that my friends are using that the background is one thing and the center is where you can see all the info..

I'd like to use one like that but cannot find info on where the html can be found for it.

👍: 0 ⏩: 1

DUSKvsDAWN In reply to Kat-Skittychu [2013-03-21 19:59:29 +0000 UTC]

font color cant be changed on this site, sorry.

👍: 0 ⏩: 0

meeshmoose [2012-01-07 17:43:26 +0000 UTC]

Is there a way to reduce padding? I have seen it on a deviant's gallery.

👍: 0 ⏩: 0

woodsybirds [2011-10-01 17:35:30 +0000 UTC]

How do we give the custom box a background?

👍: 0 ⏩: 0

3lectricBlu3Daw9 [2011-07-11 16:03:18 +0000 UTC]

is there way we change the font colors???

👍: 0 ⏩: 0

Nironan12 [2011-07-09 16:08:22 +0000 UTC]

It lives!

👍: 0 ⏩: 0

MoUnTaInDeWmE [2010-11-29 16:28:36 +0000 UTC]

:Y

👍: 0 ⏩: 0

i-am-yaser [2010-11-29 11:47:11 +0000 UTC]



👍: 0 ⏩: 0

Cappippuni [2010-11-29 10:57:41 +0000 UTC]

👍: 0 ⏩: 0

GaioumonBatou [2010-11-29 07:08:27 +0000 UTC]

👍: 0 ⏩: 0

RinjiPantera [2010-11-29 06:27:34 +0000 UTC]

👍: 0 ⏩: 0

RinjiPantera [2010-11-29 06:27:34 +0000 UTC]

👍: 0 ⏩: 0