Bosen ama Taskbar Loe? Ganti aja!

yup, nich dia carany buat ganti taskbar.. ahaha.. ketemu pas lagi nyari plugin buat rainmeter..
nama programny litestep.. bukan taskbar aja sich yang d ganti tapi juga fungsi-fungsi yang ada d desktop
berikut sampel2 puny gw..

pake theme AMANA


pake theme SONA


theme :

Theme AMANA


Theme GAIA


Theme SUF


Nah sekarang Tutor ny:
1. pergi ke litestep , di bagian kananny ada LS Installer, tekan dan download..
2. Setelah itu Install dan jalankan aplikasinya
3. Download Themes yang loe mau d sini.. rekomendasi gw sich GAIA ama AMANA tuch..

KALAU FILE KALIAN .LSZ
4. maka langsung copy paste ke ke C:\Program Files\LiteStep\Profiles\\themes\
5. klik kanan d desktop, dah itu pilih LITESTEP\Change Themes\Install Theme\
6. klik kanan AMANA.lsz (pilih yg file kalian yg .lsz) dan pilih Install Theme Archieve
7. d bagian atasny pilih AMANA (yg ada centanganny) klik kanan switch theme
8. cling.. desktop kalian akan berubah..

KALAU FILE KALIAN bukan .LSZ
4. maka kalian harus cari folder THEME kalian dan itu copy paste ke C:\Program Files\LiteStep\Profiles\\themes\
5. klik kanan d desktop pilih LITESTEP\Change Theme\Refresh List
6. klik kanan d desktop pilih LITESTEP\Change Theme\theme kalian>
7. cling.. desktop kalian juga akan berubah.. 

List Control Mouse:
- Left Click : sama sekali ngak berguna
- Right Click : pop menu
- Center Click : task menu
- Shift + Left Click : buat ngatur configuration dari themeny
- Shift + Right Click : Display Properties
(tergantung themesny juga sich, yg penting klik kanan dah pasti)

NB: - kalau minta install font, maka copy paste font kalian ke C:\Windows\Fonts
- kalian jg bisa ngutak atik pop up menu di C:\Program Files\LiteStep\Profiles\hrd\personal\popup.rc

klo ngak bisa, tany gw aja ato org laen yg ngerti (mankny ada org selain gw yg pake) ahaha.. joke..

Anime Signature Tutorial UGLY MOTION BLUR

Yay! Finally, saya memutuskan untuk membuat sesuatu yang "actually" useful... Sebuah tutorial tentang bagaimana membuat Anime Signature (aka Siggy, I called it Tag). This tutorial I hope will be clear enough to follow... Let's get it on!!

