Tutorial – Create a new theme to your blog

18 באוקטובר 2007

תגיות: , ,
תגובה אחת

So, you want your blog to look sexy, sure you do, here is how…

Before you start reading this lines, you need to know that to customize and styling your blog takes time, and allots of patience.

Also, I've attached my style XML (Exported) for your convenient's, so if you like to see my setting, import the XML from your blog Control Panel.

 

Create an image in 800×235 for your header, I download my image from the web after long searching:

6

Of course you can create a smaller image if you like.

 

Then Go to your blog Control Panel, click "Global setting –> Change How My Blog looks".

To add your new header banner go to "Header" tab, upload and select your image:

2

If you like, you can set a background image for you panel.

In the "Background Image URL" upload and select your new image.

Don't forget to click Save after finishing to configure this Tab.

 

Now, if you like to do some more changes like moving text areas to a different location, you will need a little knowledge in CSS (Styles) editing.

 

For example, if you like to move the title and text in the header banner, you can override the existing class (provided by the base theme you selected earlier).

Lets say you want to change the Title color in your blog, so you need to override the #title class like this:

   1: #title
   2: {
   3:   text-align:left;
   4:   color:#FFFFFF;
   5:   margin-top:70px;
   6:   margin-left:-30px;
   7: }
   8:  
   9: #title h1
  10: {
  11:   text-align:left;
  12:   color:#FFFFFF;
  13: }

In this example, the #title and the #title h1 are tag ID in the HTML source code.

 

In the "Custom Style (Advanced)" tab:

5

 

Here is some overriding classes:

   1: /* The right content pane */
   2: #main
   3: {
   4:   padding-left:15px;
   5:   padding-right:5px;
   6:   width:560px;
   7: }
   8:  
   9: /* The left menu pane */
  10: #leftmenu
  11: {
  12:   padding-left:6px;
  13:   padding-right:0px;
  14: }
  15:  
  16: /* Prevents double lines */
  17: .post p { margin-top:3px; margin-bottom:3px; }  
  18:  
  19: /* Navigation Bar */
  20: #nav
  21: {
  22:   margin-top:5px;
  23:   margin-bottom:5px;
  24:   padding:0px 0px 0px 0px;
  25:   width:804px;
  26: }
  27:  
  28: #navbar
  29: {
  30:   width:100%;
  31: }
  32:  
  33: /* UserArea */
  34: #welcome
  35: {
  36:   background-color:Transparent;
  37:   color:#f1f1f1;
  38: }
  39:  
  40: /* Title */
  41: #title
  42: {
  43:   text-align:left;
  44:   color:#FFFFFF;
  45:   margin-top:70px;
  46:   margin-left:-30px;
  47: }
  48:  
  49: #title h1
  50: {
  51:   text-align:left;
  52:   color:#FFFFFF;
  53: }
  54:  
  55: #quicklinks ul li a
  56: {
  57:   color: #003399;
  58:   border:solid 1px red;
  59: }

 

Once you finish to customized your blog style, don't forget to export the style to an XML by clicking the Export link at the bottom of the page.

That way you always have a backup to your style just in case…

 

Hope this helps.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

תגובה אחת