Tuesday , 20 May 2008
How to put a wallpaper in my blog?
Posted by NJservice , viewed : 947 , 00:17:22  


First of all I'd like to inform you about our blog structure which is divided into 5 layers including the contents. It means that apart from the contents which are only texts, galleries and videos you can add up to 4 different backgrounds in your blog.

Body Background

1.Beginning with the first one, we'll call it body background which is the less important part, i'd say. Because there's only the background's image or color in this part and unless you use non-standard size monitor resolution such as 1280x1024 or 1400x900 pixel, you won't see the background. 

So for the others who use standard size monitor such as 1024x768 or less, just skip this step because you don't need it.

The code below is an example of css code for the body background(you can copy the line below and press Ctrl+F in Do-it-yourself page to find where it is) 

 /*----------------------------------------------------------------------------------------------------------*/

/* ---------------------- ส่วนของ body หน้าเวบ ---------------------- */

body {
 margin:0;
 padding:0;
 text-align:center;
 background:#B3B3B3;
}

/*----------------------------------------------------------------------------------------------------------*/

Look at the bottom line that says "background:#B3B3B3;" this is the place to begin with. Now let's assume that you want a dark green background because you're an environmentalist (which is not the truth), then open an image-editor program like Adobe Photoshop or paint in the accessories panel from the start button at the left corner of your pc and open the color picker panel or simply go to http://www.colourlovers.com website to find the color code you want and put it after the square.

For example the dark green code is "188a33", so what you have to do is to delete "B3B3B3" after the square and replace it with the new color code like this

background:#188a33;     and see the result.

Container Backgrounds

The next layer is the container background that can be separated to outside container and inside container with their own backgrounds as in the picture below. You'll see the red area and the black area which identify the position of the background. 

Now i'll put a wallpaper to the outside container background but this time i'll use an image for the background. Here is the code.

The code below is an example of css code for the outside container background(you can copy the line below and press Ctrl+F in Do-it-yourself page to find where it is) 

/*----------------------------------------------------------------------------------------------------------*/


/* ---------------------- ครอบเนื้อหาทั้งหมด   ----------- */
#container {
 margin:auto;
    width:1002px;
 text-align: left;
 background:#FFFFFF;
}

/*----------------------------------------------------------------------------------------------------------*/

What i have to do is just replacing the bottom line with the new code for image background written below.

background:url(http://playground.everydayicons.jp/item/patterns/p12-1.jpg);

***Do not miss any alphabet or symbol, the code for image compose of "url" and a blanket "(.........Url for the image you want to use.........)" 

And for the inside container background, i think i don't need it so i'll remove it.

The code below is an example of css code for the inside container background(you can copy the line below and press Ctrl+F in Do-it-yourself page to find where it is) 

/*----------------------------------------------------------------------------------------------------------*/

/*///////////////////     ////////////////////////////
                     container    ครอบ 3 column
///////////////////     /////////////////////////////*/
#container_data{
    width:970px;
 background:#FFFFFF;
 margin:auto;
}

/*----------------------------------------------------------------------------------------------------------*/

You'll see the background on the third line from container_data, next just delete the third line from "background" to semicolon ";" and see the result.

Do u see that it is unreadable? so pls continue to the next step

Content backgrounds

Content background  is separated to 3 columns left, right and center plus "center_more" which is the background position when you click more to see all entries.

/*----------------------------------------------------------------------------------------------------------*/

The left column

/*///////////////////     ////////////////////////////
                    ส่วน column  ด้านซ้าย
///////////////////     /////////////////////////////*/

#left_column {
   width:310px;
   float:left;
   overflow:hidden;
}

The center column

/*///////////////////     ////////////////////////////
                    ส่วน  ส่วน center
///////////////////     /////////////////////////////*/

#center_column{
    float:left;
    width:330px;
 overflow:hidden;
 margin:0 10px 0 10px;
}

The right column

/*///////////////////     ////////////////////////////
                ส่วน column  ด้านขวา
///////////////////     /////////////////////////////*/

#right_column{
     width:310px;
  float:left;
  overflow:hidden;
}

/*----------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------*/

The center_more column

/*///////////////////     ////////////////////////////
                    ส่วน  ส่วน center more
///////////////////     /////////////////////////////*/

#center_column_more{
    float:left;
    width:650px;
 overflow:hidden;
 margin:0 0 0 10px;
}

/*----------------------------------------------------------------------------------------------------------*/

What we'll do is to insert the following line between "{......}" symbol to add a wallpaper to all the columns.

The code we need to insert                         Example

background:#FFFFFF;                                 #right_column{

                                                                   background:#FFFFFF;

                                                                   }

See the result

Here is the link for some backgrounds: http://playground.everydayicons.jp/


อ่านความคิดเห็น

comment 2
NJservice , date : 23/07/2008 time : 19.44
http://blog.njconnex.com/njservice
what?

เปลี่ยนได้ค่ะ เดี๋ยวจะเขียนอธิบายเป็นเรื่องวิธีการเปลี่ยนสีขอบเลยดีมั้ยคะ รอสักครู่นะคะ
comment 1
Nuttcaro , date : 22/07/2008 time : 21.50
http://blog.njconnex.com/Nuttcaro

ยินดีที่ได้รู้จักน่ะค่ะ

เราอยากรู้ว่าจะเปลี่ยนจากสีแดงเป็นสีอื่นได้มั้ยง่ะ ตรงเส้นขอบๆๆง่ะค่ะ
Comment

  ล๊อกอินเข้าสู้ระบบ คลิกที่นี่
name:  
email:  
website:  
comment:  
   
   

back   |  top