HOME | DD

Description
body div#devskin7675738 .gr-box * { margin:0; padding:0; border:none; background:transparent; } body div#devskin7675738 .tri, body div#devskin7675738 .list, body div#devskin7675738 .gr-top h2 img, body div#devskin7675738 .gr-top span { display:none; } body div#devskin7675738 .gr-top { background-color:#3eb2ee; border-top:1px solid #1d83b8; border-left:1px solid #1d83b8; border-right:1px solid #1d83b8; border-bottom:1px solid #1d83b8; border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px; border-top-left-radius:5px; -moz-border-top-left-radius:5px; -webkit-border-top-left-radius:5px; } body div#devskin7675738 .gr-top h2, body div#devskin7675738 .gr-top h2 a { text-shadow:-1px -1px #444; text-align:center; margin:10px 0px 10px -23px; font-size:30px; color:#fff; } body div#devskin7675738 _.gr-top span { position:relative; top:-2px; right:10px; font-size:9px; color:#fff; } body div#devskin7675738 .gr-body { text-align:justify; padding:10px; padding-top:50px; background-color:#f5f5f5; border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; -moz-border-bottom-left-radius:5px; -webkit-border-bottom-left-radius:5px; border-left:1px solid #a3a3a3; border-right:1px solid #a3a3a3; border-bottom:1px solid #a3a3a3; } body div#devskin7675738 .title { font-size:30px; font-family:Times new roman; color:#d9472a; text-shadow:0px 1px 1px #c02000; _background:#aa2ac1; border-bottom:2px dotted #a31b00; _border-top:thin dashed #a31b00; margin-bottom:-5px; } body div#devskin7675738 .text a { color:#b447d3; text-decoration:none; } body div#devskin7675738 .text a:hover { text-shadow:0px 0px 1px #dc6dfb; } body div#devskin7675738 .menubar { padding-top:10px; text-align:center; position:absolute; top:0px; background:#dfdb7a; margin-left:-10px; _border-top:1px solid #848484; border-bottom:1px solid #c7c7c7; width:100%; height:auto; box-shadow:0px 2px 2px #cecece; -moz-box-shadow:0px 2px 2px #cecece; -webkit-box-shadow:0px 2px 2px #cecece; } body div#devskin7675738 .menubar a { display:inline-block; color:#fff; background:#df7a7a; border:1px solid #cdcdcd; padding:4px 15px 4px 15px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; text-decoration:none; margin-right:15px; margin-bottom:8px; } body div#devskin7675738 .menubar a:hover { color:#000; background:#fff; text-shadow:none; border:1px solid #838383; } body div#devskin7675738 .boxdotted { background:#fff; border:thin dotted #000; padding:10px; margin-top:6px; } body div#devskin7675738 .boxnormal { background:#e6e6e6; border:1px solid #cdcdcd; padding:10px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; margin-top:6px; } body div#devskin7675738 .boxcorrect { background:#d6ffc4; border:1px solid #cdcdcd; padding:10px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; margin-top:6px; } body div#devskin7675738 .boxwrong { background:#ffd6c4; border:1px solid #cdcdcd; padding:10px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; margin-top:6px; } body div#devskin7675738 .gr-body .bottom a.commentslink { color:#4d4d4d; background:#fff960; border:1px solid #cdcdcd; padding:3px 6px 3px 6px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; text-decoration:none; } body div#devskin7675738 .gr-body .bottom a.commentslink:hover { border:1px solid #a4a4a4; } body div#devskin7675738 .text u { text-decoration:none; font-weight:bold; background:#ffc656; padding:3px 10px 3px 10px; height:20px; margin-top:-10px; line-height:25px; border:1px solid #aeaeae; }

