Any suggestions on how to make my list look better?

Hello all. I am trying to make a good list but I just can’t find a good place to start my code.

I legit have this…

Can anyone send me a suggestion on how to make my list look better.

Heres the code:

<%- include("partials/header", { bot, user, path, title: "Twintails🎀 - Bot Dashboard" }) %>
<link rel="shortcut icon" href="">

<% user.guilds.forEach(guild => {
    const permsOnGuild = new perms(guild.permissions);
    if(!permsOnGuild.has("MANAGE_GUILD")) return;

<p><%= %></p>
<% if (bot.guilds.cache.get( { %>
<a href="/dashboard/<%= %>">Edit Settings</a>
<% } else { %>
  href="<%= `${}&scope=bot&guild_id=${}&response_type=code&redirect_uri=${encodeURIComponent(`${bot.config.domain}${bot.config.port == 80 ? "" : `:${bot.config.port}`}/callback`)}` %>">Add
<% } %>
<% }); %>
<%- include("partials/footer") %>

uwu, thanks!

How you expect the item to look like?

Like this?
[Server Name] [Edit Settings]

I was thinking more of a clean design like that of mee6

1 Like

I would suggest you to search on google on how to in css, so you can learn more about styling. I will try to play with css and see if there is nice design that I can suggest you.

Ight, thanks.

Okay, this is quick design that I made:

test.js - just for test purposes JavaScript file

["server1", "server2", "server3"].forEach((name) => {
  var item = document.createElement("div");
  var div = document.createElement("div");
  div.innerHTML = name;
  var button = document.createElement("button");
  button.innerHTML = "Edit";

style.css - actual style file

.server { background: #303030; padding: 10px; margin: 0; display: block; }
.server * { -webkit-appearance: none; box-sizing: border-box; color: #eee; display: inline-block; font-family: Arial; }
.server .name { width: 87.5vw; padding: 5px; }
.server .edit { background: #505050; border: none; outline: none; border-radius: 15px; padding: 5px; padding-left: 25px; padding-right: 25px; }

Keep in mind this may not be responsive and it contains Arial font, so you may want to remove it from css.

1 Like

Oh wow, thanks!!

1 Like

What would you call something like this? Just for reference. A list, or what?

You mean the classname for those div’s?

I just mean in general, what would you call something that has a Name and button option.

A list, specifically for this list, an server-list.

omg, that was at the tip of my tongue for so long, thanks.

1 Like

Here is my advice:

  1. Don’t use w3css. Its a bit boring an overused, I would recommend that you use another CSS framework.

  2. Center all the items on the list and replace the plain a tags with buttons.

Lol, why use any framework when you can write it yourself

My advice is add some padding around your list. Then you can round some corners, play with units and colors until you get to something good looking. Tbh i’m not really proud of my open radio selector list either but it’s sufficent

and all I used with padding and some cool selector magic to pick the right colors

My creative skills are in the negatives, mind you.