I am feeling very comfortable with WordPress these days. I just finished putting some touches on a theme for a community site (links to come later) without doing any actual theme development or PHP coding. The key is finding the right plugins, using the browser inspector, and mastering CSS. My wife & I were able to implement a multi-page site (with content at the ready – important! ) in just a day or two.

We started with the Poseidon theme for a clean layout, then added Better Font Awesome for Facebook icons, Easy Google Fonts for a great selection of fonts, Image Widget to put images in the sidebar, and Jetpack for custom CSS. Jetpack requires a WordPress account for full functionality. After creating pages, menus, and the sidebar, all that’s left is to improve some of the visual artifacts.

Here, the web inspector in your favorite browser is your friend. Once you identify element ids and classes, you can easily craft CSS to move and modify visual items. I made the following tweaks to the theme:

@import  """""""""""""""""""""""""""""""""""""""""""""'http://fonts.googleapis.com/css?family=Ubuntu'""""""""""""""""""""""""""""""""""""""""""""";
@import  """""""""""""""""""""""""""""""""""""""""""""'http://fonts.googleapis.com/css?family=Raleway'""""""""""""""""""""""""""""""""""""""""""""";

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
	
}

nav ul li a {
	font-family: 'Ubuntu', Tahoma, Arial !important;
}

.site-title a {
	font-family: 'Ubuntu', Tahoma, Arial !important;
}

This bit simply sets up the fonts to taste. The theme has built-in font configuration, but the theme configuration menu only supports font selection for paragraphs and headers. This leaves list items displayed in an arbitrary font! I tried to pry open the theme customization api elements in the PHP code for the theme, but I gave up. It’s just too easy to fix this in CSS.

@media (max-width: 624px) {
	.main-navigation-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	h1.site-title {
		width: 80vw;
	}
}

This bit fixes an issue with small displays. On an iPhone, the title was wrapping around to two lines and pushing the hamburger menu down even further. The result was ugly. This CSS reduces the site title to 80% of the screen width, leaving room for the hamburger menu icon (.main-navigation-toggle). Setting the icon position to absolute and pinning it to the top right corner of the page puts it exactly where we want it.

.color1 {
	background-color: #ddd;
}

.color1 > * {
	margin-left: 10px;
}

.color1 > .button {
	margin-left: 0;
}

Several pages have embedded forms, and we wanted those to pop out a bit. This CSS, together with some help from the Text mode of the page editor, gives those embedded elements a gray background, distinguishing them from the plain white background of the rest of the page.

#menu-social li {
	list-style: none;
}

Menus display in the sidebar as a list of links. This code removes bullets from the list items.

.myfacebook a::before {
	font-family: "FontAwesome";
	font-size: 20px;
	content: "\f082";
	padding-right: 10px;
}

This is one of my favorite tricks with FontAwesome! It places the Facebook icon to the left of Facebook links, provided that they have the right class property value. To specify the link class, go to Screen Options on the Menu WordPress page, and check CSS Classes. You can give each menu item a custom class. You’ll need the FontAwesome short codes.