Overriding the CSS styling

How to hack the CSS styling?

well, usually when we have some template with css class, and we want to adjust the style or we want to adjust the position or etc.. and we cant seems to find the codes on where to adjust it.
so we can perform a CSS hack.
its simple. but a lazy style. but its efficient and work great.
like this:


<div class="theclass">

some text here

</div>

it seems like there is a style class to the <div> tag. but we cant seems to find the class in the css file. then we perform the inline style CSS code.

like this:

<div class="theclass" style="color:#000000; width:300px; height:250px; background-color:#dedede;">

some text here

</div>

so the browser will render the inline style first and override the CSS for the current div.

have fun ;-)

Result:

some text here

CSS - Diffrent between id and class

CSS (Cascading Style Sheet)

the different between id and class for styling using css is another easy part.

lets take a look....
<style>

#idclass {
color: red;
}

.normal_class{
color: blue;
}
</style>

<font id="idclass">This is styling using id</font>

<font class="normal_class">This is styling using class</font>

see? actually, its just the same. the different is just using dot "." for class or just use hash "#" for id.


Result:

This is styling using id
This is styling using class

Wordpress meta tag

wordpress meta tag can be the most useful features when you create an application.

this is to add user meta key:

add_user_meta($user->ID, 'metakey1', 'value1');

add_post_meta($user->ID, 'metakey2' , 'value2');

this is to get the key back:

get_user_meta($user->ID, 'metakey1', true);

get_post_meta($user->ID, 'metakey2', true);


its just a simple function but can be very useful when you need it :-)

Background color inside div

background color inside dive is easy.... this is it:

<style>
.test {
background-color:#dedede;
color:#000000;
width:300px;
height: 200px;
}
</style>
<div class="test">put content here</div>


there you go. the result of this code is just a 300px width box and 200px height with a grey color inside the box.



Result:

put content here

Create Wordpress Themes From Scratch

Well actually, what you will need is just the knowledge of HTML, CSS and PHP and also some other additional programming language that you now.

ill give you a link which I had learn how to do it in a pretty fast and effective method.
this is the link:

http://themeshaper.com/2009/06/25/wordpress-theme-template-directory-structure-tutorial/

enjoy it!
:)

CSS - centering div

well.. It is quite easy to centering your div.

use this attribute in your css to center your div.

margin-left:auto;
margin-right:auto;
width:500px;

centering your div in the html will require this three attribute to be embedded into your css.
without the width:xxxx
you couldnt center it. because it didnt have the exact measurement to be centered.

Identify the code for your stylesheet

do you ever wonder how in the world to style up your blog design?
of course you will need a programming langguage to learn wasnt it?

so i will tell you in a simple way on how to know what kind of method to identify your blog style from just editing your html template
(of course I am talking about the blogspot template!)

so, just go and edit your HTML template.

just scroll down and have a scan on the codes (which you get dizzy if you dont understand them).
you see, there are some sort of format to style up the template. Many blog or website or so other sjashing looking site will use the .CSS style file to style up their site.

now. if
you want to identify the style for the blogspot template.
you should find this kind of format

body{
color: #ffffff;
}

this is the CSS format of styling your blog.
find this in your template and learn how to play arround with CSS.
I am sure youll make a smashing looking site yourself

:-)