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

:-)

Creating Wordpress Plugin

Developing WordPress Plugins from rebelpixel

SMARTY programming

I had been learning myself to code this SMARTY programming style. It is quite different from the basic PHP programming. in basic PHP programming we will use <?php some function here..... ?>  the PHP tag.
but in SMARTY I have to use additional tag like {$variable} to display data and to manipulate the template.

let say if i want to display this text "hello there! good day huh!". in PHP I will code it like this:

<?php echo "hello there! good day huh!"; ?>

but in SMARTY, I have to assign the values from other file to the template file.

otherfile.php

$hellotext = "hello there! good day huh!";

$smarty->assign('myvariable', $hellotext);


after the assignment, i hade to do the template variable manipulation in the template file( .tpl) .

display.tpl

<html>
<head>
<title>test</title>
</head>
<body>
{$myvariable}
</body>
</html>

when the code is running it will be displayed like this:

hello there! good day huh!

The First Post

hello there! this is my first post and I am proud to be a coder!