Step 1: Buat new image: File > New, lebih detail lagi...
Width: 400 (width - height is a free variable, but please make it "proportional")
Height: 130
Resolution: 72 pixels /inch (don't change this)
Color Mode: RGB / 8 bit (don't change this one too)
Background Contents: Transparent (transparent is the best choice)

Step 2: Sebut saja nama layer pertama yang kita buat tersebut sebagai BACKGROUND1. Yang perlu dilakukan sekarang adalah mengubah warna BACKGROUND1 menjadi BLACK. Untuk itu saya menggunakan Paint Bucket.

Step 3: Load image yang akan dipakai, di sini saya memakai dua render: Sasuke dan Sakura. Yang perlu dilakukan adalah memindahkan kedua imagetersebut menjadi dua layer baru di image yang akan kita kerjakan.
a. Pertama gunakan Free Transform (Ctrl+T), lakukan resizing terhadap render seperlunya. 
TIPS3.1: Tekan SHIFT selama melakukan resizing, agar render tidak terlalu terdistorsi.
b. Pindahkan kedua render ke BACKGROUND1 secara "Drag-and-Drop" dengan Move Tool
c. Sebut saja kedua render tadi sebagai SASUKE1 dan SAKURA1, sekarang lakukan resizing dan positioning seperlunya, kemudian posisikan SASUKE1dan SAKURA1 di atas BACKGROUND1, hasilnya kira-kira seperti ini...



Step 4: Matikan "mata" dari SASUKE1 dan SAKURA1. Lakukan brushing dengan Brush Tool, pastikan Brush berwarna putih. 
CATATAN4.1: Untuk brush presetnya terserah mau pake apa, tapi saya menggunakan my own custom-made grunge brush  'coz it's better suited to my style.

Step 5: Sekarang buat lagi layer baru (Transparent) dengan nama BACKGROUND2. Lakukan proses brushing sekali lagi kali ini dengan warna brush hitam. Usahakan untuk mencapai keseimbangan... Kemudian nyalakan lagi mata kedua render... Hasilnya kira-kira seperti ini...



Step 6: Let's continue brushing, this time take different color with Eyedropper. 
a. Pertama buat satu lagi layer baru dengan nama BACKGROUND3.
b. Dengan menggunakan Eyedropper, ambil dua warna yang dominan dari render. Pertama saya ambil warna biru dari baju SASUKE1, kemudian tekanX untuk Swap Colors, kemudian saya ambil warna pink dari rambut SAKURA1.
c. Lakukan brushing, sekali lagi jaga keseimbangan... (ingat untuk mengganti warna brush tekan X). Hasilnya kira-kira seperti ini...



Step 7: Now let's throw some Adjustment Layers in...
a. Pertama saya gunakan Color Balance: Layer > New Adjustment Layer > Color Balance. Modifikasi nilai di sana-sini...
b. Kemudian merasa warnanya kurang pas, saya gunakan Clouds: Highlight layer Color Balance, kemudian Filter > Render > Clouds. 
TIPS7.1: Sebelumnya pastikan warna pallete sudah kembali HITAM dan PUTIH (tekan D untuk mengembalikan warna ke default).
c. Untuk mendapatkan atmosfir yang pas, saya masukkan Brightness and Contrast: Layer > New Adjustment Layer > Brightness and Contrast,dan satu lagi Color Balance.
d. Hasilnya akan jadi seperti ini...



CATATAN7.1: Just do anything you like here... there are unlimited combinations...

Step 8: This is where the tricks come in...
a. Pertama duplikasi layer SASUKE1 dan SAKURA1 masing masing 2 kali: pilih layer yang ingin diduplikasi, kemudian tekan Ctrl+J.
b. Hasilnya ada 6 layer render... SAKURA1, SAKURA2, SAKURA3, SASUKE1, SASUKE2, dan SASUKE3.
c. Untuk SAKURA2, SAKURA3, SASUKE2, dan SASUKE3, pindahkan ke sisi-sisi dari signature, original render tetap di tempat! Hasilnya seperti ini...
TIPS8.1: Kadang perlu dilakukan Transformasi secukupnya (flipping, rotation, etc) 



d. Untuk ke-4 layer di atas, lakukan Motion Blur: Filter > Blur > Motion Blur dengan Angle dan Distance terserah (saya pakai 30 - 50 derajat dan 99 pixels).
e. Untuk ke-4 layer di atas, ubah Blending Options dari Normal menjadi [/b]Overlay[/b]. 
TIPS8.2: Jika diinginkan Opacity dari keempat layer ini juga bisa diubah.
f. Penting! pindahkan keempat layer tersebut ke bawah SASUKE1 dan SAKURA1... Hasilnya akan seperti ini...



Step 9: Your sig is basically done, now let's add some effect...
a. Duplikasi layer SASUKE1 dan SAKURA1 masing-masing 3 kali, hasilnya ada 6 layer tambahan... SASUKE4 - 6, dan SAKURA4 - 6.
b. Sekali lagi posisikan layer-layer hasil duplikasi tersebut. Layer SASUKE/SAKURA 5 & 6 geser sedikit saja dari original render, sementara SASUKE/SAKURA 4 tetap ditempat, kira-kira seperti ini...



c. Untuk ke-6 layer di atas lakukan Motion Blur, set Angle=0 dan Distance sekitar 70-80 pixels. Hasilnya kira-kira seperti ini...



TIPS9.1: Jika original render terlihat kabur/tidak jelas, dan anda tidak menginginkannya, maka coba gunakan Filter > Sharpen, atau anda bisa mengubah layer order dengan menempatkan Original Render lebih ke atas...

Step 10: Optionally you can add TEXT and BORDER...
CATATAN10.1: Kedua hal ini jika tidak hati-hati mengimplementasikannya akan menghancurkan karya anda 
CATATAN10.2: Untuk Text pemilihan font, warna, ukuran, efek, dan positioning sangat penting... dan selalu gunakan Anti-Alias.
TIPS10.1: Untuk BORDER, kecuali dalam kondisi ekstrim tertentu pilihlah warna yang tidak terlalu mencolok, dan tebal garis batas KURANG DARI SAMA DENGAN 2px (biasanya 1px).
a. Untuk membuat Border, pertama buat New layer dengan nama BORDER, kemudian highlight layer tersebut, tekan Ctrl + A (Select All).
b. Gunakan Stroke: Edit > Stroke. Colors: terserah; Width: 1-2px; Location: Inside.
CATATAN10.3: Saya tidak memakai Border...
c. Untuk membuat Teks, sekali lagi buat new layer dengan nama TEXT. Tekan T untuk mengaktifkan Text tool, mulailah menulis...
TIPS10.2: Umumnya font ARIAL dan CENTURY GOTHIC sangat cocok untuk dipakai di signature... Dan ingat untuk selalu memakai Anti-alias
d. Saya memakai Century Gothic, mode Italic, ukuran 12pt, warna putih, anti-alias Sharp.
e. Gunakan Move Tool untuk memposisikan text tersebut...

Step 11: Now Flatten the Image: Layers > Flatten Image, then save it as JPG/GIF/PNG (I recommend GIF/PNG), and you're DONE!!!!!!!! Here's mine...

Akses web dengan menggunakan VPN

Bagi yang pengen akses suatu situs tapi gak bisa karena indonesia di blok atau lain-lainnya coba aja akses via VPN servernya US kok...

Langkah-langkah
1. Download AlwaysVPN
2. Install program tsb
3. Setelah di install pada taskbar akan muncul OpenVPN GUI, klik kanan -> alwaysvpn-udp-Faster -> connect

4. Tunggu sampe dapet IP kalo udah ya tinggal browsing seperti biasa..

All about:config

sekarang bahas tentang about:config-nya firefox, wa masukin beberapa option yang wa nemuin dari nyoba2 dan juga dari blog orang, 

difilter copy paste aja option2 yang gwa tulis biar ga cape di cari satu2

untuk mengubah value option yang ad diabout:config double klik aj tulisannya

accessibility.typeaheadfind.casesensitive

value 0 untuk menonaktifkan case sensitive di finddefault

value 1 untuk mengaktifkan case sensitive di find(ctrl+f)

accessibility.typeaheadfind.enablesound

value true, untuk mengaktifkan suara pas ngisi kolom find(ctrl+f)default

value false, untuk menonaktifkan suara pas ngisi kolom find

browser.search.openintab

value true, untuk membuka webpage search result di tab baru

value false, untuk membuka webpage search result di tab yang sama yang sedang kamu buka

nglayout.initialpaint.delay

value 250 firefox nungu 0,25 detik sebelum nampilin data. jadi walaupun web da ngirimin data, firefox nahan datanya dolo sebelum ditampilin default

value 0 firefox langsung nampilin page apa adanya,

browser.tabs.closeButtons

value 0 nampilin close button hanya ditab yang sedang lo liat(mirip2 kaya IE)

value 1 nampilin close button disemua tab, kecuali kalo tab da kebanyakan ntar closenya cuman ad di tab yang lo liat default

value 2 tombol close ga ad di tab sama sekali cara satu2nya ngeclose pake file>close tab atau ctrl + w

value 3 nampilin close button di akhir tab

config.trim_on_minimize

value true kalo firefox diminimize, firefox bakal naro memory yang ada di RAM ke HARDISK(untuk sementara). dolo gwa pake ini firefox gwa cuman make 10mb kalo diminimize cuman masalahnya kalo di restore bisa makan 5 detik baru windownya muncul

value false default

browser.cache.memory.enable

value true cache bakal disimpen di memory untuk mempercepat akses ke cache default

value false gambar yang ad dicache bakal lebih lama munculnya, kalo ramnya dikit di set ke false aj biar hemat RAM

browser.cache.memory.capacity ad efek kalo browser.cache.memory.enable di set ke true

value -1 firefox bakal ngambil memory buat cache sesuai dengan total memory yang ad default

value 0/++ set sesuai keinginan berapa memory yang bakal diambil oleh firefox buat cache=kilobyte

only in firefox 3

kalo ga sala ad option "autorefresh", untuk taunya ketik di filter auto atau refresh

value true, untuk mengrefresh gambar yang ga muncul, dekatkan cursor ke gambar yang ga muncul maka gambar normalnya akan muncul secara otomatisdefault: in rc1

note: cuman ngerefresh gambar yang ga muncul, bukan otomatis ngerefresh seluruh webpage

value false, untuk mengnonaktifkan fasilitas auto refreshdefault: in 3.0.1

[h1]halaman rahasia yang terdapat di firefox[/h1]

about:buildconfig

ga begitu ngerti ini tuk apaan, kasih informasi doang sih

about:cache

kaih tau file2 yang di cache, sama berapa MB total cache yang ad dimemory ama hardisk

about:config

berisi option2 firefox

aboutlugins

ngasih tau plugins ap aj yang ad difirefox lo

about:credits

credit

about:Mozilla

biblenya mozila???

Designing a CSS based template - part VIII

This is the last part of our tutorial.We will add the favorite links on the left and link our styles in a separate CSS stylesheet.

Adding the XHTML code

First we will add the xhtml code for our favorite links:

1. 
   

2. My Favorite Sites

3. • 
     
   • Stopdesign
   • 
     
   • SimpleBits
   • 
     
   • Mezzoblue
   • 
     
   • Zeldman
   • 
     
4. 
   

First we put all our links in a div container and give it an id name favlinks. This id is necessary to define width, margin and padding of the box containing our title and links through styles. Next we have our title between header tags. This will also be styled through css together with our list below it which also has a style defined. For the links we use a class style because this way we can use it repetitively in our page. So you could add another similar list of links with a header title. But if you do so make sure it is added in the "favlinks" container div or add another div id around these links to keep everything in the right place.

The CSS code

First we define our "favlinks" div id container:

1. #favlinks {
2. width: 163px;
3. padding-left: 15px;
4. margin-top: 10px;
5. }

We define the width of the box and give it a padding-leftso that it doesn't stick to the left. We also leave some extra space at the top and add some margin there. The width of our container is not 178px like our navigation, it is 163px since we added a left padding of 15px (163+15 makes 178). This is called the Box Model, also nicely presented in 3D by Jon Hicks.

1. #favlinks h2 {
2. font: normal 16px Georgia, Times New Roman, Times, serif;
3. color: #5C604D;
4. margin: 0 0 10px 0;
5. padding: 0;
6. }

Next on the list are the styles for the header tag where we have our title. First 2 lines should be obvious by now, color and font styles. Below the padding and margin. We only added a 10px margin on the bottom. Padding and margins are needed for the header tags if we don't want to have very big gabs between the title and the links below, just some space exactly how we want it, and for me that is 10px at the bottom.

1. #favlinks ul {
2. margin: 0;
3. padding: 0;
4. list-style-type: none;
5. }

On to our next step in defining our listed links. First we make sure the standard bullet is hidden and that our margins and padding are set to zero, just like we did for the navigation in part 5.

1. ul.extlinks li {
2. background: url(images/bullet_extlink.gif) no-repeat 0 3px;
3. font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
4. padding-left: 12px;
5. }

We've added a class called "extlinks" to define our links. We use "ul.extlinks li", which means that we style the li tag within the ul class "extlinks". First we add a non-repeated background, our bullet and we position it 3px from the top (y position) and 0px from the left (x position) to make sure the bullet aligns perfectly next to our links. We define the font style and then we add a left padding to make sure our text leaves some space on the left for our bullet.

1. .extlinks a:link {
2. color: #A5003B;
3. text-decoration: none;
4. border-bottom: 1px dotted #A5003B;
5. }

1. .extlinks a:visited {
2. color: #6F2D47;
3. text-decoration: none;
4. border-bottom: 1px dotted #959E79;
5. }

