Posted by Expanding/Collasping Table + Boxes Template

Darklily (#5809)

Heavenly
View Forum Posts


Posted on
2016-05-01 07:21:16
So I get asked about these too much, and I only offer them with full css layouts(costing at least 1GB), so I figured I might as well put up one for free. You still have to do the work yourself to get the background colored and such, but I did the CSS work for you ;D

The only rule I have is do no remove my credit note at the bottom. (It's small.)

These only work in dens, clans, and branches! CSS does not work in the forums.

The table it will make looks like the one on my Main Account, the table with "Welcome to the Dark Marsh" at the top.

CSS Needed


Pastebin link.
Copy the code it gives you and paste directly into your den description.

HTML


This is with backgrounds. To get without backgrounds, just remove the "background:#HEXCODE;" parts. Or saving without removing them may auto remove them. When I say "without backgrounds" I really mean it will make them match LioDen's CSS or your den CSS if you have any.
Pastebin link.

You're welcome to rearrange things if you know how.

Oh yeah, and you can just use the expanding boxes ;D
Remove the *s. Remember you still need the CSS code!
The bigger one:
<*div class="tbox1"> TEXT HERE <*/div>
The smaller one:
<*div class="tbox2"> TEXT HERE<*/div>

Add style="background:#HEXCODE;" in there if you want to color it, like any div box.

More Boxes!


By request, here's a rounded corner box similar to my own ^^ Will be doing more of these later.
Pastbin link
HTML
<*div class="cssboxa"> TEXT HERE <*/div>



Hrt Icon 4 players like this post! Like?

Edited on 22/02/19 @ 06:40:31 by Darklily (#5809)

Darklily (#5809)

Heavenly
View Forum Posts


Posted on
2016-05-02 04:00:43
It's working now and links are up c:



Hrt Icon 0 players like this post! Like?

Sasa [πŸ…] (#30698)

Blessed
View Forum Posts


Posted on
2016-09-09 15:40:10
I am having trouble figuring this out. Could these boxes turn into the one like "My pride story has moved" Box on the account you posted this topic on? Thank you for sharing this though :D I am hoping to get two [Right longer for general talk & left for links. ^.^. Gotta figure out how to match it with my CSS...}
Edit: [Right For most wanted list, small. then left for a longer area for general stuff ^.^. Gotta figure out how to match it with my CSS...}



Hrt Icon 0 players like this post! Like?


Edited on 09/09/16 @ 22:41:57 by Sasa (#30698)

Gingermaple 🍁
Chaos Rat (#114955)

Heavenly
View Forum Posts


Posted on
2017-06-16 20:47:58
Question? how do you make it so you can see at least the title of the text? Before hovering all I can see is just a sliver of the box. do you know any ways i can increase the pre hovering height of the expanding boxes? if so, thanks.



Hrt Icon 0 players like this post! Like?

Darklily (#5809)

Heavenly
View Forum Posts


Posted on
2017-06-17 18:53:37
add style="height:HEIGHT!important;" to the div. Add your own height in pixels. I recommend at least 50-75px.



Hrt Icon 0 players like this post! Like?

Autumn-Springs (#64116)

Magnificent
View Forum Posts


Posted on
2017-08-09 21:52:13
is there any way to get the rounded look like the one on your page?



Hrt Icon 0 players like this post! Like?

Rebevile (#107824)

Heavenly
View Forum Posts


Posted on
2017-08-24 21:53:09
^^same question as them; and where exactly do you add the background code colour/height code? "^^



Hrt Icon 0 players like this post! Like?

Darklily (#5809)

Heavenly
View Forum Posts


Posted on
2017-08-25 09:38:22
Vodcatt, here's where to put height, for example:
<*div class="trbox1" style="height:75px!important;"*>TEXT TEXT TEXT <*/div>

Like I said, this is just an example of what it should look like. You need to add it to the "div" tags(Read here about "tags", which is the technical term). The background is in the <*td> tag, but if you're just using the box and not the table, here's where to put the background in that example. Ignore the ()'s for when you actually code it, that's just a note:

<*div class="trbox1" style="height:75px!important;background:000fff(Put your desired color hex code here. This one is blue for this example)"*>TEXT TEXT TEXT <*/div>



Hrt Icon 0 players like this post! Like?

Rebevile (#107824)

Heavenly
View Forum Posts


Posted on
2017-08-25 10:04:24
Thanks so much Dark <3



Hrt Icon 0 players like this post! Like?

Darklily (#5809)

Heavenly
View Forum Posts


Posted on
2019-02-22 06:41:39
Added another box code ^^ After like a year of not coding...



Hrt Icon 0 players like this post! Like?

Jack (Side) (#168737)


View Forum Posts


Posted on
2019-02-24 15:43:23
Thank you so much! :)



Hrt Icon 0 players like this post! Like?


Edited on 24/02/19 @ 16:50:05 by Witiko (#168737)

Cas • M (#145820)


View Forum Posts


Posted on
2019-02-27 18:58:02
I'm not sure if I did it right, but I don't think my boxes are working? I don't have any boxes showing up--



Hrt Icon 0 players like this post! Like?

Blackthorn (#5838)

Lone Wanderer
View Forum Posts


Posted on
2019-02-27 19:06:55
You need both codes, the HTML and the CSS. It won't interfere with your current one, as you can have more than one.



Hrt Icon 0 players like this post! Like?

Cas • M (#145820)


View Forum Posts


Posted on
2019-02-27 19:08:46
Ooh! I see!
Thank you!
;D



Hrt Icon 0 players like this post! Like?

Aelfrune (#197931)

Maneater
View Forum Posts


Posted on
2020-06-05 16:40:08
So my code looks like this: https://pastebin.com/h90SaUTb
Where would I put the code in to round the boxes? I can't seem to figure it out.
(I'm super late to the conversation, I know T^T)



Hrt Icon 0 players like this post! Like?

Jaxson (#259213)

Pervert
View Forum Posts


Posted on
2023-08-20 10:56:16
i have the rounded corner box on my den but how do i change color?



Hrt Icon 0 players like this post! Like?







Memory Used: 636.16 KB - Queries: 2 - Query Time: 0.00091 - Total Time: 0.00535s