Shop More Submit  Join Login
×

Featured in Collections

Journals, News by little-billie




Details

Submitted on
November 28, 2010
Link
Thumb

Stats

Views
4,553
Favourites
160 (who?)
Comments
16
×
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:
Green and Red Bars by LumiResources

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:
<div class="popup2-moremenu"><br><div class="floaty-boat"><img src="http://kitsunelunari.com/da/barspacer.png"/><br>PASTE YOUR BAR CODE HERE</div><div class="gr-box gr-genericbox">THIS IS WHERE YOUR CONTENT WILL GO</div></div></div>

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:
Buttons by LumiResourcesBig Buttons by LumiResourcesYes No Poll by LumiResourcesFair Unfair Poll by LumiResources

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:
<a href="">Regular Button</a>

Take out the href="" part, and it should look like this:

<a>Regular Button</a>

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:
Group Box by LumiResourcesWarning Box by LumiResourcesSnazzy Box by LumiResources

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:

<br>SUBTITLE HERE

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

<div class="thumb-holder">

And change it to the following:

<div class="thumb-holder cc-name">

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:
Group Box by LumiResourcesWarning Box by LumiResourcesSnazzy Box by LumiResourcesYes No Poll by LumiResourcesSimple Box with Gold Header by LumiResourcesVery Basic Box by LumiResourcesDark Box by LumiResourcesFair Unfair Poll by LumiResources

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

<div class="pp">

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:
Snazzy Box by LumiResourcesWarning Box by LumiResourcesGroup Box by LumiResources
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! :D

Content-holder ICON tutorial by CypherVisor


How to Make Any Button Disabled

This tutorial applies only to these custom user boxes:
Buttons by LumiResourcesBig Buttons by LumiResources

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:
<i class="there will be stuff here">Green Button!</i>

And add disabledbuttonafter the other content in the class element:
<i class="there will be stuff here disabledbutton">Green Button!</i>

For the big buttons, put it in the class element of the a tag, not the span tag. Like so:
<a class="there will be stuff here disabledbutton"><span class="post">Big Purple Button!</span></a>
Add a Comment:
 
:iconalexlovedogz:
alexlovedogz Featured By Owner Feb 15, 2014   Artist
Do u know how to make a custom backround wider so it fills the whole custom box space?
Reply
:iconhyoori:
hyoori Featured By Owner Aug 7, 2013  Hobbyist General Artist
I wuv you
Reply
:icontansyuduri:
tansyuduri Featured By Owner Jun 7, 2013  Student Writer
erm. how about making a background repeat?
Reply
:iconcoolcatsofia:
coolcatsofia Featured By Owner Aug 11, 2012  Hobbyist Digital Artist
this is confusen
Reply
:iconkat-skittychu:
Kat-Skittychu Featured By Owner Mar 5, 2012  Hobbyist Digital Artist
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.
Reply
:iconduskvsdawn:
DUSKvsDAWN Featured By Owner Mar 21, 2013  Hobbyist General Artist
font color cant be changed on this site, sorry.
Reply
:iconmeeshapom:
meeshapom Featured By Owner Jan 7, 2012
Is there a way to reduce padding? I have seen it on a deviant's gallery.
Reply
:iconwoodsybirds:
woodsybirds Featured By Owner Oct 1, 2011  Student General Artist
How do we give the custom box a background?
Reply
:icon3lectricblu3daw9:
3lectricBlu3Daw9 Featured By Owner Jul 11, 2011  Hobbyist Digital Artist
is there way we change the font colors???
Reply
:iconnironan12:
Nironan12 Featured By Owner Jul 9, 2011
It lives! :happycry:
Reply
Add a Comment: