♥ Boba's compilation of CSS & HTML FAQs

♥ Boba's CSS & HTML FAQs ♥

Introduction

Hello everyone! I've been offering free CSS layouts and doing den & thread CSS commissions for a while now, and I've been meaning to make a thread like this to compile some frequently asked questions I get and serve as a central hub of sorts for troubleshooting.

Just to clarify, I'm only addressing questions people come across using my free den CSS layouts or any commissioned den/thread CSS, this is not a thread for answering questions on how to code your own CSS/HTML. For that feel free to learn from tetra's (#202) amazing CSS guide and Lila's amazing HTML guide! I'm also happy to help with coding questions through PMs :3 

This is very much a work in progress and will likely be a very lengthy thread, so please bear with me! I have a table of contents in the next box, each section's name is a clickable link that will bring you to the corresponding post below. You can also ctrl + F to search specific questions, which I've posted as well.

Also feel free to comment and let me know what other issues you think would be helpful to address here, and if they're not already on my list of things to include (again, WIP) I'm happy to add them :D

TABLE OF CONTENTS

Most commonly asked questions
1. How do I add CSS to my den/thread?
2. How do I create a new line?

Den CSS specific
1. How can I change the size/alignment of the den boxes in your free CSS layouts?

Thread CSS specific
1. My thread's background image keeps disappearing

Layout by me ♥

Most Commonly Asked Questions

1. How do I add CSS to my den/thread?

First, if you're adding den CSS, scroll down to the bottom of your den page to your den description editing box. For both den and thread CSS, you then click on the first icon in the editor toolbar that looks like . This will bring you to code view, and you'll know you're under code view because the text editor box will turn black.





Next, paste in whatever code you're using. For my free CSS layouts, this is all the text I have in the linked Pastebin. For den and thread CSS commissions, this is whatever code I have sent you.

Finally, press "save changes" in your den or "post" for your thread and you're done! If you don't want to post your thread just yet you can also press on the icon again to be brought back to normal view and preview what your thread would look like once you do post.

2. How do I create a new line? When I press enter it creates a new box, help!

This is perhaps the most common question I get, and this happens both with HTML boxes in dens as well as with boxes in threads. 

For desktop users and those who prefer normal view, simply press shift + enter (hold down the shift key while pressing the enter key) instead of just pressing enter and it will create a new line instead of a new box!

For mobile users, however, you'll have to go into code view and add a <br> line break tag at the beginning of each new line.

Den CSS Specific

1. How can I change the size/alignment of the den boxes in your free CSS layouts?

For the sake of simplicity all the den boxes in my free CSS layouts are the same size and layout, but there is in fact a way for you to change their size and/or alignment on your end. All you need is a little inline CSS with your HTML!

Default: The code for the default boxes in all my free CSS layouts is
<div class="box">TEXT</div>

Width: To change the width of the boxes you can use
<div class="box" style="width:96%;">TEXT</div>
where the 96% is the max width (there is some space on either side of the boxes) and the default width is 46% so anything between 46%-96% is ok.

Height: To make the boxes taller than the default you can use
<div class="box" style="height:270px;">TEXT</div>
where the height value of 270px is just an example, the default height on the boxes is 170px so anything higher than that will make the boxes taller.

Alignment: If you're only using one box and want it to be center-aligned, you can either set the width to the max of 96% so it will be automatically centered, or use the following
<div class="box" style="width:60%;margin-left:20%;">TEXT</div>
where you can use any width and calculate the left margin using
margin-left% = (100% - width%) ÷ 2

Combining: You can combine width, height, and alignment adjustments (you can include or exclude any of the three)
<div class="box" style="width:60%;height:270px;margin-left:20%;">TEXT</div>

Thread CSS Specific

1. My thread's background image keeps disappearing, what's going on?

Unfortunately this happens to everyone who has an image and not a solid color as their background in their thread CSS. When you go back to edit a post you'll find the background image link has broken, you just have to re-paste in the image link each time you edit that post. If you find this too annoying, simply use a color instead of an image as your background.