HOME | DD

CypherVisor avatar

CypherVisor — CustomBox Columns tutorial by-nc-nd


CustomBox Columns tutorial
Published: 2014-03-22 17:46:33 +0000 UTC; Views: 112145; Favourites: 3762; Downloads: 0
Redirect to original
Description »»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««

How to use ?
Just copy the source code(s) below and paste it in your Custombox module in your profile or group page.



SOURCE CODE:
Columns with Header Titles:

<div class="mods-column-ll"><div class="gzone-label" align="center">Left Header Text</div><div class="sealed-zone">LEFT_COLUMN_CONTENT</div></div><div class="mods-column-rr"><div class="gzone-label" align="center">Right Header Text</div><div class="sealed-zone">RIGHT_COLUMN_CONTENT </div></div>



Columns without Header Titles:

<div class="mods-column-ll"><div class="sealed-zone">LEFT_COLUMN_CONTENT</div></div><div class="mods-column-rr"><div class="sealed-zone">RIGHT_COLUMN_CONTENT </div></div>




CustomBox Wide Content tutorial: [LINK]

Elnino Content-holder Box: [LINK]





IMPORTANT NOTE!!!!
You might need to install the donation pool widget in your profile for this code to work properly.




Want to customize your profile page?
Check all my free resources + tutorials: [LINK]



Having any doubt with Custombox or Journal CSS? Please read this F.A.Q. + Tips n Tricks
I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some points Points to me as an appreciation or support.
Related content
Comments: 616

LeewardShoreLeewardShore In reply to ??? [2016-01-09 16:14:29 +0000 UTC]

Sure, there's always a way to do it, but it shouldn't have to be a workaround. I personally don't mind, it's the principle I have an issue with.

👍: 0 ⏩: 1

saarossaaros In reply to LeewardShore [2016-01-09 23:57:06 +0000 UTC]

what do you mea w/ the principle?

👍: 0 ⏩: 1

LeewardShoreLeewardShore In reply to saaros [2016-01-10 14:58:31 +0000 UTC]

I mean it's stupid to restrict users in such a way that convoluted solutions still work, because it effectively achieves nothing but annoy users.

👍: 0 ⏩: 1

saarossaaros In reply to LeewardShore [2016-01-10 20:35:02 +0000 UTC]

ooooh, yes yeah you're right. but y'know, dA' is not giving a fuck abt us.

👍: 0 ⏩: 1

LeewardShoreLeewardShore In reply to saaros [2016-01-11 05:24:23 +0000 UTC]

That's why I called DA a "profit-driven fustercluck". 

👍: 0 ⏩: 1

saarossaaros In reply to LeewardShore [2016-01-11 16:49:27 +0000 UTC]

HAHAH xD

👍: 0 ⏩: 0

benjellobenjello [2015-12-14 18:00:13 +0000 UTC]

When  copy and paste this code it doesn't have the white background. D:

👍: 0 ⏩: 1

KllNGSKllNGS In reply to benjello [2015-12-15 22:20:03 +0000 UTC]

To get a white background dear, you need to put the white custom background code where it says either LEFT_COLUMN_CONTENT and RIGHT_COLUMN_CONTENT are located. In the white custom box code I normally use, it says body text here and that is where you start typing.

👍: 0 ⏩: 1

benjellobenjello In reply to KllNGS [2015-12-16 03:49:11 +0000 UTC]

Ah thank you!

👍: 0 ⏩: 1

KllNGSKllNGS In reply to benjello [2015-12-16 03:54:56 +0000 UTC]

You are welcome and hopefully that works now.

👍: 0 ⏩: 0

catSaintscatSaints In reply to ??? [2015-10-29 00:10:06 +0000 UTC]

Whenever I try to add a separate content box underneath it, it always ends up on the right side? I'm not missing any </ div > or anything ( I don't think so, ) so I'm really lost on what I should do.. I have gone through the comments and found a 'solution' but it doesn't seem to work for me, or at least I'm just not using it correctly. 

👍: 0 ⏩: 0

PastelPizzaRabbitsPastelPizzaRabbits [2015-09-03 06:58:17 +0000 UTC]

when ever i put it in too the custom thing it comes out like really really small like this

👍: 0 ⏩: 1

CatatombiCatatombi In reply to PastelPizzaRabbits [2015-10-10 02:33:06 +0000 UTC]

you need too add some more < / div > in there somewhere

👍: 0 ⏩: 0

Rina-ranRina-ran In reply to ??? [2015-08-23 21:00:26 +0000 UTC]

Is it possible to set a static height/width for custom boxes / columns? 

👍: 0 ⏩: 0

