Changing CSS to customize your WordPress theme (Manifest)

by Fuyang

With quite a bit of effort, I finally could relax and enjoy my blog’s nice and neat looking theme. Shortly speaking, there are not so many those “very minimal” type of theme on WordPress, after comparing around, I found these two theme very good but each has something that is not perfect in my opinion:

  • Penscratch – Good looking but font and line-space too big for me. The font color seems a bit too light. Also the setup of the background color causing the Latex equation to have a dark color background by default 😦
  • Manifest – Good looking as well, but the main content width is too narrow. It also cannot change the width based on your browser condition or your screen size of your device. As a modern website it should be self-adapted. Another thing is this theme doesn’t have a side bar where you can show some links such as categories or archives.

In order to make my blog looks better, I started to look into the customize CSS option that WordPress provides. Firstly I tried on Penscrath theme but in the end couldn’t solve the Latex color problem. Then I switched to Manifest, downloaded it’s CSS from the link above, search key word “width” inside, found many things like this:

#site-wrapper {
margin: 0 auto;
padding-top: 15px;
width: 500px;
text-align: center;
position: relative;
}

Which means that the “site-wrapper” is set exactly to 500px. No matter how wide your screen is. Thus by changing all the constant defined width in the original CSS to something like “50%”, then the webpage will show up in a nicer way, especially in my case that I use a very wide screen.

After I did those changes, weather it looks good or not, you should be easily see if you are viewing this post. (Suppose I am still using Manifest as the theme).

If you want to try these changes for yourself, try copy paste the following code to the WordPress CSS editor:

#site-wrapper {
 width: 51.8%;
}
#site-description {
 width: 60%;
}
#main-nav ul {
 width: 100%;
}
#main-nav ul ul {
 width: 100%;
}
#core-content {
 width: 100%;
}

h1 {
 text-transform: uppercase; /* Your Blog Title*/
}
h2 {
 text-transform: none;
}

.commentContent {
 float: left;
 width: 51.8%;
 margin-left: 22px;
}
#comments h3 {
 font-size: 1.4em;
}
#comments h3,
legend span {
 width: 51.8%;
}

#footer {
 width: 51.8%;
}
.footer-content {
 width: 100%;
}

With the code above your Manifest Theme should look the same as mine which you are looking at right now. And it’s nice that Latex by default can show up in a very nice way 🙂

e^{i\pi} + 1 = 0

Special thanks to my friend Jean Popescu for providing help and suggestions on this.