1 2 |
|
---|---|
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 NeededPastebin link. Copy the code it gives you and paste directly into your den description. HTMLThis 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> ![]() 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 |
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 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...} ![]() 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. ![]() |
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. ![]() |
Autumn-Springs (#64116)
Magnificent View Forum Posts ![]() Posted on 2017-08-09 21:52:13 |
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? "^^ ![]() |
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> ![]() |
Rebevile (#107824)
Heavenly View Forum Posts ![]() Posted on 2017-08-25 10:04:24 |
Darklily (#5809)
![]() Heavenly View Forum Posts ![]() Posted on 2019-02-22 06:41:39 |
Jack (Side) (#168737)
View Forum Posts ![]() Posted on 2019-02-24 15:43:23 |
Thank you so much! :) ![]() 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-- ![]() |
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. ![]() |
Cas • M (#145820)
![]() View Forum Posts ![]() Posted on 2019-02-27 19:08:46 |
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) ![]() |
Jaxson (#259213)
Pervert View Forum Posts ![]() Posted on 2023-08-20 10:56:16 |
1 2 |
---|