Happy New Year. Be blessed and be a blessing!

Monday, January 28, 2008

HTML Configuration for DUCF

Original question:

27 Jan 08, 07:29
DUCF: Hey Campus Alive =) Just wondering how do you guys add in the header [the fish] and make it fit the blog on top [html stuff] Doesn't seem to work for me. Please advise and help =) Joel here btw xD


Answer:
I've looked at your blog and found out that you have changed your html coding a bit. You tried to enlarge the whole outer wrap size and a lot of other things.

Well, the solution that I've posted below is for the original "rounders 4 template". If you want to follow it, then readjust back all your resolutions to the normal one.

If you insist in enlarging your blog wrap dimension, I recommend this site to you. You don't need to include the part where it tells you to add a new side bar. You can basically use the rest of the tutorial there.

If you however feel that you will prefer to just keep to the original dimension, here's the edit.

Find

#outer-wrapper {
width:740px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}

Change

#outer-wrapper {
width:730px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;

}

Find

#header-wrapper {
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header-inner {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat $startSide bottom;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}

Change

#header-wrapper {
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") repeat-x repeat-y; $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header-inner {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") repeat-x repeat-y; $startSide bottom;
padding:0 0px 0px;
}

------------End of edit----------

The result that you will get is something like this:

http://testhtml2008.blogspot.com/


Hope that helps, Joel.


Hope you guys don't mind me using CA blog to post html stuff. >___< I can remove this post if you don't want it here. =D

4 comments:

Anonymous said...

wow Leen you still have energy to analyze people's template despite your heavy U of C workload... still high on glucose? =p

Pat said...

she is not tat heavy this sem... as in her workload... i'm glad tat she is at least enjoying her studies for once...

Anonymous said...

Thanks leen =) i hope the blog looks better now... will try to tweak it again soon...

thanks again for posting up how =) Understand a lot more about html now...

jL

Leen said...

Actually I have more workload this quarter because I am more involved in the CF and I need to work. Also, I need to write more essays than last time. But I think I'm slowly getting used to the rush/hurry of the U of C life so I might not feel so badly affected by the workload this quarter. =D

Joel,

I cannot really help to make all the html coding perfect unless I get hold of your template html. So I hope that helps a bit.

Also, just for your information, the curve rectangle is the one causing problem to all the weird disjoint corners. One thing you can do is just to get rid of the round edges and turn it into a pure sharp edge rectangle. Then it will be a lot easier to customize the html.

Anyway, thanks for stopping by.