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.

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.

Does validating matter?

A lot of people talking about validated CSS and XHTML, I didn’t care that even now, however, according to most webmasters, validated CSS and XHTML is very useful, hence every web that you built must be valid. When I asked why is it useful and how it useful to a webmaster, the answers were uncertain, and I assume these webmasters just wanna be cool like teenagers who smoke.

Validating a web by putting these buttons on it are just like people claiming themselves as genius but the fact is unknown. I’m not talking about you know it is valid, rather you know it’s a web. Let’s put a more simplicity question, “What is the job for CSS and XHTML?“.

The main objective for XHTML is to structure a web and CSS is to beautify the web. Jobs done! However, some people claim that in order to make sure all the browser will show out same, validating is needed. Trust me, if it works on FireFox, it works on most browser, try to forget about Internet Explorer. IE is a total pain in the ass, apparently Microsoft still want to be unique even on coding a web for IE

For me, as a webmaster for sometimes now, I think validating is not important. I’m a Mac user, so IE is a problem for me, however, I tried to make sure that all my web working fine in FireFox and Safari, it will reduce the risk of having the web shows out messily on IE. SimplyWP.net is valid CSS and XHTML, but will I continue maintain it as valid? Definitely no, because I really don’t give a damn, just my two cent