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).
Congratulations on the facelift. Remember to turn GA back on (I forgot this in my own blog’s facelift last year…).
Do keep up the good work. I love your work on data visualization, specifically with Matlab.
Hi Yair
Thanks for the encouragements, and stay tuned, my next post is on a new colorbar (not color palette), and that may even kick off a Matlab contest…
PS what is GA?
Cheers
Matteo
Google Analytics
Ah! Thanks
Hi! I just came across this post now, as I am thinking of switching from my current theme Twenty Eleven, to Oxygen. I like the clean look, but I want to know if you I can have my full posts appearing on the front page like this: crushland.wordpress.com? I like that it shows shortented posts with featured image thumbnail, but I only want this for the other pages (Restaurant page, etc). I’d appreciate if you would let me know! Thanks.
Hi Shafeeqa
I am not too sure about that. Since I only write posts on my main page, and I like the thumbnails, I never really thought about it. I suspect it is a feature of Oxygen you cannot change, but I am not an expert, so I encourage you to post your question on the WordPress forums. Good luck.
thanks. But, how did you do for the homepage ? in Oxygen, normaly, there are the slider, 3 “recent articles” and “more articles”. You have only the form of “recent articles”, and for many posts ! in the forum WordPress the staff say always “it’s not posible change the recent articls, only remove them”. in my case, i want the slider +, like you, any “récents articles” with the image (and no like in “more articles” where there’s no image). i’m very curious, very beginner in css and English languages !, but if you can say me it’s great !!
Hi Nicolas
I will explain step to step with a new post as soon as I can. For now, quickly:
After I removed the third column, in the first column (the one on the left) I did two things:
1) I added the recent post widget: http://en.support.wordpress.com/widgets/recent-posts-widget/
2) I created an A-Z Post Index this way:
a) I created a page with all posts. I do not show this page in the page menu.
b) I created a page widget, with the name of Post Index, where I show only the A-Z page http://en.support.wordpress.com/pages/hide-pages/
To have all articles showcased in the home page with images, refer to these:
http://en.forums.wordpress.com/topic/oxygen-theme-showcase-page-slider-demo-site?replies=2
http://en.support.wordpress.com/featured-images/
Hope this helps. Check the blog, I will have the new post soon.
Wow you rock! May I please ask: How did you get the pages in your black box to NOT duplicate in the header index? miraclesofjoshuatree.com
Hi
Thanks, I am glad you find this post useful.
The header index is set up to show pages. I did this adding a primary menu. My black box is set up as secondary menu and to show categories, not pages. Same as in the Demo I hope this clarifies it.
Hi!! thanks for all these explanations! I am trying to create my blog and one of the important things i want to settle is what you mention “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.”. can you give a step by step list of what to do to do so?! you said that you did it, but when scrolling down in your blog, everything scrolls, the horizontal menu and the vertical menu move too… thanks for the help!!!!
Hi
Unfortunately, as I wrote in the UPDATE section at the end of this post, when viewed NOT in Full Window mode the fixed secondary menu and fixed header overlapped with the content of the home page. 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 other issues when viewing in full window mode.
So I initially decided to revert to the default Oxygen scrolling menu and header. BUt as time went, I decided I like it as it is now, so I probably won’t try to do it at all.
If you want to give it a try with your blog, you need to purchase the Custom Design upgrade, then paste the code (you find it in the post) in the CSS section, and play with the pixel values until you get something you like. Hope this helps. Good luck.
Hey there! I just started a new site with the Oxygen theme and am trying to figure out how to remove the right column to extend the middle posts column as well. I’m completely new to CSS. Could you share with me how you did this? Thanks!
Hi
First of all you need to purchase the Custom Design upgrade.
Once you have done that paste in the CSS section (will be empy since this is a new site) the code below:
/* 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;
}
It should work. Please consider I am an amateur so you may need to tweak this to suit your site.
If you get stuck I recommend posting a question in the forum with your code, and explain undesired vs. desired result.
Good luck with your site.
Thanks for this great post! Do you know of any way to create page-specific custom black-box sidebar menus with this theme? So far, I can only create one, unchanging black-box sidebar menu, but I am hoping to be able to make more than one, and have it appear on only certain pages. Ideally, I’d like to have several of them, set to appear on certain pages. Sweet post – thank you!
I am glad this was useful. I have not looked into this any more and not tried anything like what you ask. If you do find out how to do that, let me know, I’d be interested.