CustomBox Resources `CypherVisor's Page Journal/Gallery skins

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:

Content here

You can change the alignment to left, right, center & justify by simply replacing the words as shown below

Content here

2. How do you change the font-size in a custombox?
Use the following code:

Your text here
Your text here
Your text here
Your text here
Your text here
Your text here
Your text here

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 to change your font in a Custombox/Journal?
Use the following tag to change your font in your custombox.

Your text here

Example

Your text here

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

Combining "size" and "face"

Yes, it is possible to combine 'size' and 'face' (or other font properties) together to get a combined effect as below. Go ahead..Give it a try!

Example

Your text here

Result

Your text here

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 journal.

5. How to 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

http://www.youtube.com/watch?v=fEzhek5K0To&feature=g-vrec
http://vimeo.com/32121460
:thumb91547543:

Paste the video ID as shown below

NOTE: If you want to get the Youtube bar please follow the tutorial below:

Youtube bar tutorial

6. 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?
Use the following URL to use it in a button or as a hyperlink.

http://my.deviantart.com/global/notes/form.php?to_user=USERNAME

Example:

http://my.deviantart.com/global/notes/form.php?to_user=CypherVisor

TIP: You can use multiple usernames in the above code by inserting their usernames separated by commas as follows:

http://my.deviantart.com/global/notes/form.php?to_user=CypherVisor, Moonbeam13, fourteenthstar

Trick update given by AppleGummies

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 cyphervisor.deviantart.com/gal… ).

I am using this button for my example.

And the code that I'm using from this button is

I love my buttons very muchdiv

How to get the disabled button?

Insert disabledbutton in the code.

I love my buttons very muchdiv

The result:

*NOTE: Put the word disabledbutton only along with the other button classes such as gmbutton2r, sm-button etc.

8. 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--->

Use any number in the width if you want to increase the size of the deviation.

EXAMPLE:

Alternate Custom Thumbnail code (NOT for literature thumbs):

Where, DEVIATION_URL is the URL address of the deviations (the URL address of a deviation is present in the address bar of your browser when you open it in a new tab or page) and DEVIATION_IMAGE_URL is the direct image link of the deviation. (check FAQ#17 here to know how to copy the direct IMAGE URL of your deviation or for that matter any image)

EXAMPLE:

You can even use the above code for your literature thumbs.

Note: When you are using this code for literature thumbs the journal thumbnail will automatically get generated.

Literature thumb---> :thumb299697102:

CustomBox+Journal Tips n Tricks-Updated 25-Sep-14More 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:

Content here

You can change the alignment to left, right, center & justify by simply replacing the words as shown below

Content here

2. How do you change the font-size in a custombox?

Use the following code:

Your text here
Your text here
Your text here
Your text here
Your text here
Your text here
Your text here

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 to change your font i

Example:

NOTE: I have used the height property to fix the height of the literature thumbs as well!

Result:

9. How to create the donate button/ Add to watch direct URL?
Well, that's a very easy to do.

Donate points direct link:

http://USERNAME.deviantart.com/?givepoints

Replace the USERNAME with your own (as shown below):

http://CypherVisor.deviantart.com/?givepoints

Watchers direct link:

http://my.deviantart.com/deviants/add/USERNAME

Replace the USERNAME with your own (as shown below):

http://my.deviantart.com/deviants/add/CypherVisor

Now, use these URLs in any button code or any hyperlink that you want.

Also, note that please do not try these links with your own usernames because neither can you give your points to yourself nor watch yourself!

10. How to float images (or any element) in a custombox? or How do you place text and image side-by-side in your widget?
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:

Example:

:thumb299697102:
LoremIpsum is simply dummy text of the printing and typesetting industry. LoremIpsum 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.

11. How to change the color of hyperlinks?
First of all, this is an extension of the FAQ #11 given below.

So, if you know how to create hyperlinks using the HTML tag and want to change the color of your hyperlinks then follow these steps:

1) Create your desired hyperlink by using the tag (follow FAQ #11 if you do not how to do it)
2) Take your desired text color code from HERE (Only the colors mentioned there are available)
3) Replace the text inside the ... with the color code
4) Done!

Example:

Let your hyperlink be the following:

YOUR_CUSTOMIZED_TEXT

Now let's take the GREEN text color code from HERE (You can take any color code you want)

Here's the green text color code:
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.

Now, replace the "YOUR_CUSTOMIZED_TEXT" with the color code as follows:

YOUR_COLORED_TEXT

In the above example, I have just replaced the "Lorem Ipsum..." with YOUR_COLORED_TEXT for the sake of understanding.

*PLEASE NOTE you can’t use the above code to change username colors that are generated by :devUSERNAME: or @USERNAME codes.

However, you can change a USERNAME color by tweaking the above code by writing as follows:

CypherVisor

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:

I love my buttons very much

Using your own URL:

I love my buttons very much

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:

I love my buttons very much

Using your own URL:

Click to view my gallery

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?
Yes to an extent. Here's a tutorial for you: Content-Holder Background tutorial

You'll also find different colors of content holder boxes in my gallery folder. (Click "Customboxresouces" from the menu at the top of this journal to view them)

Plus, you can use the button codes (Buttons as Content-Holder boxes ) 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?
Yes, it is possible.

Check out the tutorials below:

1) Scrolling Widgets (non-Custom Box)
2) Scrolling Custom Box Widget
3) Scroll-ception Widgets
4) Scrolling Content Boxes

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.. cyphervisor.deviantart.com/gal… )

Wrong way to put the buttons together after one another

I love my buttons very much

I love my buttons very much

Correct way to put the buttons together after one another

I love my buttons very muchspan>div>
I love my buttons very much

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.. somrat.deviantart.com/gallery/… )

Now, you get the codes from each of them

Custom-box background code

div>div>

Body text here..

Content-holder box code
CONTENT HEADING HERE

Body text here..

As said above, now put the content-holder box code in the custom box background code by replacing the body text here..

div>div>

CONTENT HEADING HERE

Body text here..

10. Can I change the text/font color in my custom widget boxes?
Yes, you can change to some colors. Here's a list of colors and their respective codes: cyphervisor.deviantart.com/art…

11. How to use hyperlinks with different text?
If you want to have a link (or URL) displayed to a customized text then use the following code:

YOUR_CUSTOMIZED_TEXT

Example:
Custombox F.A.Q. + Tips and tricks

Result:

Custombox F.A.Q. + Tips and tricks

12. How do you insert an image in your Custom box or journal?
Use the following code to insert and image in your Custom box or journal.

Example:

Result:

13. How do you resize an image in your Custom box or journal?
Just use the width or height property in your tag in F.A.Q. #12 as shown below:

width="300" src="IMAGE_URL"/>

or

height="200" src="IMAGE_URL"/>

or you can use both width and height together

width="300" height="200" src="IMAGE_URL"/>

*Please note: If you use width and height together then you might change the resolution of the image disproportionately.

14. How do I get rid of the arrow symbols in my links/URLs and buttons?
If you haven't noticed it yet. DA always put an arrow symbol when you are trying to use an "external link" (for example a facebook.com link or a tumblr.com link) in the tag or a button code (as below).

NOTE: The arrow is displayed only when you are using an external link! It WILL NOT display the arrow if you are using a DA link. (such as a link to someone's profile page in DA or a deviation link etc.)

The simple solution to get rid of that is by pre-fixing the below URL in your tag or a button code URL:

http://deviantart.com/users/outgoing?

Example:
Let your external link be: http://facebook.com/

Solution:
BUTTON CODE:
I love my buttons very much

tag:
Facebook

Result:

This fix was found by Gasara

15. How do I get rid of the bold text in my links/URLs and buttons?
You may have noticed if you use the above trick (FAQ #13) to get rid of the arrow or in general while inserting links in your journal or widgets you get your links bold as below:

To get rid of the bold text use the following code for your text inside your tag or a button code:

YOUR_TEXT

Solution:
BUTTON CODE:
I love my buttons very much

tag:
Facebook

Result:

16. How do I get the direct link to my Llama giving page/ Cake giving page?
You can provide a direct link to other deviants which redirects them to a page that will take them directly to a page where they can gift you a llama. Yes, even without visiting your page and clicking on the "Give" button on the top-right corner and then clicking on the "Give a llama badge" menu they can bypass it and goto a page and give you a llama.

Llama page direct link:

Here's how you do it:

1) Log out from your page and login to deviantart using another account. (Otherwise you can tell you friend to do this for you )

2) After logging into the other account go to your page and click on the "Give" button and then click on "Give a Llama badge" menu from the dropdown. (as shown above)

3) In the pop-up window that opens (as shown below), right-click on the "Terms and Conditions for Points" and click on “Open in new tab” or “Open in a new window”

4) In the new browser tab or page that opens Copy the URL address (as shown below) and that my friend, is the direct link to your llama page!

Cake page direct link:

For the cake page follow the same steps as given above but this time you just select "Give a Cake Badge".

17. How do I copy the image URL (or deviation image URL or deviation image link)?
To copy the URL of an image that appears on a page do the following:

Please follow the steps according to the browser that you are using!!

Internet Explorer

1. Click on the desired picture with the right mouse button
2. Select Properties from the menu
3. Highlight the address appearing under Address (URL):
4. Press Ctrl-C (shortcut key to copy the URL)

Mozilla Firefox

1. Click on the image with the right mouse button.
2. Choose "Copy Image Location" from the menu.

Safari and Opera

1. Click on the desired image with the right mouse button (or holding down Ctrl while clicking with the left or only button).
2. Select "Copy Image Address" from the menu.

Google Chrome

1. Click on the image with the right mouse button
2. Select "Copy Image URL" from the menu that comes up

HINT: An Image URL always ends with an image extension such as .jpg or .png or .gif etc.

Example: http://fc01.deviantart.net/fs70/f/2013/069/d/6/fella_by_cyphervisor-d5xk416.png

18. Can I change the icons of my widgets?
No, you can't!

;) (Wink) — Description
body div#devskin7675738 .gr-box * { margin:0; padding:0; border:none; background:transparent; } body div#devskin7675738 .tri, body div#devskin7675738 .list, body div#devskin7675738 .gr-top h2 img, body div#devskin7675738 .gr-top span { display:none; } body div#devskin7675738 .gr-top { background-color:#3eb2ee; border-top:1px solid #1d83b8; border-left:1px solid #1d83b8; border-right:1px solid #1d83b8; border-bottom:1px solid #1d83b8; border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px; border-top-left-radius:5px; -moz-border-top-left-radius:5px; -webkit-border-top-left-radius:5px; } body div#devskin7675738 .gr-top h2, body div#devskin7675738 .gr-top h2 a { text-shadow:-1px -1px #444; text-align:center; margin:10px 0px 10px -23px; font-size:30px; color:#fff; } body div#devskin7675738 _.gr-top span { position:relative; top:-2px; right:10px; font-size:9px; color:#fff; } body div#devskin7675738 .gr-body { text-align:justify; padding:10px; padding-top:50px; background-color:#f5f5f5; border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; -moz-border-bottom-left-radius:5px; -webkit-border-bottom-left-radius:5px; border-left:1px solid #a3a3a3; border-right:1px solid #a3a3a3; border-bottom:1px solid #a3a3a3; } body div#devskin7675738 .title { font-size:30px; font-family:Times new roman; color:#d9472a; text-shadow:0px 1px 1px #c02000; _background:#aa2ac1; border-bottom:2px dotted #a31b00; _border-top:thin dashed #a31b00; margin-bottom:-5px; } body div#devskin7675738 .text a { color:#b447d3; text-decoration:none; } body div#devskin7675738 .text a:hover { text-shadow:0px 0px 1px #dc6dfb; } body div#devskin7675738 .menubar { padding-top:10px; text-align:center; position:absolute; top:0px; background:#dfdb7a; margin-left:-10px; _border-top:1px solid #848484; border-bottom:1px solid #c7c7c7; width:100%; height:auto; box-shadow:0px 2px 2px #cecece; -moz-box-shadow:0px 2px 2px #cecece; -webkit-box-shadow:0px 2px 2px #cecece; } body div#devskin7675738 .menubar a { display:inline-block; color:#fff; background:#df7a7a; border:1px solid #cdcdcd; padding:4px 15px 4px 15px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; text-decoration:none; margin-right:15px; margin-bottom:8px; } body div#devskin7675738 .menubar a:hover { color:#000; background:#fff; text-shadow:none; border:1px solid #838383; } body div#devskin7675738 .boxdotted { background:#fff; border:thin dotted #000; padding:10px; margin-top:6px; } body div#devskin7675738 .boxnormal { background:#e6e6e6; border:1px solid #cdcdcd; padding:10px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; margin-top:6px; } body div#devskin7675738 .boxcorrect { background:#d6ffc4; border:1px solid #cdcdcd; padding:10px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; margin-top:6px; } body div#devskin7675738 .boxwrong { background:#ffd6c4; border:1px solid #cdcdcd; padding:10px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; margin-top:6px; } body div#devskin7675738 .gr-body .bottom a.commentslink { color:#4d4d4d; background:#fff960; border:1px solid #cdcdcd; padding:3px 6px 3px 6px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; text-decoration:none; } body div#devskin7675738 .gr-body .bottom a.commentslink:hover { border:1px solid #a4a4a4; } body div#devskin7675738 .text u { text-decoration:none; font-weight:bold; background:#ffc656; padding:3px 10px 3px 10px; height:20px; margin-top:-10px; line-height:25px; border:1px solid #aeaeae; }

CustomBox Resources `CypherVisor's Page Journal/Gallery skins

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:

