Cutting CSS short

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

I’m sure a lot of people still using the same old CSS code that developed decade ago, where all the code are long as hell. I remember last time when I was coding the CSS together with table layout (Yeah, so?) Both files taking time to load due to the massive code in them. Here are my way on cutting short some code.

Normally padding and margin code would be a pain in the arse, for example:

#box {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

Unless Dreamweaver which give will automatic add in those code for you, or else, you’ll have to be a fast typist or time taking. Here are the trick on cutting short.

#box {
padding: 5px 10px 5px 10px;
}

#boxy {
padding: 5px 10px;
}

Ok, a little confusion here. For the first one, it happen like this top, right, bottom, left. Or if you happen to have both top,bottom and left, right same padding, you can use 2 only, where it will automatic adjust to to top,bottom and left-right. Just how much time and typing it can save. This kinda long list also happen in background image as well, Google them out, save your CSS loading time and file size

Well, both of these CSS are most used in developing a site. So the rest, you can go and figure a way. Oh, link style also have some short cutting too. You might wanna look around before develop again. However, due to some reason, Internet Explorer has some problem rendering some of those short CSS though. It’s a big headache when it comes to Internet Explorer, always!

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.

Pages or categories

So, Wordpress has been around for some times, people used to just install Wordpress, get some free Wordpress theme and voila, start blogging and even better, make money. Long enough I have to say, it’s time for some changes made on Wordpress theme. Recently I notice that people started to take note on categories instead of pages.

Pages, those link at the top header usually; categories, links that usually located at the sidebar. Which one more important? Why the heck is it important by the way. Now people don’t often check pages, mostly will go and check the author. To serve the visitor right, get away from using pages to tell who are you, eg: SimplyWP Tried to write a short description about author at the sidebar instead.

Basically the most important pages one will need is the contact form eh? I can’t really tells that pages is useless though, but it doesn’t need to be so significant on all pages. The best way to go would be, placing small link at the top header, then category links at bottom of header instead of sidebar. Notice some Wordpress themes are using this layout? Now, for those who earn money from their visitors, try to think about it for a moment. It is pages that visitors looking for, or the categories? And how visible and easy to navigate to your categories link?

P/S: SimplyWP is going for a small revamp soon, so expect those I mentioned here. Sometimes I gotta do something to replace my mistake

Image drop shadow

So you wanna have a drop shadow for all your images on your site/blog. You spend most of the time touch up all the images you have in Photoshop, create white padding area then drop shadow, save it, find it’s too big on your bandwidth consumption. Finally you give up on shadow make just one black border with CSS to save your bandwidth.

Here is the idea of having a drop-shadow-alike in CSS that only require one time editing. All image upload will have no border in Wordpress. It has an ugly-fugly link border in Internet Explorer by the way. Anyway, this is the normal one colored border in CSS

img {
border: 1px solid #000000;
}

Example:

As for shadow-alike you need to tweak them a little bit. Here is my way of doing a shadow-alike in CSS for images

img {
padding: 0px 1px 1px 1px;
background: #939393;
border: 1px solid #D4D4D4;
}

Example:

Background and border colors are very much depend on your preference though. However, this would help saving quite a lot of time on editing each and every images.

The missing tags

Did you check your site? Or maybe your blog? Well, I’ll have to be honest here, all the themes released here doesn’t have a proper meta tags, you’ll have to work it out yourself. It’s not that I don’t wanna add it in for you, but it’s a subjective tags, you need to understand your own blog and objective in order to add these meta tags in.

Meta tag is one of the tag that most search engines will catch from your site/blog. Meta tags are great significance as they can boost the overall performance of your site/blog. They are useful in enhancing the placement of your site/blog in search engines, hence, it could possibly increase the traffic.

<meta name=”keywords” content=”Search engine keyword” />
<meta name=”description” content=”Your site/blog description” />
<meta name=”Distribution” content=”Global” />
<meta name=”Rating” content=”General/Adult/18SX, choose one” />
<meta name=”author” content=”Your name” />
<meta name=”copyright” content=”Copyright statement” />
<meta name=”robots” content=”All” />
<meta name=”robots” content=”index,follow” />
<meta name=”revisit-after” content=”7 days” />

Let me explain a little bit about the last 3 tags. First two are about search engines robot. As most webmasters know, search engine will call out their “Robot” to your site and catch all the meta tags and pages your site/blog have. “All” means allow all kinda robot. “Index,follow” simply means let those robots went all around your sub-folder/pages, to maximize your pages in search engine. Last one is to command the robot to come again after 7 days or how many days you would like to. For blog, it is recommended for 1 day, assume that you blog everyday.

So, that’s all! Add in all those meta tags and you’re good to go. Need no search engines submission and all the shit that costing money and time

P/S: For blogger XML template, you should use this instead…

<meta name=’keywords’ content=’Search engine keyword’/>
<meta name=’description’ content=’Your site/blog description’/>
<meta name=’Distribution’ content=’Global’/>
<meta name=’Rating’ content=’General/Adult/18SX, choose one’/>
<meta name=’author’ content=’Your name’/>
<meta name=’copyright’ content=’Copyright statement’/>
<meta name=’robots’ content=’All’/>
<meta name=’robots’ content=’index,follow’/>
<meta name=’revisit-after’ content=’7 days’/>

Placed them in between <b:include data=’blog’ name=’all-head-content’/> and <title><data:blog.PageTitle/></title>There’re slightly differences only