Skylette

Blogskinning skills - Chapter 1

2010-05-16T23:53:00.002-07:00

Sorry that Chapter 1 is added after Chapter 2 which is more advanced. Because i forgot to add it in. Very sorry, because i realised you all can't understand what the hell i'm trying to say in Chapter 2.

I still need to introduce you many different types of styling codes first.

Break (that means the word go to the next line.)
<Br>

Paragraph (Leave a line between the current paragraph and the next paragraph.)
<P>

div (It's a kind of box that you can ad styles to it.)
<div> *example: <div class="..."> <div id="..."> *

span (It's a another kind of box, but for text styling only.)
<span> *example: <span class="..."> <span id="...">*

What are "class" and "id"? They are in the stylesheet which you will learn in chapter 2.

class:.heading{style}

id:#exampleonly{style}

Colour codes

Colour codes are 6-character letters or numbers, beginning with a # in front of every colour code. Eg. #ff6699 (pink) http://skylettee.blogspot.com/2010/05/blogskinning-skills-chapter-2.htmlisit this website for colours. Colours can also be presented as in rgb(red,green,blue) *red, green and blue to be represented by numbers. Click here to know more about RGB colour codes (and choose the colour).

Borders

Borders are presented like this:
border: 6px(length or border) solid (type of border) #ff6699 (color);
Simply add this into the styling boxes eg. div, span.
More information here...

Padding

Padding are the spaces between the borders (may be invisible like in span or div.) They are presented like this:
padding: 5px; (can be padding-left,right,top or bottom)
More information here...

Font (Font styling)

Font, meaning text that can be in many styles. You can set the type of font (eg.georgia, arial.), its style (bold, italic, underline or ~~strikeout~~), its size (eg.15pt) and its colour (eg.#ff4455).

font: normal 15pt arial;
More information here...

Text-decoration (text styling)

Text-decoration are things like bold, italic, underline and ~~strikeout~~. They are what i call b,u,s,i because you just need to do this:
<b/u/s/i(choose one)>yourtexthere</b/u/s/i> eg. bold. <b>SKYLETTE</b>
More information here...

That's all for Chapter 1! Hope you can catch up with Chapter 2. Please give some feedback! :D

Blogskinning skills - Chapter 2

2010-05-16T23:34:00.000-07:00

Let's start some basic things first. We are going to learn these things in this chapter:

How to start off the codes

Title

Basic stylesheet

How do we start off?

We must always start off like this:

Then followed by the title...

Title

<title>YOURTITLE</title>

You may change the "YOURTITLE" to your own title.

Stylesheet

This is the most important part of designing a website. If you make any mistake, the colours of the design will look different. Without this stylesheet, everything will be the default (link colour is blue, visited link colour is purple and the clicked on link colour is red.) Make sure that all your codes are in American English (AmE), if not it is considered spelled wrongly and even 1 letter can ruin the whole thing.

Start off the style sheet right after the title.

<style>

Then followed by:
(link codes, body codes and b,u,s,i codes (bold, underline, ~~strikeout~~ and italic codes.) Call them "busy" codes.)

Please note the words in asterisks * in the blue box below are NOT SUPPOSED to be there. They are just to tell you what they are. :D Like this:
<style> *LINK STYLES* a:link *a link colour, not visited before.*{color: #999999 *one of the shades of gray*; text-decoration: none;} a:visited *a visited link colour* {color: #ff6699 *pink*; cursor: crosshair;} a:active *link/visited link colour when clicked on*{color: #000000 *black;} *BODY STYLE (for the page)* body{background: url(yoururl.jpg); *or can be background: #444444*} *HEADINGS* .heading1 *can be change to other names*{font: normal *font type* 15pt *font size* georgia *font name*} *You can add as many headings you want.* *You will be taught how to present in chapter 3.* * "BUSY codes" * b{color: #ff6699; font: bold 16pt arial;} u{color: #ccffcc; font: normal 9pt arial;} s{cursor: crosshair;} i{font: italic 12pt georgia; color: #e7698b;}

That's all this chapter! Hope you have learnt many codes today! Please give some feedback at the shoutmix box on how to improve it, thanks! *Chapter 2 is presented before chapter 1 because even more basic things are needed to be learnt first.

Blogskinning skills - Introduction

2010-05-16T22:31:00.000-07:00

So many of you requested to learn HTML, which is how to make blogskin.

FIrstly, you need to know what is HTML.

anguage. And that really looks like a language because languages have patterns, o HTML basically means Hyper Text Markup Language. You use HTML to create websites. HTML has many different ways to create, you do not need to follow only that way, but i recommend you to do it as my method. If you study HTML for a long time, you will soon notice that there's a pattern in the HTML language.

This is my way of creating a blogskin. If you do not like it, you can visit this website. Please don't come and criticise me, thank you.

Website link: W3Schools

One-line right-click & select/highlight

2009-10-27T02:20:00.000-07:00

One-line disable right-click code

.</texarea> <textarea style="width: 350px; height: 300px;"><body oncontextmenu="return false">

Result is: (try right-clicking inside the black box.)

One-line disable select/highlight content

Sorry, i cannot demonstrate in here because it can't work in the black box. You'll try it in your site.

For more amazing codes, visit www.dynamicdrive.com .

Mouseover effect

2009-10-27T02:02:00.000-07:00

I'm gonna share with you some amazing codes which is not very popular among amateurs, if you are one, you have a chance to learn a lot of new codes so pay your fullest attention!

Mouseover effects code

Let me demonstrate this using the (span) code.
<span style="background: #93a3ca;" onmouseover="this.style.background='#ccc'" onmouseout="this.style.background='#93a3ca'">skylette</span>

Result is (hover around the word "skylette" to see effect):

skylette

Definitions:
onmouseover => when your cursor/mouse hovers over the span
onmouseout => when your cursor/mouse hovers out of the span after it has hovered over the span.

You can also add other styles like padding (space between the content inside the span and the border of the span), cursor when hovered over the span,font styles (appearance of the text and advance codes like filters.

THIS.STYLE codes:
background => this.style.background
font/word colour => this.style.color
border => this.style.border
cursor => this.style.cursor
If you need more help, ask me or google your question at www.google.com . For more amazing codes, visit www.dynamicdrive.com .

How to add rainbow effect to images

2009-06-14T20:15:00.001-07:00

How to add rainhow effect to images

Have you seen this kind of images?

Firstly, my method of adding rainbow effect requires Photoscape. Actually it wasn't my method, it was jac's. She taught me. Thanks jac! Oh now after you've installed Photoscape, the tutorial starts. THOSE WHO ALREADY HAVE PHOTOSCAPE, YOU DON'T NEED TO INSTALL OR DOWNLOAD PHOTOSCAPE ANYMORE.

Then you have to get a rainbow effect image first.

Making a rainbow effect image.

You got to get a rainbow effect image, or you can make one. Making one yourself lets yourself have more sense of achievement.

So, how do we make a rainbow effect image? Look at this.

Entering Photoscape

1. Open up PhotoScape.
2. Click "Editor".

Step 1

I normally use Filtering to edit my images, same, like this.

Step 2

Final Product

We're done with the creation of rainbow image. Now, we gotta add in the effect to the image.

Adding the effect

You need to open back the rainbow image first. And then resize it to the same resolutions as the imnage you want to add the effect to. Before that, of course you need to know the resolutions of the image.

Resize rainbow effect to the same resolutions of the image.

DO NOT PRESERVE ASPECT!

Click "Object".

Click "OK" when you're done.

The Original Image

The Final Product

Uncoded Layouts

2009-05-31T09:44:00.000-07:00

Here are some backgrounds as layouts. Please credit back.

Set 1

Background

Top images