Content here

You can change the alignment to left, right, center & justify by simply replacing the words as shown below

Content here

2. How do you change the font-size in a custombox?
Use the following code:

Your text here
Your text here
Your text here
Your text here
Your text here
Your text here
Your text here

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 to change your font in a Custombox/Journal?
Use the following tag to change your font in your custombox.

Your text here

Example

Your text here

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

Combining "size" and "face"

Yes, it is possible to combine 'size' and 'face' (or other font properties) together to get a combined effect as below. Go ahead..Give it a try!

Example

Your text here

Result

Your text here

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 journal.

5. How to 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

http://www.youtube.com/watch?v=fEzhek5K0To&feature=g-vrec
http://vimeo.com/32121460
:thumb91547543:

Paste the video ID as shown below

NOTE: If you want to get the Youtube bar please follow the tutorial below:

Youtube bar tutorial

6. 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?
Use the following URL to use it in a button or as a hyperlink.

http://my.deviantart.com/global/notes/form.php?to_user=USERNAME

Example:

http://my.deviantart.com/global/notes/form.php?to_user=CypherVisor

TIP: You can use multiple usernames in the above code by inserting their usernames separated by commas as follows:

http://my.deviantart.com/global/notes/form.php?to_user=CypherVisor, Moonbeam13, fourteenthstar

