Skip to main content

How To Make Your Site Pretty Without CSS

Submitted by jessica on Fri, 02/23/2018 - 21:43

emoji heart eyes

There a few ways to make your site look aesthetically pleasing, including

  1. Colors
  2. Fonts
  3. Themes

If your site is an informational blog, such as this one, you may want to focus on the first 2. These sites tend to focus on simplicity and readability, because they are trying to convey information as easily as possible.

If your site is for a business that requires a flashier design, try installing a theme that contains slideshows and special effects, such as animations

Colors
To change the colors, go to Appearance > Settings. Choose your theme, and see if you can configure the colors of the header, text and links there. This way you won't have to sftp to your files on your web host, and customize your CSS. If there is no way to change the colors under Appearance > Settings, then you will have to add CSS. I will cover this in a future post.

Fonts
To change your fonts without extensive CSS, try the @font-your-face module.

The following fonts are rendered using this module.

Brandon Grotesque
Abril Fatface Italic
Capitolium 2 Light

Pretty neat, right? This module can pull fonts from Adobe Edge Fonts, Google Fonts and Typekit. If you are using Typekit, and want to avoid a Flash of Unstyled Text (FOUT), then add the following custom CSS to your theme:

.wf-loading {
visibility: hidden;
}
.wf-active {
visibility: visible;
}

Themes
Here is a link to some free drupal themes. If you decide to purchase a theme, check to see that it's compatible with your version of drupal, and that it has good ratings. I have purchased themes in the past, only to find that they were buggy and unusable.

So, these are a few easy ways to jazz up your web site. If you have any questions, feel free to drop a line here.