1. .extlinks a:hover {
2. background-color: #C3C9B1;
3. color: #A5003B;
4. text-decoration: none;
5. border-bottom: 1px solid #A5003B;
6. }

And last but not least we define the colors and other styles for our links. We use a bottom border of 1 pixel which becomes solid when we roll over. To make sure we don't have a double border, we need to hide the standard underlining by adding "text-decoration: none". Font styles aren't necessary to add since they are already defined in the li tag style. We've also added a background color in the rollover state. We degraded the color a bit for the visited links and changed the bottom border with a subtile color, less visible. This way people know which links they've visited, things remain subtile and you can still make the difference. When adding these styles please make sure you that you are use the right order first links, then visited, hover and last active (if you want). There is a nice trick I learned from reading The Web Standards Solutions book by Dan Cederholm from Simple Bits, to makes sure you remember the correct order: LoVe /HAte (L from links, V from visited,...)

Here is the final result.

Creating the external stylesheet

Now that we have finished our design and I hear you yelling "Huray!" Just one more (important) thing (trying not to sound like Steve Jobs here...). You've noticed that I always include my styles within my webpage. But most of you will know this is not the right way to do this. You should put your styles in a separate stylesheet and link it to your document. I only did it this way to make things easier for you to learn because it's all there in 1 document. But like I said this is NOT the way. So we copy all our styles and paste them in a new document and save it as "styles.css".

Linking the stylesheet

This line of code is what we replace our old code with. Since this style sheet will be used to be displayed on a computer screen, we add media="screen". You could add another stylesheet by adding a link to another stylesheet and add media="print". This stylesheet will then be applied when people print your webpage. Very handy if you have a heavy colorful design on your screen and if you want to make sure when people print it it looks perfect on paper too. Other media types are also possible, more info can be found here.

Here is the final result with external stylesheet.

Now that our series are finished I'm really curious what you have done with the knowledge learned here. Don't hesitate to share what you've created in the comments. Hope you've enjoyed it.

from www.veerle.duoh.com

Designing a CSS based template - part VII

Before we start part 7 I want to correct a minor mistake of mine, mea culpa. When adding blocks of text I told you to put this between div tags but that is not semantically correct. It should be between paragraphs instead. This way everything still looks fine when the CSS stylesheet is dissabled. Doing so allows you to use top and bottom margins to adjust the vertical spacing between paragraphs. This way we also don’t need to use linebreak tags anymore. With this out of the way, bring on part 7. We will add a footer that sticks to the bottom of the browser window. I decided not to add the favorite links in this part yet because it would be too much. After all, this will be rather challenging and there is a lot to read too.

First I need to inform you that things are quite different when creating a footer that sticks to the bottom of your browser window in CSS compared to table layout. Unfortunately since Safari is such a young browser some things are still missing like min-width and min-height which we need for our footer (min-height). The good news is that support for this is coming. More on vertical positing and adding footers can be found in this very interesting article on A List Apart by Bobby Van Der Sluis. Actually, I recommend you to read this before continuing since it explains it all so clearly, and I really don't think I can do a better job here.