Trick update given by AppleGummies

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 cyphervisor.deviantart.com/gal… ).

I am using this button for my example.

And the code that I'm using from this button is

I love my buttons very muchdiv

How to get the disabled button?

Insert disabledbutton in the code.

I love my buttons very muchdiv

The result:

*NOTE: Put the word disabledbutton only along with the other button classes such as gmbutton2r, sm-button etc.

8. 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--->

Use any number in the width if you want to increase the size of the deviation.

EXAMPLE:

Alternate Custom Thumbnail code (NOT for literature thumbs):

Where, DEVIATION_URL is the URL address of the deviations (the URL address of a deviation is present in the address bar of your browser when you open it in a new tab or page) and DEVIATION_IMAGE_URL is the direct image link of the deviation. (check FAQ#17 here to know how to copy the direct IMAGE URL of your deviation or for that matter any image)

EXAMPLE:

You can even use the above code for your literature thumbs.

Note: When you are using this code for literature thumbs the journal thumbnail will automatically get generated.

Literature thumb---> :thumb299697102:

CustomBox+Journal Tips n Tricks-Updated 25-Sep-14More 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:

Content here

You can change the alignment to left, right, center & justify by simply replacing the words as shown below

Content here

2. How do you change the font-size in a custombox?

Use the following code:

Your text here
Your text here
Your text here
Your text here
Your text here
Your text here
Your text here

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 to change your font i

Example:

NOTE: I have used the height property to fix the height of the literature thumbs as well!

Result:

9. How to create the donate button/ Add to watch direct URL?
Well, that's a very easy to do.

Donate points direct link:

http://USERNAME.deviantart.com/?givepoints

Replace the USERNAME with your own (as shown below):

http://CypherVisor.deviantart.com/?givepoints

Watchers direct link:

http://my.deviantart.com/deviants/add/USERNAME

Replace the USERNAME with your own (as shown below):

http://my.deviantart.com/deviants/add/CypherVisor

Now, use these URLs in any button code or any hyperlink that you want.

Also, note that please do not try these links with your own usernames because neither can you give your points to yourself nor watch yourself!

10. How to float images (or any element) in a custombox? or How do you place text and image side-by-side in your widget?
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:

Example:

:thumb299697102:
LoremIpsum is simply dummy text of the printing and typesetting industry. LoremIpsum 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.

11. How to change the color of hyperlinks?
First of all, this is an extension of the FAQ #11 given below.

So, if you know how to create hyperlinks using the HTML tag and want to change the color of your hyperlinks then follow these steps:

1) Create your desired hyperlink by using the tag (follow FAQ #11 if you do not how to do it)
2) Take your desired text color code from HERE (Only the colors mentioned there are available)
3) Replace the text inside the ... with the color code
4) Done!

