Marigold Town City Hall

Home / For Residents / How to Create a Sign

How to Create a Sign

Four different sign types illustrate the different styles of signs that might be used

Signs are not your index.html page. Signs are on a separate page, preferably named sign.html to maintain consistency across sites. These pages are limited to 150 pixels by 150 pixels, so make sure all of your content fits within those parameters—there's no scrolling!

Signs can vary in aesthetics and purpose. Some might have hours, others might have special "sales" that are going on a limited period of time. There might be showtimes or featured artists. It's totally up to you what exists within the space, but it should look and feel as though it's promoting an actual business, organization, or physical place.

If you plan on having hover effects, make sure you have your entire Sign linked to your website and with target="_top" in the link tag.

Steps

Open your favorite text editor and create a file named sign.html.
Feel free to use internal, external, or inline CSS.
Code your page to look like the way you want, fitting within 150 pixels by 150 pixels wide.

Include a CSS reset

It's recommended to include this code into your CSS for your sign.html page, which is called a CSS reset. This particular one is from Josh W. Comeau:

*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

The CSS reset will help with consistency across signs.

If you're ever unsure as to what to make your sign look like, reach out to Support and we'll work on it with you.

‹ Previous

Next ›