Sta.sh
Wow .. thanx for the feedback .. with ur help I'll add more tips below .. keep an eye on them XD
Many other people have done this before, awesome people like $Ikue, `thespook or `ginkgografix, and now it's me too 
More updates comings soon!!
You may put all your queries here in this blog comments.
Tips & tricks
1. How to align your elements in custombox or journal?
Use the following code:
You can change the alignment to left, right, center & justify by simply replacing the words as shown below
<div align="center">Content here</div>You can change the alignment to left, right, center & justify by simply replacing the words as shown below
<div align="left">Content here</div>2. How do you change the font-size in a custombox?
Use the following code:
The result:
Font size = 1
Font size = 2
Font size = 3
Font size = 4
Font size = 5
Font size = 6
Font size = 7
<font size="1">Your text here</font>
<font size="2">Your text here</font>
<font size="3">Your text here</font>
<font size="4">Your text here</font>
<font size="5">Your text here</font>
<font size="6">Your text here</font>
<font size="7">Your text here</font>The result:
Font size = 1
Font size = 2
Font size = 3
Font size = 4
Font size = 5
Font size = 6
Font size = 7
3. How do you get the URL address of your NOTE? or What URL address do you put in buttons or any hyperlink to let people goto your NOTE directly?
Step 1. Logout of your deviantART account.
Step 2. Right-click over your Send a note (as shown below)
Step 3. Click on the Copy link address
Note: different browser may display different text for copying an URL. For example, IE would show "copy shortcut", firefox would say "copy link location" and Google chrome would say "Copy link address"
You can simply paste this URL in your notepad and use it wherever you want.
This doesn't work anymore!
4. How do you make a custom button? or How to make a clickable image for a custombox?
Use the following code to make an image clickable in your custombox:
Please note that you cannot make the image highlight on cursor hover as it normally does in case of a button.
For example,
*If you are using a custom background in your custombox then you've to put the above code in the "body text here.." part of it. For more details check F.A.Q. Q.9 of this juournal.
Please note that you cannot make the image highlight on cursor hover as it normally does in case of a button.
<a href="URL"><img src="IMAGE_URL"/></a>For example,
<a href="http://somrat.deviantart.com/"><img src="http://fc05.deviantart.net/fs71/f/2010/163/c/6/c674dcf288d8b1510017bad0ea7be1d7.png"/></a>*If you are using a custom background in your custombox then you've to put the above code in the "body text here.." part of it. For more details check F.A.Q. Q.9 of this juournal.
5. How add videos in custombox/journal?
Use this tag to insert your videos
You can insert 3 types of videos in DA.
1) Youtube
2) Vimeo
3) deviantART film
Codes to insert each type of videos
How to get your video codes?
Getting the ID of a video is really simple. Follow these steps to get your respective codes..
1) Open the video in your browser
2) Copy the URL and look for the code (as shown below)
*for DA films just get the thumbcode of it
3) Paste the code in their respective code (as shown below)
Demo URLs
Paste the video ID as shown below
<da:embed profile="video type" id="ID of the video" />You can insert 3 types of videos in DA.
1) Youtube
2) Vimeo
3) deviantART film
Codes to insert each type of videos
<da:embed profile="youtube" id="ID of the video" /><da:embed profile="vimeo" id="ID of the video" /><da:embed profile="film" id="ID of the video" />How to get your video codes?
Getting the ID of a video is really simple. Follow these steps to get your respective codes..
1) Open the video in your browser
2) Copy the URL and look for the code (as shown below)
*for DA films just get the thumbcode of it
3) Paste the code in their respective code (as shown below)
Demo URLs
http://www.youtube.com/watch?v=fEzhek5K0To&feature=g-vrec
http://vimeo.com/32121460
:thumb91547543:Paste the video ID as shown below
<da:embed profile="youtube" id="fEzhek5K0To" /><da:embed profile="vimeo" id="32121460" /><da:embed profile="film" id="91547543" />6. How change your font in a Custombox/Journal?
Use the following tag to change your font in your custombox.
Example
Result
Safe fonts to use
Serif Fonts
Georgia ----- The quick brown fox jumps over the lazy dog
Palatino Linotype, Book Antiqua ----- The quick brown fox jumps over the lazy dog
Times New Roman ----- The quick brown fox jumps over the lazy dog
Sans-Serif Fonts
Arial, Helvetica ----- The quick brown fox jumps over the lazy dog
Arial Black, Gadget ----- The quick brown fox jumps over the lazy dog
Comic Sans MS, cursive ----- The quick brown fox jumps over the lazy dog
Impact, Charcoal ----- The quick brown fox jumps over the lazy dog
Tahoma, Geneva ----- The quick brown fox jumps over the lazy dog
Trebuchet MS, Helvetica ----- The quick brown fox jumps over the lazy dog
Verdana, Geneva ----- The quick brown fox jumps over the lazy dog
Monospace Fonts
Courier New, Courier ----- The quick brown fox jumps over the lazy dog
Lucida Console, Monaco ----- The quick brown fox jumps over the lazy dog
<font face="FONT NAME">Your text here</font>Example
<font face="Comic Sans MS">Your text here</font>Result
Your text here
Safe fonts to use
Serif Fonts
Georgia ----- The quick brown fox jumps over the lazy dog
Palatino Linotype, Book Antiqua ----- The quick brown fox jumps over the lazy dog
Times New Roman ----- The quick brown fox jumps over the lazy dog
Sans-Serif Fonts
Arial, Helvetica ----- The quick brown fox jumps over the lazy dog
Arial Black, Gadget ----- The quick brown fox jumps over the lazy dog
Comic Sans MS, cursive ----- The quick brown fox jumps over the lazy dog
Impact, Charcoal ----- The quick brown fox jumps over the lazy dog
Tahoma, Geneva ----- The quick brown fox jumps over the lazy dog
Trebuchet MS, Helvetica ----- The quick brown fox jumps over the lazy dog
Verdana, Geneva ----- The quick brown fox jumps over the lazy dog
Monospace Fonts
Courier New, Courier ----- The quick brown fox jumps over the lazy dog
Lucida Console, Monaco ----- The quick brown fox jumps over the lazy dog
7. How to make a button a disabled one?
Just insert the following word in the button that you are using.
disabledbutton
For example, I take a button code from the range of buttons (can be found here [link].
I am using this button for my example.
And the code that I'm using from this button is
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small smbutton-curvy"><span class="post">I love my buttons very much</span></a></div>
How to get the disabled button?
Insert disabledbutton in the code.
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small smbutton-curvy disabledbutton"><span class="post">I love my buttons very much</span></a></div>
The result:
*NOTE: Put the word disabledbutton only along with the other button classes such as gmbutton2r, sm-button etc.
disabledbutton
For example, I take a button code from the range of buttons (can be found here [link].
I am using this button for my example.
And the code that I'm using from this button is
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small smbutton-curvy"><span class="post">I love my buttons very much</span></a></div>
How to get the disabled button?
Insert disabledbutton in the code.
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small smbutton-curvy disabledbutton"><span class="post">I love my buttons very much</span></a></div>
The result:
*NOTE: Put the word disabledbutton only along with the other button classes such as gmbutton2r, sm-button etc.
7. How to insert a bigger thumb in your custombox/journal?
Just insert the word big in the thumbcode that you are using.
Example
Normal thumbcode---> :thumb136916642:
Big thumbcode---> :bigthumb136916642:
Even Bigger thumbcode---> <da:deviation width="500" height="600" id="136916642">
Use any number in the width and height if you want to increase or decrease. the size of the deviation.
EXAMPLE:
<da:deviation width="600" height="650" id="136916642">
You can even use the above code for your literature thumbs. When you are using this code for literature thumbs the journal thumbnail will automatically get generated.
Literature thumb---> :thumb299697102:
Example:
<da:deviation width="450" height="400" id="299697102">
Result:
Example
Normal thumbcode---> :thumb136916642:
Big thumbcode---> :bigthumb136916642:
Even Bigger thumbcode---> <da:deviation width="500" height="600" id="136916642">
Use any number in the width and height if you want to increase or decrease. the size of the deviation.
EXAMPLE:
<da:deviation width="600" height="650" id="136916642">
You can even use the above code for your literature thumbs. When you are using this code for literature thumbs the journal thumbnail will automatically get generated.
Literature thumb---> :thumb299697102:
Example:
<da:deviation width="450" height="400" id="299697102">
Result:
7. How to create the donate button?
Well, that's a very easy to do.
Just take this URL:
Replace the USERNAME with your own (as shown below):
Now, use this URL in any button code or any hyperlink that you want.
Just take this URL:
http://USERNAME.deviantart.com/?givepointsReplace the USERNAME with your own (as shown below):
http://CypherVisor.deviantart.com/?givepointsNow, use this URL in any button code or any hyperlink that you want.
8. How to float images (or any element) in a custombox?
Use the following code to float your images (or any element) in a custom box.
To float elements to the LEFT:
To float elements to the RIGHT:
To float elements to the LEFT:
<div class="al"></div>To float elements to the RIGHT:
<div class="ar"></div>Exampe:
<div class="al">:thumb299697102:</div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.F.A.Q. (Frequently Asked Questions)
1. Is it possible to make more button with different colors other than which are already provided?
No. It is not possible. There are no more colors for buttons that is being defined in the DA website for your use. If anything new comes up I'll provide it to you.
2. How do I put my own URL in the custombox buttons?
Replace the text URL in any button code that you are using by your own URL
Example:
The button code:
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div>
Using your own URL:
<div class="thumb-holder"><a href="http://somrat.deviantart.com/" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div>
Example:
The button code:
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div>
Using your own URL:
<div class="thumb-holder"><a href="http://somrat.deviantart.com/" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div>
3. How do I put my own Text in the custombox buttons?
Replace the text I love my buttons very much in any button code that you are using by your own text
Example:
The button code:
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div>
Using your own URL:
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">Click to view my gallery</span></a></div>
Example:
The button code:
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div>
Using your own URL:
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">Click to view my gallery</span></a></div>
4. Where would the FAIR/UNFAIR or YES/NO button lead? Does they have a counter or poll in-built?
The FAIR/UNFAIR or YES/NO are just buttons with your own URL address. It shall lead to whatever URL address you provide in their codes. And they do not have any counter or poll inbuilt.
5. Is it possible to have table inside a Custombox?
No. Its not possible.
6. Is it possible to have Content-holder boxes of custom colors?
No. Its not possible. Whatever is possible is in my gallery folder. (Click "Custombox resouces" from the menu at the top of this journal to view them)
Though, you can use the button codes to write your content inside it. There are many colors of button to choose from!
Though, you can use the button codes to write your content inside it. There are many colors of button to choose from!
7. Is it possible to have scroll-bars inside a Custombox?
No. Its not possible.
8. How do I put buttons next to each other in a Custombox?
Simply do not put any line-break (or in simple words, don't put the codes in the next line). Instead, put them in the same line.
For example, Let us take the codes of the button below (You can get more buttons here.. [link]
Wrong way to put the buttons together after one another
Correct way to put the buttons together after one another
For example, Let us take the codes of the button below (You can get more buttons here.. [link]
Wrong way to put the buttons together after one another
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div>
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-blue smbutton-small"><span class="post">I love my buttons very much</span></a></div>Correct way to put the buttons together after one another
<div class="thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">I love my buttons very much</span></a></div> <div class="thumb-holder"><a href="URL" class="smbutton smbutton-blue smbutton-small"><span class="post">I love my buttons very much</span></a></div>9. How to get my custom background behind a content-holder box?
You simply need to replace the body text here.. with the content-holder box of your choice code.
For example, let us take the codes from the custom box background tutorial and the extruded content-holder box as given below. [You can get more content-holder boxes here.. [link]
Now, you get the codes from each of them
Custom-box background code
Content-holder box code
As said above, now put the content-holder box code in the custom box background code by replacing the body text here..
For example, let us take the codes from the custom box background tutorial and the extruded content-holder box as given below. [You can get more content-holder boxes here.. [link]
Now, you get the codes from each of them
Custom-box background code
<div class="popup2-moremenu"><div class="floaty-boat"><br><img src="URL"/></div></div><div class="gr-box gr-genericbox"><br>Body text here..</div>Content-holder box code
<div class="gr-box gr-headless"><i class="gr1"><i></i></i><i class="gr2"><i></i></i><i class="gr3"><i></i></i><div class="gr-body"><div class="gr"><div class="pp"><div align="center"><b>CONTENT HEADING HERE</b></div><br>Body text here..</div></div></div><i class="gr3 gb"></i><i class="gr2 gb"></i><i class="gr1 gb gb1"></i></div>As said above, now put the content-holder box code in the custom box background code by replacing the body text here..
<div class="popup2-moremenu"><div class="floaty-boat"><br><img src="URL"/></div></div><div class="gr-box gr-genericbox"><br><div class="gr-box gr-headless"><i class="gr1"><i></i></i><i class="gr2"><i></i></i><i class="gr3"><i></i></i><div class="gr-body"><div class="gr"><div class="pp"><div align="center"><b>CONTENT HEADING HERE</b></div><br>Body text here..</div></div></div><i class="gr3 gb"></i><i class="gr2 gb"></i><i class="gr1 gb gb1"></i></div></div>9. Can I change the text/font color in my custom widget boxes?
No, it is not possible to customize the font-color of the text in your custom widgets. DeviantART forbids the use of the "color" property to use in your profile page.
Example:
<da:deviation width="450" height="400" id="299697102">
As shown in that tutorial there.
Replace the number code at the end with the journal :thumb: of yours. Hope that helps. ^__^
I wish members had group like features.
How do you get images inside a custom box with your text over it?
Example: [link]