Example:

Let your hyperlink be the following:

YOUR_CUSTOMIZED_TEXT

Now let's take the GREEN text color code from HERE (You can take any color code you want)

Here's the green text color code:
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.

Now, replace the "YOUR_CUSTOMIZED_TEXT" with the color code as follows:

YOUR_COLORED_TEXT

In the above example, I have just replaced the "Lorem Ipsum..." with YOUR_COLORED_TEXT for the sake of understanding.

*PLEASE NOTE you can’t use the above code to change username colors that are generated by :devUSERNAME: or @USERNAME codes.

However, you can change a USERNAME color by tweaking the above code by writing as follows:

CypherVisor

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:

I love my buttons very much

Using your own URL:

I love my buttons very much

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:

I love my buttons very much

Using your own URL:

Click to view my gallery

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?
Yes to an extent. Here's a tutorial for you: Content-Holder Background tutorial

You'll also find different colors of content holder boxes in my gallery folder. (Click "Customboxresouces" from the menu at the top of this journal to view them)

Plus, you can use the button codes (Buttons as Content-Holder boxes ) 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?
Yes, it is possible.

Check out the tutorials below:

1) Scrolling Widgets (non-Custom Box)
2) Scrolling Custom Box Widget
3) Scroll-ception Widgets
4) Scrolling Content Boxes

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.. cyphervisor.deviantart.com/gal… )

