Hiya!

Here's the code you'll need for rounded edges, you can add whatever you'd like:

.divOne {
border-radius: #px;
}

As for the rounded scrollbar here's what you'll need:

/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #HEXCODE;
border-radius: #px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #HEXCODE;
border-radius: #px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #HEXCODE;
border-radius: #px;
}

Please note that this will not display on Firefox and IE browsers, so any players who use those as their preferred browser will not be able to see the special scroll bars.

For titles, you can just use a simple div box, just make the width 100% and the height close to the text, maybe like 20px.

Here's the code you'll need though, add what you want inside the {} brackets if you want:

CSS:
.divTwo {
border-radius: #px;
}

HTML:
<*div style="width:#px;height:#px;background:#HEXCODE;border:#px solid #HEXCODE;" class="divTwo"*>Text Goes Here<*/*div>

Remove any *'s you see in any code here, replace any #'s with numbers and replace any #HEXCODE with a color code.

Hope it helps!

You have liked this post!

I'm having a bit of trouble with the scrollbars- where do I put them in my code so that they show up in the boxes?

You have liked this post!

This is how you'll want to set them up:

.divOne::-webkit-scrollbar {
width: 10px;
}

.divOne::-webkit-scrollbar-track {
background: #HEXCODE;
border-radius: #px;
}

.divOne::-webkit-scrollbar-thumb {
background: #HEXCODE;
border-radius: #px;
}

.divOne::-webkit-scrollbar-thumb:hover {
background: #HEXCODE;
border-radius: #px;
}

You'll need to change the name(divOne) to the name you specified for your div boxes. Be sure to keep the . infront of the name or it won't work.

Also, just copy and paste the same code as many times as you need it but always remember to change the name of the div.

Hopefully that helps. :o

You have liked this post!

So, in the end, it will look like this?

( CSS )

/*Player Info Box*/

.divOne {
border-radius: 10px;
}

.divOne::-webkit-scrollbar {
width: 10px;
}

.divOne::-webkit-scrollbar-track {
background: #d1bb93;
border-radius: 20px;
}

.divOne::-webkit-scrollbar-thumb {
background: #e8ddc3;
border-radius: 20px;
}

/*Xtra Info Box*/
.divTwo {
border-radius: 10px;
}

.divTwo::-webkit-scrollbar {
width: 10px;
}

.divTwo::-webkit-scrollbar-track {
background: #d1bb93;
border-radius: 20px;
}

.divTwo::-webkit-scrollbar-thumb {
background: #e8ddc3;
border-radius: 20px;
}

/*Wishlist Box*/
.divThree {
border-radius: 10px;
}

.divThree::-webkit-scrollbar {
width: 10px;
}

.divThree::-webkit-scrollbar-track {
background: #d1bb93;
border-radius: 20px;
}

.divThree::-webkit-scrollbar-thumb {
background: #e8ddc3;
border-radius: 20px;
}

/*Goals Box*/
.divFour {
border-radius: 10px;
}

.divFour::-webkit-scrollbar {
width: 10px;
}

.divFour::-webkit-scrollbar-track {
background: #d1bb93;
border-radius: 20px;
}

.divFour::-webkit-scrollbar-thumb {
background: #e8ddc3;
border-radius: 20px;
}


( html )

<*div style="width:650px;height:200px;border:1px solid #ffffff;" class="divOne">Info<*/div>

<*div style="width:250px;height:100px;border:1px solid #ffffff;float:left;" class="divTwo">Xtra<*/div>

<*div style="width:250px;height:100px;border:1px solid #ffffff;float:right;" class="divThree">Goals<*/div>

<*div style="width:250px;height:100px;border:1px solid #ffffff;" class="divFour">Wishlist<*/div>

?

You have liked this post!

Yep!

Everything looks correct! Float left and float right however will not work anymore due to the recent coding change.

Are you trying to place the Xtra and Goals div boxes side by side by chance?

You have liked this post!

Yup! Is there a better way to do that than with the float?

You have liked this post!

Here's the code you'll need for side by side div boxes:
<*div style="width:800px;"*>
<*div style="width:#px;height:#px;float:left;background:#HEXCODE;border:#px solid;"* class="scrollBox"*>Text1<*/*div><*div style="width:#px;height:#px;float:right;background:#HEXCODE;border:#px solid;"* class="scrollBox"*>Text2<*/*div>
<*/*div>

Float left and right still work this way as I use it on my den page so it works perfectly fine.
Be sure to remove any *'s, replace any #'s with numbers and replace any #HEXCODE with a color code. With this, make sure to not put any spaces or breaks in between the two div boxes you'll type in or they will not be lined up correctly.

You have liked this post!

Sorry if this is really late but is there a version that works for mobile too? I’m having the hardest time formatting these they won’t even show up

You have liked this post!

No den page bio shows up on mobile ^^’
We can still see the background and changes made to the basic den format, but anything written in the Territory Description box will not show (including your css/html scrollboxes, and any art you put in there).
I believe that’s a Lioden thing, not a coding issue; your code would seem fine from a computer.

You have liked this post!

Ohhh I see! So you could see from a computer but not mobile?

You have liked this post!

Yep! <3

Take a look at my den page on mobile and then on your computer, if you can- I don’t have any CSS changing the style of the page, but I do have a lot of text and some art in my Territory description. None of that shows up on mobile, but it does show when viewing from a computer!
That’s the same section where the scrolly boxes go, so they and anything you type in them won’t show on mobile (but will show from your computer) too. <3

You have liked this post!

Aaa!! That’s not fair ;w; I don’t have a computer heh I thought I was just doing it wrong thank you though!

You have liked this post!

Ahh I see, you’re welcome! <3

You have liked this post!

Okay, I'm so confused. How do you get the text boxes to scroll? I don't understand any of this (￣Д￣；)

You have liked this post!

question, (i dont know how to just ping one person)

is there a way to make the backround a solid color? im wanting the text white and the backround the grey iv been using what i thing is (50,50,50)

the css is made by me and i just don't understand boxes yet. but every time i try one it comes out with a clear background

You have liked this post!