After reading the entire article you should know that we need to have 2 major containers to make this work: 1 container holding all the content and one container with the footer. Our container that holds the entire content is the "#container" id. This is the very first div in the code (after the body tag) which closes just above the closing tag of the body. In other words our footer div should be placed below the closing tag of the "container" id div:

This is the CSS code we add for the footer:

1. #footer {
2. margin: 0px auto;
3. position: relative;
4. background-color: #717F51;
5. border-top: 9px solid #F7F7F6;
6. width: 692px;
7. padding: 5px 0;
8. clear: both;
9. }

We add a footer with a dark green background and we give it a 9 pixel border at the top, in the same color as our frame. We define width and add "clear: both", which means that there are no floating elements allowed on both the left or right side of the footer. The footer is aligned the same way as our container by "margin: 0px auto" which has the same effect as a centered aligning. To leave some space around the text we add a padding of 5px on top and bottom. The position of the footer is relative. Explanation about positioning of elements can be found here on the W3C website.

Next we add styles for the text and text links for our footer:

1. #footer h2 {
2. maring: 0;
3. text-align: center;
4. font: normal 10px Verdana, Arial, Helvetica, sans-serif;
5. color: #D3D8C4;
6. }
7. #footer h2 a:visited, #footer h2 a:link {
8. color: #D3D8C4;
9. text-decoration: none;
10. border-bottom: 1px dotted #D3D8C4;
11. }
12. #footer h2 a:hover {
13. color: #F7F7F6;
14. text-decoration: none;
15. border-bottom: none;
16. background-color: #A5003B;
17. }

We use h2 tag for our text:

1. ....

We add this piece of code just under the closing div tag of the "container" id, in other words just above the closing body tag.

Next we add the javascript that Bobby Van Der Sluis suggests. This is necessary to make sure the footer sticks at the bottom of the browser window in Safari.

Make sure that the id you're referring to in the javascript has the same name as the one in your content.

If you preview what we have so far, you'll see that the footer doesn't show in Safari. What is happening in Safari? It might (not sure) occur because we have 2 (left) floating containers (#left and #content) above that needs to be cleared. I've written an article about this collapsing effect a while ago, but Eric Meyer published a full article about this matter which make things even more clear. As Andy Budd mentioned in my comments back then "When you float something you take it out of the normal flow of the document, thus it takes up no vertical height." Couldn't said it better ;-)

To fix this we need to add a clearing div:

1. 
   

We add this class:

1. .clear {
2. clear: both;
3. }

Here is the final result.

In our next part we will be adding the favorite links under the left navigation buttons. Hope you have learned a lot ;-)

from www.veerle.duoh.com

Designing a CSS based template - part VI

Now we will add the content part of our webpage. Next week we’ll be adding the (favorite) links under our navigation and I’ll also explain how to create a footer.

First we add a new id selector in our styles and we give it the width 514px (692px - 178px):

1. #content {
2. width: 514px;
3. float: left;
4. }

Since the navigation "floats" on the left, we need to add a "float: left" to our "left" id. But we also need to add it to our "content" id selector because it also floats left within our main id container:

1. #left {
2. width: 178px;
3. float: left;
4. }

We add this to our XHTML code:

1. this is the right

If the above doesn't make any sense to you, I'm sure you'll find these very helpful:

• More about Float basics
• Floatutorial

Still, our content now sticks to the navigation on the left, we want a bit of space of course so we add some padding to our style of the content container:

1. #content {
2. width: 479px;
3. float: left;
4. padding-top: 15px;
5. padding-right: 0;
6. padding-bottom: 10px;
7. padding-left: 20px;
8. }

Or we can use the shorter version:

1. #content {
2. width: 479px;
3. float: left;
4. padding: 15px 0 10px 20px;
5. }

This is exactly the same: the first value defines the padding for the top, the 2nd for the right, the 3rd for the bottom and the 4th for the left. If we add the padding we need to edit the width of our container since the actual width has now increased with 20px padding (20px left, 0 for the right). We need to change this to 494px. But since we want some space on the right (so that the text doesn't stick to our right border) we deduct it with 15 and use 479px instead.

You could argue with me on the last part and say "hey, why don't you just stick to "width: 494px" and use "padding-right: 15px"? Aha good point! Yes I tried that at first and all looked well in Safari, FireFox and Mozilla, but it didn't in Internet Explorer. The entire content jumped underneath my navigation (underneath my "left" id container). Apparently there wasn't enough space left for I.E. to make it fit on the right. This is actually the only explanation I have for this. By using my little trick everything is still perfect in every browser.

Adding the title

To create our title we add a header tag in our XHTML code:

1. This is the title

Now we will add a style for this tag to define the look of it:

1. #content h2 {
2. font: normal 18px Georgia, Times New Roman, Times, serif;
3. color: #80866A;
4. background: transparent url(images/bullet_title.gif) no-repeat;
5. width: 454px;
6. padding: 0 0 0 30px;
7. margin: 0;
8. }