Wrong way to put the buttons together after one another

I love my buttons very much

I love my buttons very much

Correct way to put the buttons together after one another

I love my buttons very muchspan>div>
I love my buttons very much

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.. somrat.deviantart.com/gallery/… )

Now, you get the codes from each of them

Custom-box background code

div>div>

Body text here..

Content-holder box code
CONTENT HEADING HERE

Body text here..

As said above, now put the content-holder box code in the custom box background code by replacing the body text here..

div>div>

CONTENT HEADING HERE

Body text here..

10. Can I change the text/font color in my custom widget boxes?
Yes, you can change to some colors. Here's a list of colors and their respective codes: cyphervisor.deviantart.com/art…

11. How to use hyperlinks with different text?
If you want to have a link (or URL) displayed to a customized text then use the following code:

YOUR_CUSTOMIZED_TEXT

Example:
Custombox F.A.Q. + Tips and tricks

Result:

Custombox F.A.Q. + Tips and tricks

12. How do you insert an image in your Custom box or journal?
Use the following code to insert and image in your Custom box or journal.

Example:

Result:

13. How do you resize an image in your Custom box or journal?
Just use the width or height property in your tag in F.A.Q. #12 as shown below:

width="300" src="IMAGE_URL"/>

or

height="200" src="IMAGE_URL"/>

