MyCarta blog facelift: wordpress.com oxygen theme customised with CSS

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.

demo

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.

MyCarta

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).

menu

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).

RESOURCES: CSS and HTML course on Codacademy

HTML & CSS for Beginners

Coding with style

14 responses to “MyCarta blog facelift: wordpress.com oxygen theme customised with CSS

  1. 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.

  2. 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.

  3. 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

      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.

  4. 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.

  5. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s