I have just released Arbitrary Divs, a new, hidden set of Divs, designed solely for use with Custom CSS. If you're on the Community plan, you get 4 arbitrary divs. Pro plan gets you 16.

Let's say you want to have a background that looks like this:

alt text

This is all well & good, except the text may appear stretched differently. Here is an example of the text on mobile. And here is an example on a wide-screen display.

So, to perfect the text, we will use the new Arbitrary Divs to our advantage, by making the text and Minnit Logo on their own divs.

First off, we will be using these two images:

Image1 will be the Main glowing text

Image2 will be the Minnit Logo

We will upload them as CSS Assets in our "CSS / Premium Design" tab:

alt text

Now that we have done, let's begin our CSS work.

First off, the "Main" text size is 1057 x 400 pixels. We will cut this down to 10%, so 106x40.

Then, we will place this right beside the user list. The user list takes up 22% of the page, so using right:22% will be enough.

And finally, we will want this to float 60px below the top of the chat, so it looks nice.

The end result is:

#arbitrary-div1{width:106px;height:40px;position:absolute;top:60px;display:block;right:22%;background-image:url('%image1%');background-size:100% 100%;float:right;}

Example here!

Now that we have that down, let's add the Minnit Logo. We can use the "calc" function in CSS to make it go 22% away from the right of the page (1 "user list" away), and then an additional 106px further (so it goes to the very left of the "Main" text):

#arbitrary-div2{width:35px;height:35px;position:absolute;top:60px;display:block;right:calc(22% + 106px);background-image:url('%image2%');background-size:100% 100%;float:right;}

Here is an example of both of those CSS rules combined, and the end result

Now, no matter how the chatroom is viewed, the text will not be stretched, and will always be just to the right of the user list...

But, let's remember our users that are on mobile!

For users on mobile, it may look a bit far to the center, since there's no user list to worry about. Fear not -- arbitrary divs take place within the chatarea div, which contains handy CSS rules for users on mobile.

So, we add one final bit of CSS code:

.minnit-mobile-phone #arbitrary-div1, .minnit-mobile-phone #arbitrary-div2{right:0px;}

This will make both arbitrary divs to the very far right if the .minnit-mobile-phone class is present, which triggers the mobile chat.

So, all in all, our full code is:

#arbitrary-div1{width:106px;height:40px;position:absolute;top:60px;display:block;right:22%;background-image:url('%image1%');background-size:100% 100%;float:right;}#arbitrary-div2{width:35px;height:35px;position:absolute;top:60px;display:block;right:calc(22% + 106px);background-image:url('%image2%');background-size:100% 100%;float:right;} .minnit-mobile-phone #arbitrary-div1{right:0px;} .minnit-mobile-phone #arbitrary-div2{right:106px;}

And it looks like this on mobile, this on regular size screens, and this on stretched screens. The text and logo will always remain sharp, the same width/height, and always be to the far right of the message view, no matter what.

If you have any questions about using custom CSS, feel free to make a post, and I'll be happy to assist. Remember -- you must be on the Community or Pro plans to use custom CSS. Click here for details

Happy chatting!