blogging, CSS, wordpress

Better Blogging: Notes on a Design Change

I switched the theme of this blog from Singl to Edin recently. They’re both free themes by Automattic on WordPress.com, and are also available for download to use on self-hosted WordPress sites. (Not sure of the difference? See here.)

I’ve shared some CSS tips here before, on styling blockquotes and changing the color of your highlighted text. And since changing themes means changing CSS, I thought I’d share a few details on some adjustments I’ve made to the Edin theme so far. If you’re a WordPress.com user (like me!), you’ll need the Premium or Business upgrade to add CSS under Customize > CSS.

Note: I’ve left the blockquotes as-is (but the same CSS would work on this theme) and made my highlighting color match the new orange with the same method I shared before, so those directions remain the same.

The masthead area in Edin includes the site title and two menus, so of course I had to tweak those a bit to get a more customized look (while still leaving it super simple and not using a Header Image — because I haven’t made one and who knows if I will).

Adjust the Site Header

Here’s how it looked when I first added the theme onto my blog and put the menus in place:

My header before CSS in the Edin theme

In the Edin theme, when the Menu Style is set to Classic under Theme Options, the Primary Menu is the horizontal one under the site title (reading, my house, etc.), while the Secondary Menu is the one you see at the top right corner (about, now, contact). It all looks pretty standard and clean, but I like a little more color, so here’s how it looks right now:

My header after CSS in the Edin theme

It’s still basically the same. Nothing has moved anywhere, but with some slight adjustments it better fits my style.

Note: Your theme’s selectors (like .primary-navigation) for targeting a specific spot with CSS may vary, so you might need to find the correct ones for your theme. I explained how to do that under the “Here’s how I figured out what to target in Chrome” section in this post.

Here’s how I did it:

Change the Site Title’s Color & Size

.site-title {
 color: #fa7f77;
 font-size: 75px;
}

Alter the Primary Menu’s Colors

/*color of nav bar*/
.primary-navigation {
 background-color: #fa7f77;
}
/*color of links in bar*/
.primary-navigation a {
 color: #ffffff !important;
}

Notes:

  • See the notes I’ve added in between /* & */ ? Those comments can be really helpful in remembering what each bit of CSS is for and won’t interfere with how the code works on your site.
  • Change the colors to your own choices for the background color (the horizontal bar) and the text link color for the items in your menu.

Alter the Secondary Menu’s Colors

/*color of menu bar at very top*/
.secondary-navigation {
 background-color: #ffffff !important;
}

/*color of links in menu bar at very top*/
#menu-top a {
 color: #7ACCC8;
}

Notes:

  • Again, the comments (between /* & */) are helpful here, so feel free to use them too!
  • As with the other menu, change the colors to fit your own color needs. The first piece adjusts the color of the bar across the top, while the second handles the text link color.

Tweet, comment, or email with any questions. 🙂 Next time we’ll go over making a square photo round with only CSS and editing the look of the Social Media Icons Widget.

5 Comments

  1. That’s a pretty good design. I liked it. Intelligent use of secondary menu. Hard at first sight to think your are using Edin theme.

    Wow, sweet. You are also part of /now page movement. 🙂

    Liked by 1 person

Comments are closed.