HOME | DD
CypherVisor — CustomBox Columns tutorial by-nc-nd
Published: 2014-03-22 17:46:33 +0000 UTC; Views: 112255; 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
to me as an appreciation or support.Related content
Comments: 616
aaa hello everyone, I found out how to add more rows
if anyone need help you can ask me :0
👍: 0 ⏩: 2
< div class="mods-column-ll" >< div class="mods-column-ll" >left 1 content< /div > < div class="mods-column-rr" > left 2 content < /div > < /div > < div class="mods-column-rr" > < div class ="mods-column-ll" >right 1 content < /div > < div class="mods-column-rr" >right 2 content< /div >
ahh it been kinda long that i forgot ,, but here's the code! delete the space to use
please tell me if there's something wrong <3
👍: 0 ⏩: 1
YOU.... are a literal lifesaver. Thank you so much for this code
👍: 0 ⏩: 0
When I use this code, any links/buttons I put in the boxes don't work. Like, they're not clickable.
👍: 0 ⏩: 0
is there any way to also get like... 3 or 4 rows instead of only 2 ?
i looked on the internet but i barely could find anything D:
👍: 0 ⏩: 0
//Happened to see your comment
Well, not exactly, but here is a couple of sharp cornered boxes!
👍: 0 ⏩: 1
Ah! This is exactly what I was looking for, thankyou!
👍: 0 ⏩: 1
how do you get the two white text boxes next to each other as shown at the top? ;v;
👍: 0 ⏩: 0
90% of people marry there 7th grade love. since u have read this, u will be told good news 2night. if u don't pass this on nine comments ur worst week starts now this isn't fake. apparently if u copy and paste this on ten comments in the next ten minutes you will have the best day of ur life tomorrow. you will either get kissed or asked out in the next 53 minutes someone will say i love you
👍: 0 ⏩: 1
how would i do something like this?
prntscr.com/aywvzq
👍: 0 ⏩: 0
How do you make it into columns with this content holder?
👍: 0 ⏩: 0
Just insert the wanted image using this code <img src="IMAGE URL HERE">
👍: 0 ⏩: 1
ok i figured it out thanks!
👍: 0 ⏩: 0
Instead of aligning them left and right, how do I stack them so that they're on top of each other?
👍: 0 ⏩: 0
Uhh, how do I get the background to be white?? ; o ;
👍: 0 ⏩: 0
would i be able to put a picture on the right, and this on the left? if so how?
👍: 0 ⏩: 1
<*img src="URL HERE" div align="right"> w/o the *
👍: 0 ⏩: 1
i had tried that, but, it only either ended up at the bottom of it or it didnt show up at all
👍: 0 ⏩: 1
that means the image you're using is too large. try something smaller than 300x300
👍: 0 ⏩: 1
ah i see, alright!
👍: 0 ⏩: 0
does anyone knows the code with this one?
im waiting for an quick answer!
nvm figured out!
👍: 0 ⏩: 0
This was immensely helpful, thank you so much!
👍: 0 ⏩: 0
Every time I try to place another column (different than) underneath it puts it under the right column. Any help?
👍: 0 ⏩: 1
This happens to me too, idk what to do abt it ??
👍: 0 ⏩: 0
Can someone help me ? I want the boxes to be without a border // want to make them look like in the second picture but I only managed it to make them like the first pic :c *bad explaination*
👍: 0 ⏩: 1
the code for that is the 'source code' one !!
👍: 0 ⏩: 1
I have trouble doing this because everytime I do, the box comes out transparent. How do I make it to where it's NOT transparent?
👍: 0 ⏩: 1
i would love somebody's help,, for somereason my right column goes underneath my left column??
👍: 0 ⏩: 2
Ah I hope you don't mind me asking but how did you get it to work? ; v ;
👍: 0 ⏩: 1
sure thing,, i had a difficult time myself
choose one of these bad boys here
here:
now you would copy and paste this text in the tutorial into your custom box, and then where it says <<right column content>> you place on of these content-holder boxes code , and then the same for the left column
feel free to ask more questions
👍: 0 ⏩: 1
Omg thank you so much! ; o ;
Yeah I have been having a very hard time trying to figure this out u v u
but thank you again this really helped a lot! ^ v ^
Oh! Where would you place the code for the BG? c:
Like the thing that goes around the content box ~
👍: 0 ⏩: 1
sure thing ! i recommend looking at this tutorial
if ur having anymore troubles feel free to ask its no trouble at all
👍: 0 ⏩: 1
Omg thank you so much! ; o ; <3
This really helped a lot / v \
👍: 0 ⏩: 1
I suggest before the right column starts place more < /div > ( without space).
--- with out spaces of course ---
< /div >< /div > ############ < div class="mods-column-rr" >
The bolded area is where the right box starts
place more < /div > where I have placed the #
👍: 0 ⏩: 0
Is it just me or does this not work in a DeviantID?
👍: 0 ⏩: 1
no, most of the codes doesn't work in dA' ID and this code will not work if you don't have premium.
👍: 0 ⏩: 1
That's ridiculous. Most websites I know that let you make your own HTML profile allow almost all tags to all members. Oh well, DA being the profit-driven fustercluck that it is, I'm not even surprised any more.
👍: 0 ⏩: 1
yeah well, sadly that's how it works here. although, there's another way to use something similar but you need a ima to do that. you can see in my profile how i have two columns, but it's using this code <img src="url" align="left or right"/> that allows you tu put the img there.
👍: 0 ⏩: 1
1 | Next =>