We use #content h2 which means we give a style to the header 2 element (h2) within our content id. It means that all h2 elements within the content div will be viewed in this style. We could also just use "h2" without the id preceding, this would mean that this style would be applied to all h2 tags within the webpage. Adding this id in front can be handy if you want to use another styled h2 in the left container (#left h2) for example.

1. all h2 tags here will have this style

The first line of our CSS sets the style for the font: the font-weight (normal), the font-size (18px) and the font-family. Again, just like the padding, this is the short version, it sets all these values for the different font properties in 1 line of code. Next we have the color of the text, third the values for the background which is our bullet. Again I've used the short version, I define the background-color (transparent), the background-image (url to the image) and the background-repeat (no-repeat) just in 1 line. Last with the total width of our header and the padding (top, right, bottom and left).

Adding the text

This is the style for the text of the content:

1. .text {
2. font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
3. color: #5B604C;
4. margin-bottom: 10px;
5. }

We use a class now (dot in front) since we will use this style repetitively in our webpage. The first line sets the style for the font, starting with the font-size (11px) and line-height (18px) followed by the font-family. In the 2nd line we define the color of the text. And last but not least we add some space between paragraphs by adding a margin-bottom of 10 pixels.

In our XHTML code we add a paragraph tag under the h2 tag that holds our text and we apply the class "text" to it.

1. Here comes the text

-Adding the image

This is the style for the image that is aligned right:

1. .imageright {
2. float: right;
3. padding: 7px;
4. background-color: #ffffff;
5. border: 1px solid #bac1a3;
6. }

Again we use a class for this since we should be able to apply this style a couple of times within our webpage. Our image floats right within our text div container, so we add "float:right". Next we set a padding of 7px around the image and we add a white background. This will create a white area of 7px around the image. Next, we add a 1 solid pixel border in a specified color. The last line is again the short version of border-width (1px), border-style (solid) and border-color (#bac1a3). You can add another class for the left aligned images and call it ".imageleft" and use the same properties and values except for the floating part, you change "float: right" to "float: left".

Here is the final result

from www.veerle.duoh.com

Designing a CSS based template - part V

In this part of the tutorial we will be implementing our navigation on the left.

But first things first. When creating webpages we always have to make them as accessible as possible. If you read the comments on part part IV, you'll notice that someone mentioned it would be better to use a h1-element for the main header since this is more semantic code and it makes a site more accessible to search engines as well as people with no CSS. This is of course too important to overlook, so I've altered our code this way.

The image replacement technique

• Adjusted webpage

This technique is actually called the image replacement technique. It means that we use text in our HTML code instead of the actual image. The header image will show in browsers that support the CSS (as a background image "background: url(images/header.jpg)") and the text will be invisible (because of the "text-indent: -9999px"), since our CSS code places the text outside our viewing area. In older browsers or in screen readers (used by blind people) you'll see the text instead. This way we have more accessible code.

1. h1 {
2. width: 692px;
3. height: 90px;
4. text-indent: -9999px;
5. background: url(images/header.jpg);
6. margin: 0;
7. padding: 0;
8. }

The width and height are necessary to define the space for our header background image. The "padding:0" and "margin:0" are needed to make sure our image aligns nicely to the top of our page. Furthermore, I've moved the "text-align: center" into our body tag selector since all the content should be centered. However, the content within the container should not be centered, so we add a "text-align: left" there. Our container has "margin: 0px auto" which means it will appear at the very top (0px) and centered (auto).

Implementing the navigation

To implement the navigation buttons on the left we first create an id container holding the content on the left:

1. #left {
2. width: 178px;
3. }

So far the only thing we need to define is its width. Within this left container we have the div id container for the navigation, called navcontainer. The best way to create a navigation with CSS is to use a bullet list as HTML code and create CSS styles to it to change its design. Like this ("#" is used as a dummy link. ):

2. • Home
   • About me
   • Contact me
   • Articles
   • Photo roll

Designing a CSS based template - part IV

Now that our color paint and pencils are tucked away, we can move on to part 4. In this chapter we will concentrate on slicing our design and determine the DIV containers.

The question you need to ask is, what are the different parts of our design? What are the different components of this page? By doing that we'll have our answer on how to slice it up. If you are a web designer it might be a rather easy answer since you are thinking about the next step, the dividing into separate DIV containers ... and no, no tables. With CSS and XHTML we create not only lighter web pages, we also make things much more flexible and much more accessible.

This is how I see my different areas, components or whatever you call them:

• the header
• the left
• the content

Exporting the gifs and jpegs

These are the different elements you need to export to gif or jpeg:

• 1. header
• 2. bg_navbutton
• 3. bg_navbutton_over
• 4. bullet_extlink
• 5. bullet_title