or you can use both width and height together

width="300" height="200" src="IMAGE_URL"/>

*Please note: If you use width and height together then you might change the resolution of the image disproportionately.

14. How do I get rid of the arrow symbols in my links/URLs and buttons?
If you haven't noticed it yet. DA always put an arrow symbol when you are trying to use an "external link" (for example a facebook.com link or a tumblr.com link) in the tag or a button code (as below).

NOTE: The arrow is displayed only when you are using an external link! It WILL NOT display the arrow if you are using a DA link. (such as a link to someone's profile page in DA or a deviation link etc.)

The simple solution to get rid of that is by pre-fixing the below URL in your tag or a button code URL:

http://deviantart.com/users/outgoing?

Example:
Let your external link be: http://facebook.com/

Solution:
BUTTON CODE:
I love my buttons very much

tag:
Facebook

Result:

This fix was found by Gasara

15. How do I get rid of the bold text in my links/URLs and buttons?
You may have noticed if you use the above trick (FAQ #13) to get rid of the arrow or in general while inserting links in your journal or widgets you get your links bold as below:

To get rid of the bold text use the following code for your text inside your tag or a button code:

YOUR_TEXT

Solution:
BUTTON CODE:
I love my buttons very much

tag:
Facebook

Result:

16. How do I get the direct link to my Llama giving page/ Cake giving page?
You can provide a direct link to other deviants which redirects them to a page that will take them directly to a page where they can gift you a llama. Yes, even without visiting your page and clicking on the "Give" button on the top-right corner and then clicking on the "Give a llama badge" menu they can bypass it and goto a page and give you a llama.

Llama page direct link:

Here's how you do it:

1) Log out from your page and login to deviantart using another account. (Otherwise you can tell you friend to do this for you )

2) After logging into the other account go to your page and click on the "Give" button and then click on "Give a Llama badge" menu from the dropdown. (as shown above)

3) In the pop-up window that opens (as shown below), right-click on the "Terms and Conditions for Points" and click on “Open in new tab” or “Open in a new window”

4) In the new browser tab or page that opens Copy the URL address (as shown below) and that my friend, is the direct link to your llama page!

Cake page direct link:

For the cake page follow the same steps as given above but this time you just select "Give a Cake Badge".

17. How do I copy the image URL (or deviation image URL or deviation image link)?
To copy the URL of an image that appears on a page do the following:

Please follow the steps according to the browser that you are using!!

Internet Explorer

1. Click on the desired picture with the right mouse button
2. Select Properties from the menu
3. Highlight the address appearing under Address (URL):
4. Press Ctrl-C (shortcut key to copy the URL)

Mozilla Firefox

1. Click on the image with the right mouse button.
2. Choose "Copy Image Location" from the menu.

Safari and Opera

1. Click on the desired image with the right mouse button (or holding down Ctrl while clicking with the left or only button).
2. Select "Copy Image Address" from the menu.

Google Chrome

1. Click on the image with the right mouse button
2. Select "Copy Image URL" from the menu that comes up

HINT: An Image URL always ends with an image extension such as .jpg or .png or .gif etc.

Example: http://fc01.deviantart.net/fs70/f/2013/069/d/6/fella_by_cyphervisor-d5xk416.png

18. Can I change the icons of my widgets?
No, you can't!