TehutiyTehutiy [2015-08-11 13:17:22 +0000 UTC]

This is great, only code I've found that actually works on da currently. I'm curious though, I need to add a third column on the same level, how would you do so? It keeps putting it beneath the first pair.
Thanks very much for the help, mate. Appriciate this Thumbs Up

👍: 0 ⏩: 1

Account-DeletedAccount-Deleted In reply to Tehutiy [2016-02-14 21:02:25 +0000 UTC]

Have you figured this out yet? I'm really struggling too! Hehe

👍: 0 ⏩: 1

TehutiyTehutiy In reply to Account-Deleted [2016-02-14 23:23:57 +0000 UTC]

unfortunately not, can get the two to work but no luck beyond that...

👍: 0 ⏩: 0

eayneayn In reply to ??? [2015-07-31 00:38:46 +0000 UTC]

The widening code doesn't work with this and it just goes over to the right. and the columns are both really small??
 (what it looks like without being widened)

👍: 0 ⏩: 1

fuckboisfuckbois In reply to eayn [2015-09-28 07:21:48 +0000 UTC]

lmao when i use the widening code bc deviantart broke it (go figure dev sucks)
i use the scroll box code to get it to work
and keep pasting < br> until there's no longer a scroll bar

👍: 0 ⏩: 0

Daddy-SatanDaddy-Satan In reply to ??? [2015-07-26 00:48:43 +0000 UTC]

Is it possible to have one of the columns just an image? ; v ;
With like not inside hte box? o v o 

👍: 0 ⏩: 2

DivideByZiroDivideByZiro In reply to Daddy-Satan [2015-10-27 10:41:27 +0000 UTC]

Ahemhem, chances are you have it figured out by now, but super simple solution is instead of putting any code for the box, where it says 'LEFT/RIGHT COLUMN CONTENT' just use the good old fashioned
<img src= "image url">

👍: 0 ⏩: 1

Daddy-SatanDaddy-Satan In reply to DivideByZiro [2015-10-27 19:35:02 +0000 UTC]

Aha, I've figured it out already, but thank you v much ! :00

👍: 0 ⏩: 0

DENIAIDENIAI In reply to Daddy-Satan [2015-10-07 05:16:55 +0000 UTC]

if you still need a solution maybe try this

<div class="mods-column-ll"><div class="gzone-label" align="center">LEFT HEADER TEXT</div><div class="sealed-zone">LEFT_COLUMN_CONTENT</div></div><div class="mods-column-rr"><div class="gzone-label" align="center">Right Header Text</div><div class="sealed-zone"><img src="DIRECT IMAGE URL HERE"></div></div>

idk, i think that should make the image sit to the right, beside the text on the left. im not entirely sure if it works tho but eh

👍: 0 ⏩: 1

CatatombiCatatombi In reply to DENIAI [2015-10-10 02:53:46 +0000 UTC]

how do you show codeing in a comment with out it turning into a mess??

👍: 0 ⏩: 1

DENIAIDENIAI In reply to Catatombi [2015-10-13 05:02:15 +0000 UTC]

idk
there is some special code thing you can do to stop emoticons from happening so it could have the same effect on text but i legit cant remember what it was
but it often fails and i have to search it up again >.< sorry

👍: 0 ⏩: 1

CatatombiCatatombi In reply to DENIAI [2015-10-13 05:05:14 +0000 UTC]

aaa okay ; v ;
thank you anyways

👍: 0 ⏩: 0

ZielOmizuZielOmizu In reply to ??? [2015-07-16 09:01:55 +0000 UTC]

I've been sitting here trying to get this to work but for some reason, when trying to use the black content boxes, their backgrounds end up transparent??
I copied the codes exactly and redid them multiple times, I don't know if adding more </divs> will fix it but I simply can't figure it out.

👍: 0 ⏩: 0

KhioeeKhioee In reply to ??? [2015-07-04 18:35:12 +0000 UTC]

 


