I’m always interested in how website owners arrive at the design for their site and the tools they used to get there. So I guess I should describe how I put this site together. (Jump to TLDR). I should say up front that I’m a little fixated on clean and functional design, mostly in that order. I tend to be a slightly fussy about how the pages look.

My first websites, back in the day, were plain HTML. That was a long time ago. Later I changed to Movable Type and then WordPress. Each required some work to learn, not to mention getting the hang of CSS. But it was fun.

Then sometime around 2007 I stopped blogging and until the last few months or so I was only vaguely aware of the current state of the art. So when I retired recently and decided to start a new blog I took a look around to explore what was out there. I looked at Svtbtle and Medium but I wan’t impressed. I had used Tumblr in the past and I knew it could be extensively customized but its ownership was in flux.

I was ready to just buy a hosting plan and build out a WordPress(.org) site from scratch when I stumbled on the WordPress(.com) hosted service. Out of curiosity I opened a free plan and began to look at themes and configuration options. It was not the old WordPress that I knew. It was a slick but locked-down platform. There were some limited CSS customization options but most of the code was walled off. As a challenge (and with lots of new free time) I decided to work within those constraints to see what could be done.

There were lots of themes available so that’s where I started. I needed something basic, simple and functional but reasonably configurable. Independent Publisher 2 looked like it had potential. It was clean and had the blog-like look I wanted. I added some new CSS to modify the block-quotes, link colors, font sizes, etc. All the WP cruft was removed. I fixed the header and footer to look exactly the way I wanted and came up with a sitemap structure that I could live with and voilà, …almost done.

One little thing annoyed me. The title of a page is also the name of the page in WordPress. And this theme always displays the title (if you enter one) on a page. The title styling is inherited from blog posts, left-aligned, and this looks horrible on a centered page. There’s no way (that I could find) to do a page only title customization. So no page titles. In the WP interface all my pages are named “Untitled.” It’s confusing at my end but it works visually for the end user. And it’s manageable if I keep the number of pages down.

Anyway, I think I achieved my goal of a clean site with decent looking fonts, a pleasing color palette and minimal navigation distractions, just by configuring the theme and adding some custom CSS (documented below). And the mobile rendering is just what I was looking for too. I can highly recommend Independent Publisher 2.

I hope this minimal design works for you. If anything I think it may be too clean. Discoverability for the footer links is low but if I keep the number of front page posts to five or so anyone looking for the about page will probably find it at the bottom eventually.

The photo pages took a little more thought as to how they would fit in with the rest of the site. I decided to put the galleries on pages and use URL forwarding (jjdaley.pics) to go to a photo index page (with an anchor to put the user at the correct header). So far this seems to work and the feedback I’ve received indicates that people aren’t too confused about the structure. Also, as far as galleries, I decided to upgrade to NextGen Pro and use photo tags to manage placement. The native WordPress/CoBlocks photo galleries were not great.

If you have any comments or suggestions or think navigation is problematic, I’d love to hear from you.

/*
THIS FORMATS THE H4 LINKS ON THE PHOTO PAGE SO THEY ARE BLACK AND NOT BLUE, THE NORMAL LINK COLOR
*/
H4 a {
	text-decoration: none;
	color: black;
}
H4 a:visited {
	color: black;
}
H4 a:hover {
	color: #dec63c;
}
/*
THIS IS THE MAIN LINK COLOR CODE
*/
a {
	
	text-decoration: none;
}
a:hover {
	color: #dec63c;
}
/*
THIS CENTERS THE FOOTER WIDGET
*/
.widget-area .widget, .comment {
	word-wrap: break-word;
	text-align: center;
}
/*
THIS FORMATS THE BLOCK QUOTE SO THE LEFT BORDER IS WITHIN THE CONTENT FRAME ALSO COLOR, ETC
*/
blockquote {
	border-left: 3px solid #edebeb;
	margin: 1.5em 10px;
	padding: .5em 10px;
	quotes: "\201C""\201D""\2018""\2019";
}
blockquote p {
	display: inline;
}
/*
THIS IS FORMATTING FOR THE MAIN LOGO AT THE TOP OF THE PAGE
*/
.site-title a {
	text-decoration: none;
	color: #c8dec8;
	font-size: 50px;
}
.site-title a:hover {
	color: #379928;
}
/*
THIS IS FORMATTING FOR THE  BLOG ENTRY TITLE HYPERLINK COLORS AND FONTS
*/
.entry-title a {
	color: black;
	text-decoration: none;
}
.entry-title a:hover {
	color: #9d9fa1;
	text-decoration: none;
}
.entry-title {
	font-size: 1.8em;
}
/*
THIS IS TO MINIMIZE AND GREY OUT THE CATEGORY HEADERS
*/
.page-header:not(.page-header-light) h1 {
	margin: 0;
	text-align: center;
	font-size: 20px;
	color: #d4d5d6;
}

TLDR

TLDR: I’d like to be able to say that I coded the engine and styled all the pages from scratch but really it’s just a customized theme on a WordPress hosted site.