Ok, you probably think, "what about the background?" That's right, it's not listed here. This needs a little explainging. We want a smart solution, since we still want our content centered if we stretch our window. Here is how you should export your background. It's 1600 pixels wide and 5 pixels high (this should be enough... unless you are the proud owner of an Apple 30 inch Cinema Display ?).

Implement the background by using CSS

This is the CSS code we need to have our centered background:

Our background is a 5 pixels high "line" which is repeated vertically (repeat-y) starting horizontally centered (50%) at the top (0) of our browser window. Background-attachment: fixed, means the background will not scroll with the content, it is "fixed". We use the body tag as our selector, since our background should be applied to the entire body of our page.

View the result here.

Adding our first layout DIV containers

Now we will be adding the first layout DIV containers: our header, left and the content.

Here is the CSS for our header:

Now we use an id selector to create the header container div. An id selector is always applied to only 1 element of the page. An id attribute must be unique within the document. Our header needs to be centered, that's why we use "text-align: centered;" This line is added to our code in the body:

You'll notice that when you add this header image that it doesn't align at the very top of the page. That's why we add a "margin: 0" and"padding: 0" into our body tag selector:

1. body {
2. background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
3. background-attachment: fixed;
4. margin: 0;
5. padding: 0;
6. }

View the result here.

If all of this is really very new to you, then this full introduction to CSS is a must read to get a better understanding of the matter. Good luck! ;-)

from www.veerle.duoh.com

Designing a CSS based template - part III

This will be our last design part, after this it will be “slice and dice” time and the beginning of the XHTML and CSS conversion. Here are some details of the final result:

I chose for the pink green buttons, maybe a bit girly I know but I like the combination of the prink with the green.

Today we will create the entire template design. You'll get some tips and advice on how to create a header background, how add a finishing touch like ornaments, and a few resources on where to find those special Dingbats or ornamental fonts.

Creating the header background

In part I and II we created our buttons and chose our colors. Now it's time to look for a picture that contains the colors of your preferred color pallet to create the header background. If you look at my color pallet you see that we have green and pink. I decide to use only the very flashy fluorescent pink for the little accents (like the bullets in the navigation) and a darker cherry for my banner combined with pink and a little green accent in our icon.

When looking in my iPhoto collection I came across this picture (taken at Ibiza btw). Since the red of the flower is a bit too red I changed it to a more suitable pinkish color. I used Adjustments >Hue/Saturation (control + u Win, command + u for Mac), chose "Reds" (to change only the red color in my picture) from the Edit popup menu and set the Hue to +24.

Next step is choosing a nice detail that contains some suitable colors that might create an interesting effect. This will all become clear in the next step when we will be adding our filter effect. Creating this special background header will ask some creativity and it will need some experimenting until you get what you like. This is the part of the picture I think could be nice experimenting with.

The picture is of course reduced here, I started from a bigger image (1600x1200px). I added one of my favorites filters on it Filter > Artistic > Paint Daubs. In Photoshop CS it's really fun playing around with the Artistic filters since you not only get to see a live preview of the result, you also have an overview of all the possible effects shown by little thumbnail image. This makes it easy to play around until you have the effect you want. Here is my result:

This image is blended into my cherry colored background. As finishing touch I drew some lines (paths) using the Pen tool. I command (Mac)/control (Win) clicked the layer and used the Brush tool to color the border of my selection pink and I faded it a bit by using an Opacity of 30 for that layer. Then I duplicated this layer, flipped it a bit, rotated it etc. then again duplicate it etc.

Download a QuickTime movie to see how this is done.

I added a little ornament on the right (created with the font Tamuz). We will get back on the ornaments later on, but this is the result so far:

The title of our blog template

The title of your blog is something personal and I kind of like it when it has a little icon or logo. After all you want you blog to be something special, something recognizable, something you can associate yourself with etc. For this tutorial I chose a cactus, but to be honest further then the fact that I love cactuses it has little extra meaning. But my choice is also because this little icon suits perfectly in the design and the color scheme I chose. And finally, the font I used for my title is Bon Guia. Here is the final header:

Some links to get you started:

• Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre
• Adobe ornamental fonts (like Woodtype Ornaments or Poetica Ornaments)
• a list of free Dingbats fonts

The final result

Further from the header and the buttons we haven't got any big challenges to solve. Let's implement all this together in one page and see what the final result is. The final touches are of course as important as the rest so don't forget to add a little icon or ornament. In my template I used a green Minion Ornament next to the title and I created little exit link icons for my favorite links. This doesn't look bad, hope yours look even better at the end and hopefully you had some fun creating it! Don't hesitate to sent us a url to share the result ;-)

from www.veerle.duoh.com

Designing a CSS based template - part II

As you all know, my initial idea was to give you a small tutorial on how to create glassy buttons in an easy way. That’s why it might look a bit odd to you that we will think about color-schemes in the 2nd part of our tutorial. This should actually be our first step, then the creation of the buttons, the background etc.

