blogging, CSS, wordpress

Better Blogging: Notes on a Design Change

Today I’ve got more notes on my blog’s recent theme change. This time, we’ll be checking out how to add a credit to the footer, and also change the look of the existing credits down there too.

If you missed a previous CSS post, browse my blogging tips tag, or check out these posts:

Add a Credit to the Footer

I added CSS so I could have my own credit down in the footer next to the existing two.

See:

Example of credit added to footer of Edin theme

Here’s the CSS I used to make that happen:

.site-info:before {
	content: "© Sarah Blackstock. | ";
}	

Notes:

  • Different themes label the footer credit area differently, but Edin (and several others) will use this selector to target it. Use the right-click Inspect method again (here!) in Chrome to find the correct selector for your theme.
  • Switch “before” to “after” to move your credit to the end.

Edit the Size & Color of the Footer Credits

You can also use CSS to adjust the size and color of the credits, as pictured below, where I made mine orange and a bit smaller:

Example of changing color and size of credits in footer of Edin theme

Here’s the CSS I added to adjust the color & size:

.site-info {
	color: #fa7f77;
	font-size: 12px;
}

.site-info a {
	color: #fa7f77;
	font-size: 12px;
}

Notes:

  • The first section of code above targets the plain text, while the second batch (with the “a” added in) targets the linked text.
  • Change the hex color code from the orange I’ve used (#fa7f77) to one that matches your site.
    • You can also use simple color words there, so try putting “black” in place of the color code if that’s the color you want.
  • Adjust the font size from 12px to any other number you’d like.

Tweet, comment, or email with any questions. And let me know if there are any other CSS topics you’d like me to cover here. I’m totally willing to temporarily break my blog for you to figure things out. 😉

4 Comments

  1. This is pretty cool and simple tip to personalize the footer. Most people like it.

    I wish WordPress.com provides an option to choose the footer credits between “Blog at WordPress.com” and “Site at WordPress.com”. Because not every website hosted on WordPress.com is a blog but every blog is a site 🙂

    Liked by 1 person

  2. moorevr says

    Hi Sarah! I’m having issues finding where to update the copyright information. Do I need to be in edit mode of the homepage, then inspect in my chrome browser? When I inspect I’m unable to find the .site-info.

    Thanks!

    Liked by 1 person

Comments are closed.