Modifying your Website via Themes, Fonts, Text and more!

ZeroGravity Original Theme

Original Theme: ZeroGravity

Have you ever thought about modifying your website?

Whether you want to change the fonts in your blogs, the boldness of your site heading or the placement of your footer, websites can be altered to suit your needs and tastes.

I took the time to experiment on my website www.katrinavalenton.com by doing the following:

  • Changing themes
  • Modifying 3 CSS (Cascading Style Sheets) selectors in each theme
  • Creating ordered and unordered lists in this blog post
  • Emphasizing text in this blog post
  • Defining some content in this blog post with H1, H2 and H3 tags
  • Defining a new class that affects color, typeface and font size (applied to one paragraph in this blog)

I have also included before and after screenshots of my modification of 3 CSS selectors in each theme. Regardless of whether you are a computer science expert or a social media community manager just starting to learn basic codes and shortcuts, this blog is a helpful introduction into the world of website modification.

Table of Contents:

  1. Theme: Heidi (font-color, font-family, text-align)
  2. Theme: Twenty Twelve (color, background color, font-family)
  3. Theme: Coraline (color, font-family, font-weight)

Heidi

font-color

Changes:

color: #404040 changed to color #FF0000

Heidi Before Typography

Heidi Before Blog Post

Before

Heidi After Typography

Heidi After Blog Post

After

Heidi

font-family

Changes:

font-family: ‘Open Sans’, Arial, sans-serif changed to font-family: ‘Times New Roman’, Georgia, serif

Heidi Before Normalize

Heidi Before Blog Post

Before

Heidi After Normalize Code

Heidi After Normalize

After

Heidi

text-align

Changes:

text-align: center changed to text-align: left

Heidi Before Code Footer

Heidi Before Footer

Before

Heidi After Code Footer

Heidi After Footer

After

Twenty Twelve

color

Changes:

color: #333 changed to color #CC0099

Twenty Twelve Before Color Code

Twenty Twelve Before Blog Post

Before

Twenty Twelve After Color Code

Twenty Twelve After Blog Post

After

Twenty Twelve

background-color

Changes:

background-color: #fff changed to #FFFF00

Site Footer Before Code

Footer Before

Before

Site Footer After Code

Footer After

After

Twenty Twelve

font-family

Changes:

font-family: “Noto Serif”, serif changed to font-family: “Times New Roman”, serif

2012 Before Font Family Code

Twenty Twelve Before Blog Post

Before

2012 After Font Family Code

2012 After Font Family Blog Post

After

Coraline

color

Changes:

color: #333 changed to color #660033

Coraline Font Color Code Before

Coraline Before Blog Post

Before

Coraline Font Color After

Coraline After Blog Post

After

Coraline

font-family

Changes:

font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif changed to font-family: “Times New Roman”, serif

Coraline Before Heading Font Code

Coraline Before Heading

Before

Coraline After Heading Code

Coraline After Blog Post Heading

After

Coraline

font-weight

Changes:

font-weight: bold changed to font-weight: lighter

Site Title Code Before

Site Title Before

Before

Site Title After Code

Site Title After Website

After

Thank you for taking the time to read my blog! Leave a comment below or let me know about your website modification adventures by sending a tweet to @katrinavalenton!

Leave a Reply

Your email address will not be published. Required fields are marked *