Developing a Thesis Magazine Skin

thesis-skin

As I mentioned yesterday I will present a new design for omTVserier this month and since it is a news site I thought it was a good idea to use a magazine orientated theme. Unfortunately there only seems to be a few good looking themes like this and since I have been using Arthemia for a long time now I decided to create a new one built on Thesis.

The thing is that even though I spent hours trying to find inspiration from existing themes I was not able to find one single good looking magazine site built on Thesis. Therefore I have decided to share my skin when it is done. It will probably not be free since I have spent several paydays working on it, but I promise it will not cost much.

What do you want in a magazine styled theme?

To make this skin even better I thought I would ask for your opinion. What do you want in a theme built for magazines and news sites? Support for any particularly plugin, featured content, YouTube-integration, etc?

What I have this far

  • 2 sidebars ready for unlimited widgets
  • One footer ready for 4 widgets
  • Built in search in the header
  • Dropdown-menu

Please think hard and ask your friends if possible. I am certain a lot of people will appreciate this so lets make it as great as possible.

Import and Export WordPress Thesis Settings

thesis-settings

Yesterday I wrote a post sharing my tips on my favourite Google AdSense themes for WordPress and as a follow up question I was asked if it is possible to export your Thesis-settings and import them to another site. This is extremely useful if you decide to use Thesis when creating small niche sites because it saves you time which you can use to develop unique content.

The solution is a plug-in named “Thesis Import/Export” and as soon as you install it you can download all your Thesis-settings into three different files. One for your Thesis-settings, one for your Thesis-design and one for your OpenHook-content which is great if you use the OpenHook-plugin.

When you are done exporting your settings you can upload them again to a new site just by locating them on your hard drive and pressing the import-button. Remember that this is only for your Thesis-settings and you will have to install WordPress and upload your plugins just as usual.

Download Thesis Settings Export

Remove Capitalizing in Theis Sidebar Headings

Yet another quick post on how to customize Thesis today. The question is from a member on the Thesis Forum named delish.

Can you please tell me how i can style the sidebar headings? I don’t like how it automatically capitalize them.

This is a one-liner which you should add to your custom CSS-file.

.custom .sidebar h3 {font-variant: normal; letter-spacing:0;}

If the letters moved a bit to close you can use this instead.

.custom .sidebar h3 {font-variant: normal;}

Feel free to ask questions and don’t forgot about my Thesis discount.

Add Static Background in Thesis

Static backgrounds, scrolling backgrounds, etc. We have many names for the things we love. In this case I’m talking about a static background that follows you when you are scrolling down the page.

I’m currently working on a small niche site about the famous runner up artist Adam Lambert from American Idol 2009. On this site I thought it would be a neat idea to add a static background and I’m sure more of you are interested in how to create on. Don’t forget my other posts on how to customize Thesis.

An Example

adam-lambert

In this case it is a bit difficult to show you with a image and instead I recommend you to head over to my Adam Lambert Fan site to get a close look on what a static background looks like.

How to Create a Static Background

This is probably one of the easiest customizations you can do for Thesis. Just head over to your custom CSS-file and add the following row.

.custom {background: #000000 url(http://domain.com/background.jpg) no-repeat fixed top center; margin: 0 auto;}

Remember to replace the URL into your on image.

Suggestions for Tutorials

If you have any questions whatsoever on how to customize Thesis, feel free to contact me. If you are on your way to buy Thesis, don’t forget that I’m offering you a Thesis discount when ordering through me.

Change Colour of Sidebars in Thesis

Updated post with a new and better method.

Today I got a question from Jacob Yap and even though I could easily have answered him within the mail I thought this was a great opportunity to finally start my Thesis page about how to customize Thesis.

Jacobs question:

May I know how to edit background color of the sidebars?

How to change the background colour of the sidebars:

There are a few different methods on how to solve this and depending on what you are looking for I can recommend three of them.

Method 1

Thanks to the simplicity in Thesis we can easily change the colour of the sidebars with one simple line of CSS. Depending of if you want to change sidebar_1 or sidebar_2 you can easily change this within this line:

.custom #sidebar_1 {background:#3971DE none repeat scroll 0 0;}

The problem is that your sidebar more often than not is shorter than the rest of the page. Because of this your sidebar may end in the air, and beneath you have the same boring colour like the rest of the page.

Method 2

If you want the same colour of both your sidebars you can easily get around this by simple using these lines instead:

.custom #content_box {background-color:#3971DE;}
.custom #content {background-color:#FFFFFF;}

Instead of changing the colour of your sidebars you change the background colour for all of your content. Then you simple change the background colour for your main content (post).

By doing so you you will get equally long sidebars, but if your sidebars is longer than you content the background of your content will not reach to the bottom. This happens rarely but one example is your 404-page.

Method 3

This is a hack a lot of sites used back in the old days, but it still works as good as back then. You basically replace your background with a image.

  1. Take a screenshot of your site.
  2. Open it in Photoshop and fill your sidebars and content with the background colour you are looking for.
  3. Crop everything outside of your sidebars.
  4. Change the height into 1px.
  5. Save it and upload it to your site.

Now you should have a image looking like this. Head over to your custom CSS in Thesis and add this line:

.custom #content_box {background: #FFFFFF url('http://domain.com/background.jpg') repeat-y top center;}

As you can see on my page about how to make money with Twitter all the background continues all the way down to the bottom now.

What do you want to know?

Do you have another question about Thesis, blogging, personal development or simple a question about me? Simply get in touch with me through my contact form. I will try to answer all of your questions within 24 hours.