I recently updated the blog look by switching to the Oxygen WP theme. This is a very good looking theme and I am thrilled by the results.
I made a few changes to the default look using CSS code. Mind you, nothing extraordinaire, in fact I am an absolute beginner. But with a good tip from WP staff member philiparthurmoore, a bit of reading, and a lot of (failed) experiments, I got exactly the look I was after.
These are the changes I made:
first, I removed one of the three columns, the right one, indicated by an arrow in the Oxygen demo below, so as to have more room available for the posts’ content.
Second, and third, I wanted to have both the header and the category menu (indicated by arrows below) fixed in place at the top of the page when everything else is scrolling.
Notice that to accomplish that for the black category menu I had to add an image widget underneath it, with a white image of the same size as the menu. This was to allow the other widgets to start below it. A bit of a pedestrian solution, but it works.
By the way, the black category menu is shown in the demo but it does not come up by default when you first use the theme. You have to create it in the Menus (see below), add your categories to it, then you can shuffle them around by dragging and dropping (very cool).
That’s it, Bob’s your uncle!
And here’s my lightly commented code. Let me know if you like the blog’s look and if you have any suggestions.
/* To create fixed position secondary menu */
.menu-secondary {
position: fixed;
width: 180px;
margin-top: 185px;
margin-bottom: 190px;
padding: 0 0 34px;
}
/* Added blank Image Widget with white box 180px x 330px */
/* to keep other widgets below secondary menu */
.widget_image {
margin-top: 205px;
}
/* To display nothing in the third column */
#tertiary {
display: none;
}
/* To allow main content to extend into third column */
#content {
width: 750px;
margin-left: 215px;
}
/* To create fixed position header */
#masthead {
clear: both;
padding: 70px 0 0;
width: 100%;
position: fixed;
z-index: 200;
background-color: #fff;
margin-bottom: 10px;
}
#content {
margin-top: 185px;
}
UPDATE
Reader Ron DeSpain wrote to let me know when not in Full Window mode the fixed secondary menu and fixed header overlapped with the content. Not only that, but some of the text disappeared outside of the right page edge. I tried a couple of fixes, but those then resulted in issues when viewing in full window mode.
So I decided to revert for now to the default Oxygen scrolling menu and header, until my CSS programming skills allow me to get this sorted (taking courses, see below).