here's the code for whoever's having trouble !!
(also if anyone needs any help coding custom boxes, i'd be glad to help!!)

<div class="mods-column-ll"><div class="sealed-zone"><div class="cctextarea" ><div class="pp" align="center"><div align="center">LEFT_COLUMN_CONTENT</div></div><div></div></div></div></div><div class="mods-column-rr"><div class="sealed-zone"><div class="cctextarea" ><div class="pp" align="center"><div align="center">RIGHT_COLUMN_CONTENT </div></div></div></div></div></div>

👍: 0 ⏩: 11

melobuniiPmelobuniiP In reply to Khioee [2015-11-13 11:44:17 +0000 UTC]

Can you do the one with the titles? I can't get it right.

👍: 0 ⏩: 0

RoxinableRoxinable In reply to Khioee [2015-10-15 00:43:14 +0000 UTC]

do you know if there is a way to make the left column box
larger? ovo

👍: 0 ⏩: 1

karamatsugirlkaramatsugirl In reply to Roxinable [2016-03-02 14:50:58 +0000 UTC]

o

👍: 0 ⏩: 1

RoxinableRoxinable In reply to karamatsugirl [2016-03-02 14:59:13 +0000 UTC]

ay

👍: 0 ⏩: 0

rbnkgrbnkg In reply to Khioee [2015-10-05 23:56:21 +0000 UTC]

is there a way to change the boxes from round to square?

👍: 0 ⏩: 1

DivideByZiroDivideByZiro In reply to rbnkg [2015-10-27 10:42:15 +0000 UTC]

You'd have to find squared custom boxes.

👍: 0 ⏩: 0

PaintSpIashPaintSpIash In reply to Khioee [2015-09-22 11:43:23 +0000 UTC]

Thank you so much!!

👍: 0 ⏩: 1

KhioeeKhioee In reply to PaintSpIash [2015-09-23 15:32:19 +0000 UTC]

no problem !! i'm glad to help uwu 

👍: 0 ⏩: 0

MordecactiMordecacti In reply to Khioee [2015-09-12 16:05:33 +0000 UTC]

You
are a god
tHANK YOU SO mUCH
i'd love it if they were black but this is just as good// thanks ;;

👍: 0 ⏩: 1

KhioeeKhioee In reply to Mordecacti [2015-09-13 02:27:34 +0000 UTC]

no problem !! 
i don't know how to make them black, i'm sorry ;;0;;
if you find out, i would love to to see the code you use uwu 

👍: 0 ⏩: 0

emotional-chicken21emotional-chicken21 In reply to Khioee [2015-08-18 02:28:28 +0000 UTC]

how do you put on a background image ?? 00:

👍: 0 ⏩: 0

CatatombiCatatombi In reply to Khioee [2015-08-01 01:23:49 +0000 UTC]

!!! thank you for that
but i have a question
how do you get it to do somthing like this?

👍: 0 ⏩: 1

KhioeeKhioee In reply to Catatombi [2015-08-01 02:00:01 +0000 UTC]

ahh the boxes used for that are a wide and these columns, i can make a code similar to that one for you, if you'd like uwu

👍: 0 ⏩: 2

preshfinnpreshfinn In reply to Khioee [2015-11-25 11:55:44 +0000 UTC]

is there any way to widen the columns??
I've tried many ways and it always either breaks the whole custom box
or just end up facing the right (as usual)

👍: 0 ⏩: 0

CatatombiCatatombi In reply to Khioee [2015-08-01 02:04:56 +0000 UTC]

!!! wait i think i figured it out
YDAH
ty tho

👍: 0 ⏩: 1

KhioeeKhioee In reply to Catatombi [2015-08-01 02:18:11 +0000 UTC]

no problem !!

👍: 0 ⏩: 0

westkardashianwestkardashian In reply to Khioee [2015-07-13 18:05:28 +0000 UTC]

hhello would you happen to know how to put these
content boxes in columns like the ones shown above??

👍: 0 ⏩: 0

crowned-kittencrowned-kitten In reply to Khioee [2015-07-12 03:52:42 +0000 UTC]

This code still does not work for me, and I know it's not due to me not being a premium member because I've seen non-premium users with this feature on their page. Do you know of anything else I could do?

👍: 0 ⏩: 1

KhioeeKhioee In reply to crowned-kitten [2015-07-13 01:50:29 +0000 UTC]

hmm i thought only premium members could. if you could link me to a profile that doesn't have a premium that uses it, i may be able to figure it out uwu 

👍: 0 ⏩: 0

s-teel-fangs-teel-fang In reply to Khioee [2015-07-10 17:40:08 +0000 UTC]

[ how would one incorporate scroll boxes into the columns? ; v ; ]  

👍: 0 ⏩: 1

KhioeeKhioee In reply to s-teel-fang [2015-07-11 03:27:47 +0000 UTC]

hmm i'm not too sure. i tried to change it earlier but i had some issues. 
it's something to do with removing the begining of this code and adding in the beginning of the scroll box code 

👍: 0 ⏩: 0

pawsupawsu In reply to Khioee [2015-07-06 02:00:42 +0000 UTC]

Could you possibly change the white bg to this kind of bg?:

That would be super helpful!!

👍: 0 ⏩: 0


<= Prev | 1 2 | Next =>