Custom made for MsSheepy

Hi! Thanks for visiting. Here you can find blogging tips and free Wordpress themes. You may want to subscribe to RSS feed.

We’ve finished with a custom made theme for MsSheepy. The client requested a cute female sheep as the main cast in her blog to match her blog’s name. Blue and white is her color selection for the theme.

Client said:

After using so many free and available wordpress themes, I still couldn’t find the one I loved. I stumbled upon SimplyWP.net sometime ago, seen the portfolios and fall in love with the designs. I am not looking for professional looking designs for my blog. I want one which is cute and have a great personal touch. It should be something that represents me and my domain name very closely.

I approached the blog owner of SimplyWP to have my custom made wordpress design. Kathie, the owner of SimplyWP is a very patient young lady. She really takes your suggestions and needs seriously and even made extra efforts to derive a few design samples before I finally decided on one combination.

Custom theme for seashorebeachcottage

Xixi came to us wanting to have a blog’s make-over cause she wanted to re-launch her blog and rename it. She told us what colors and graphic style that she wanted. Her says on header image,”I want the woman to be on a veranda and looking out into the beach or ocean.”

I put her requirements together into this design while Andrew coded it out. And, here it is: A Life to Remember, a 2 columns wordpress theme with right sidebar, widget ready and rounded corner (both sidebar and post).

Xixi really likes the design! *weHappy*

Coding Wordpress simplest way - Part 1

This is not the regular Wordpress theme coding tutorial on the net. This is the most simplest and easiest way to code a Wordpress theme yourself. Before everything, you should or must download this empty CSS theme first. As every CSS I’ll mention down here is all CSS that I have on that theme and it’s very subjective to other themes.

There are only a few files you’ll need to edit. Well, since it’s the simplest one, so my advice for the real beginners is, use color, don’t use any graphic at first. It’s fine if you don’t have any CSS knowledge, I’ll demonstrate a color only theme if you follow the exact I point here. Now, these are the files you’ll need to edit…

1. style.css

Only 1 file, looking for more? Let’s start!

1, Your blog structure
The width, normally was suggest to be less than 1000px, but it your preference anyway, if you think you’ll have lots of sidebar item, make it bigger. You’ll need to get into style.css only. Look into:

1. body {}
2. #wrap {}
3. #navigation {}
4. #categories {}
5. #header {}
6. #content {}
7. #sidebar {}
8. #footer {}

Too much? Not really, they all gonna have about the same code. So let’s go for body first. What background you wanna have? As here I’ll use a very light blue to represent my background. So write this code in between { and } blankets…

background: #E8EFF5

#wrap represent the whole structure of your blog including header, footer, content, sidebar. The width and alignment is depend on your preference. I’ll go for 800px centralized. Here are the code…

width: 800px;
margin: auto;

So you’re ready for the rest. The structure is here now, it’s getting simple, I’m finishing the whole structure then only go for more detail on part 2. Now, look for #content. Leave a long header, categories and navigation first. This is where you want your content be, left or right, the width of the content (Preferable a common size for your images/videos). I’ll go for 450px on left, oh, a white background too…

float: left;
width: 450px;
background: white;

You need to adjust a bit on the entry content, which is #entry_body {} in the CSS, you can add margin or padding for it now. So, you’ll see the sidebar actually comes up on the right side, that’s the whole purpose, although the listing is not so nice yet. Anyway, let’s get into all the listing (Navigation, categories and sidebar). In order to let the listing looks better, you need to know the padding and margin for each of them. Again, I’ll go for the simplest one, all listing will not have a black dot beside them and they’ll all in a proper way. You need to apply this code on #navigation ul, #categories ul, #sidebar ul.

list-style: none;
margin: 0px;
padding: 0px;

So the layout is cleaner now. Let’s go for the content and sidebar padding, so there’ll have more space. The reason is to give reader some space to breath literally. This applied on #content and #sidebar…

padding: 10px;

Let’s go into the navigation and categories now. In order to let them list horizontally, at the same time, give them some space in between link. You’ll need a few code, look for #navigation li and #categories li…

float: left;
padding: 10px;

Left a header and footer to go before we finish part 1. Bear with me now, don’t give up on learning how to code yourself Header, the height is depend on yourself as well. As for me, I prefer to make it 100px with light grey background so I can put background on some occasion later, here is the code for #header

clear: both;
height: 100px;
background: #EFEFEF;

You’ll notice a strange placement of footer, don’t worry. In order to have the footer stay forever in the bottom and some space to breath, try this on #footer {}…

clear: both;
padding: 20px;
text-align: center;

Well, you have the most simplest and most plain theme. Notice that there are still a lot of code to be write? It will be on part 2, for those who have CSS knowledge I think it’s quite obvious what they style.

Cool grey for today

It has been a hectic week for us. We didn’t manage to come out anything yet beside re-built SimplyWP theme. So here we are building another simple theme for today…

[ Demo | Download ]

Theme name: Cool Grey
Features: 3 columns theme, using only grey series of colors (I know, it’s dull). Widget ready, tested in Wordpress 2.6.1. This theme has no image, for the sake of loading speed. Well, if you really wanna say images, it only 2, one for favicon icon and another is the search icon.

New energetic look

Previously SimplyWP was in green and yellowish colors, which is quite dull for my point of view. Since previous post I was talking about pages and categories, so here it is, the new look with categories link at the most top!

Anyway, we’ve placed a few Google Adsense here to support our hosting and domain though. Please don’t mind those, just enjoy what you come here for. It’s been a long day for us, weekend will be our last runaway for the next couple of month. Bear with us, Wordpress theme coding on the way!