Choose your color-scheme

Anyhow you might have a head start on today's subject. To choose the right colors for your weblog is a matter of personal choice, it reflects who you are, what you like etc.

Actually explaining to you what you should choose is probably impossible although there are a few tips that I always try to follow:

• use at least 1 contrasting or highlighted color and use that to give accents to your page. Use that color for your text links, this way they will be very visible.
• make sure you use not too many different colors, otherwise you'll end up with an unattractive chaotic layout. I mostly take 3 colors, 2 subtle ones and 1 to highlight.
• from these 2 subtile colors I use darker and lighter variations, I'll stick within the same range of those 2 colors. If you use less then 3 it might end up in a rather boring look, although if you use enough variations you can get interesting results too. This could work if you're looking for minimalism.

Use the Hue/Saturation (control+u for Win / command+u for Mac) to play arround and see variations of your colors. Actually all those examples above are created this way, starting from the first example and using this technique to achieve the other 3. To come up with my first matching colors I used my own post as a guideline.

RECOMMENDED! If you still haven't a clue which direction you should start looking. Actually this is really worthwhile watching for everyone it's awesomely inspirational. (link seen on Angie McKaig's Assorted Sweets).

Time to draw some patterns

It's pixel drawing time now! Start with a document of 30x30 pixels, RGB, background color of your choice. Draw some pixel dots using the Pencil tool in Photoshop. Here are some examples that might get you started:

Most of the time you'll spend in creating these, is by experimenting in various ways. Personally I don't know of any tricks on how to come up with ideas. What I mostly do is start with a background, choose a color that is very close to the background and start drawing dots. If I create a background with lines, I duplicate that layer, move it a bit up, down, left or right... and start playing with the layer mode, opacity etc.

These enlarged versions are the actual patterns, cropped at the right place to achieve a seamless repetition. The hard part is sometimes figuring out the right place to crop. The way I do it is using the rectangle Selection tool, and draw a square (hold down the shift key to get a square selection) from the top left corner to the bottom right corner of the pattern. To define these 2 corners you have to think about the top left starting point of the pattern and go down in a diagonal way and stop right before the exact same pixel as your starting point. Keep in mind that for patterns where you use lines on 45° (like the blue pattern in my example) or my blogs pattern that you have to watch all corners to get a perfect match.

Once you have your square where you think it should be go to the Image menu and choose Crop. Select your pattern and choose Define Pattern... from the Edit menu and give your pattern a name. Now you need to test your pattern. Create a new document of 300x300 pixels, Select All (control+a for Win / command+a for Mac), choose Fill... from the Edit menu and select Pattern from the dropdown menu and select your pattern from the 2nd dropdown, click OK and check the result.

The next part will be about the actual framework and layout. The focus then will be about how to create an attractive header and title, including title ornaments. Hope you enjoyed this part and if you have any insights on the creation of backgrounds, please do share thanks ;-)

Download the pattern examples in Photoshop format.

from www.veerle.duoh.com

Designing a CSS based template - part I

This is the start of a step-by-step based tutorial about how to create a CSS based template page. This will be a tutorial consisting of several parts: part 1 covers the creation of the navigation buttons in Photoshop CS*, the 2nd part will be the creation of the background, next on the list is the header and layout of the page and finally the implementation in CSS and XHTML.

Now some of you may wonder why in God's name I start with the creation of the navigation buttons, but my initial intention was to give a small tutorial about the creation of these simple buttons. But once I was on the roll the thought came to my mind, why not do the complete course.

Create a glassy beveled navigation button

Create an RGB document, 178 x 22px white background. Create a new layer (call it "button") and fill it with gray #ececec. Add a new layer (call it "highlight") and draw a 1px white highlight line on top and on the left (using the pencil tool, 1px width). Fade out the pixel line on the left bottom a bit using the Erase Tool (select brush, 20px, 50% opacity).

Create a new layer (call it "bullet"). Draw the pixel bullet using the Pencil Tool (1px, #727272). You can of course choose your own fantasy pixel bullet.

Create the glassy bevel effect by drawing a path (#d6d6d6) using the Pen Tool.

There you go! You have your button, now that wasn't so bad was it?

Creating the rollover effect.

To create the rollover effect we simply duplicate our layers and change the colors. First we link the layers together in the Layer Palette. Then we choose "New Set From Linked" in the Layer's Palette dropdown menu. Now duplicate that layer set by right clicking and holding down mouse button (or click hold down mouse + control for Mac users with a one button mouse) next to the layers' name. Choose Duplicate layer set in the dropdown menu. Name it "button over".

Now you can go over each layer and change colors to create your rollover button. These are the colors I used in my example here:

• button background color: #bfe3ff
• color of glassy bevel: #a5d1f3
• color of the pixel bullet: #e4001b

Download the Photoshop source file of this tutorial.

from http://veerle.duoh.com/