[b]BE UNIQUE AND BE CREATIVE... EXPLORE AND LEARN....[/b] Sharing time guyz... Since I'm still here, ask questions and wat part u wanna know... hmn.. I'll share my js add ons next and the div layers... [b]Embedding media and animated images as blog entry[/b] [spoiler]juz use the mailto link.. wat is mailto link..? wyl u are composing a new post, can u see the toolbox..? juz click d envelope thng.. oh.. dats the mailto link..? and a new window will pop up.. juz place d codes on the box for email address.. [img]http://img45.imageshack.us/img45/1323/wateverhs0.jpg[/img] [i]i know this was already a topic solved, but aders are juz so lazy to read and den juz PM me directly... so i added it here.. [/i][/spoiler] [b]Familiarize with the parts[/b] [spoiler][img]http://i29.tinypic.com/2qdtuyu.jpg[/img] The [b]banner[/b] and the [b]background[/b] are already obvious.... [b]Container[/b]- the pink one [b]Page-inner body[/b]: contains the sidebar and body... extending to the green ones before the pink part... Basically, [b]page-inner body is the part inside the container and below the banner[/b]... The [b]sidebar[/b] has two parts.. the header and the body... [/spoiler] [b]Overlapping banner and body[/b] [spoiler]I don't know what is the exact term but it looks like your sidebar and the entries are un-cut at the top... Still don't get it...? Here's a screenshot: [img]http://i31.tinypic.com/j80086.jpg[/img] To make it..? The trick lies in the banner.... For example, this is my image for the banner... [img]http://i32.tinypic.com/2q15uf8.jpg[/img] [b]1. [/b]Open a new document with a size of: 760x300px (760px is the standard width of the banner... the height can be of ur choice) [b]2. [/b]Add a new layer and fill it with a color that blends with ur banner.. or any color u like.. for me, i filled it with darkgreen... Copy your image for the banner and paste it on ur new document.. it may now luk lyk this: [img]http://i26.tinypic.com/11l7q0m.jpg[/img] [b]3.[/b] Add new layers then put the rectangles/rounded rectangles (watever u want) below the banner... juz lyk this... ( u can add sum stuffs too... [i]i added lines on it[/i]) [img]http://i32.tinypic.com/9ld1qo.jpg[/img] [b]4.[/b] Then that's for ur banner... But before u flatten all ur layers and discard the document, we have to [b]extract a part from the banner to make the page-inner body[/b].. [b]Making the page-inner body[/b] [b]5. [/b] Hide the stuffs (if u put any at those rectangles), flatten ur layers and select the lower part of the banner using ur rectangular marquee tool.. (dont include the top of the rectangles wen selecting) juz like this: [img]http://i27.tinypic.com/2961840.jpg[/img] [b]6.[/b] Copy the selected part, open a new document and paste the extracted part.. and tada... u now have d image for ur page-inner body... u willl have sumthing dat luk lyk dis... [img]http://i31.tinypic.com/2ry0r5v.jpg[/img] [b]7.[/b] Since u now have the images, lets's put em' on codes... it cud be better if ull compile all ur css... [b]For the banner:[/b] [quote]/*personalize blog logo */ #banner { width : 760px; height : 300px; background : url(http://i25.tinypic.com/mio1tu.jpg); background-position : top center; background-repeat : no-repeat; }[/quote] remember: the standard width is 760px... [b]For the page-inner body:[/b] [quote]#pagebody-inner { background : url(http://i28.tinypic.com/2n14xzm.jpg); background-position : top right; background-repeat : repeat;border: #; }[/quote] [b]For the container:[/b] the pink one... [quote]#container-inner {border:none;} #container { background:transparent url(http://i26.tinypic.com/2nqs6qc.jpg); border-width: 0px; background-position: right center; }[/quote] [b]For the background:[/b] [quote]body { background: #ffffff; background-image: url(http://i32.tinypic.com/153bev9.jpg); background-attachment: fixed; background-repeat: repeat; background-position: left center; margin: 0px 0px 0px 0px; }[/quote] For the background: play along wid margins if u want to have spaces outside the container.. [b]Note:[/b] for the [b]page-inner, container, and background[/b]: if u are using small images, b sure to put it on "background repeat"; or u can put only colors and add borders... and ur done wid d main images... [/spoiler] [b]Title Post Settings[/b] [spoiler][quote]/* -- Title Post Text Settings -- */ .entry-header { background : url(http://i28.tinypic.com/21brg48.gif) no-repeat center left; margin : 0px 0; border-left : none; margin-left: 0px; border-bottom : 3px double #379270 ; padding-left:30px; padding-top:3px; padding-bottom: 3px; color : #379270; font-size : 15px; text-align:left; text-transform: Capitalize;}[/quote] U can customize it using that code.. add borders and background... If your image is left align, and ur title is left align, takenote with the [b]padding-left[/b]... increasing its no. will move the title text to the right... [/spoiler] [b]center text and scrollable post entry/ entries wid borders [/b] [spoiler][quote]/* center text and scrollable post entry */ .entry-footer {border:none;} .entry { text-align:center; overflow:auto; width: 490px; height:260px; border: double #379270 3px; } padding-left:5px; important!; }[/quote] The code above shows centered entries + scrollables.... If u dont want to have scrolling entries, juz erase [b]overflow:auto[/b]... and change the height to 100%... Play with the borders and colors...[/spoiler] [b]Hiding the footer[/b] [spoiler][quote]/* Hide friendster footer (ads) */ .friendster-footer { width: 780px; height: 132px; display: none; }[/quote] [/spoiler] [b]Alert messages[/b] [spoiler][b]welcome:[/b] [quote]body { height:expr/**/ession( function welcome() {alert('UR MESSAGE');} window.onload=welcome); }[/quote] [b]goodbye:[/b] [quote]body{left:exp/**/ression( function goodbye() {alert('UR MESSAGE');} window.onunload=goodbye);}[/quote] [b]no ryt click:[/b] [quote]body{right:expr/**/ession( function rightclick() {if (event.button==2) {alert('UR MESSAGE')}} document.onmousedown=rightclick);}[/quote] Dont use apostrophes [ ' ] in ur message... [/spoiler] [b]Cursors and on hover[/b] [spoiler][quote]body {cursor: url(URL OF UR CURSOR NOT ON HOVER);} a,a:link,a:visited,a:active,a:hover { cursor: url("URL OF CURSOR U WANT ON HOVER"),default;}[/quote] [/spoiler] Here's my sample css... open it and try to practice making layout in ur own.. Best thing to do..? [url=http://aprilkiz.fileave.com/samplelayout/samplelayie.css]Open my CSS[/url] [b]Some CSS in the tricks and tutorials can be applied in ur blog too... like customizing titlebar, hover effect, falling images, and etc...[/b] I'll share more if I have time... [i]If you think this is useful, plz do credit me[/i]... [url=http://theftalk.com/t21493-Blog-Design-Explained%3B-Organizing-sidebar%3B-Managing-posts%21.html]Blog design explained; Arrange your sidebar; Manage # of posts...[/url]

Last edited by cUtiEshika (2008-03-31 02:13:18)