Posts filed under 'Tutorials'

How to Create a Simple Avlack Theme

This is a simple video tutorial that will guide you as to how to make a simple Avlack Theme. The tutorial comes in two parts. Turn on your speakers and start learning how to personalize your site by making a simple Avlack theme!

You can find the original tutorial at http://lightandmagic.multiply.com/calendar/item/10001

PART 1





PART 2


5 comments January 7th, 2009

Insert Contact Form

Wanna your own contact form into your MP site. it’s easy.

first
visit this site for register. –> http://kontactr.com/signup/
after submit and activate account via your email.
then login in http://kontactr.com/login/.
after login, you directly refer into several embed code that can use for website.
choose Embed Widget (first box)

 Insert Contact Form

copy all the code and paste it in notepad.
leave it for a moment.

second
make a journal post.
write the title of journal. ie; Contact Form
then uncheck “edit html”, copy paste embed code from notepad (#1)

 Insert Contact Form

no need to fill “Tags”.
Set access for everyone.
also uncheck “allow replies” –> i think contact form dont need replies, right?
save as draft –> just to see whether it’s good or whatever you like.
satisified?
save and publish it.
done.

—-
PS.
for Bahasa Indonesia, you can visit here
see live demo

6 comments August 12th, 2008

Step-by-Step Guide on Making your Own Theme

We have been receiving comments asking for a step-by-step guide on how to set-up or make your own theme. We have provided several tutorials and this post will simply layout the steps you need to do and direct you to each specific tutorials. Let this be your simple guide to start making your own theme by constructing your own CSS.

    1. Decide how you want your page to look like. This layout of your page will depend on the Base Themes. The most popular and simple base theme to use and tweak is the Avlack, Sandskrit and Shadow Box. These base themes have the rail body which bears the headshot on the right side while the contents are aligned on the left. RedFrog Base theme have the contents on the right and the rail on the left. If you want an extended wide lay-out, you can settle for Skyline. There are more Base Themes to choose from. You can see how the Base Themes look like in our post Base Themes and their CSS.
    2. Copy the CSS Codes of the Base Theme that you have chosen. Get the codes in our post Base Themes and their CSS. Open Notepad and paste the Base Code there.
    3. Have the images you want to work with ready. If you want to make your own banner or personalize your footer, now is the best time to work with it. The following tutorials will help you in doing so:

      Making a Banner with your Photo
      Animate your Banner
      How to Personalize Footer
    4. Upload the images you have including the image you want for your background in a Image-Hosting site like Photobucket, Multiply, and others.
    5. Once your images are uploaded on the image hosting site and copy the URL. Use our post on Your Page and CSS Code to know which part of the CSS you need to put the URL of your image.

    For example, if you have your banner image’s URL copied, paste it on background part of the specified CSS:

    div.owner_nav {background:URL of Banner Image;}

    For the Footer Image, paste it on the background part of the specified CSS below:

    div#ownedfooter {background:URL of Banner Image;}

    For the background of the entire page commonly known as body background, paste it on on the background part of the specified CSS below:

    body {background:URL of Banner Image;}

    Note: The banner and footer images should have the same dimension to avoid misalignment. If you’re a beginner, have your image follow the dimension of the banner or footer on the Base Theme.

    All other tweaking or changes on the CSS, let the post Your Page and CSS Code be your guide.

6. Test and Preview your CSS by installing it on your Multiply Site. Make sure you backup your old CSS before you click Preview or Save.

7. Once satisfied, save the CSS and let it be your basis for your next theme. Enjoy tweaking, more themes to come and we expect to see it here in www.multiplythemes.com!

205 comments June 5th, 2008

Creating a Nice Textarea/Comment-Box

A textarea is an element on a webpage that you can type into. In Multiply lay-out commonly used as commenting areas, and guestbook. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS.

in example of my lay-out, there is a writing : “Thanks for commenting” at bottom right box.
well you can do this with css and of course with your own style.

comment box Creating a Nice Textarea/Comment Box

first you should know that there is two syntax (command) for comment box in multiply lay-out, dh ; [.replybox textarea] and [textarea].
for [.replybox textarea] just leave it, dont mess it. we just play here with [textarea] syntax

for text background in comment box, use it with images. you can create it with your favorite image editor,such as photosop, etc.
after you’ve make text images, see the size of your created text images. i recomend that size of that text image is not larger than 400px.85px.
upload that text-image in your fav image hosting, otherwise you can upload it in multiply photos-album. make a note link that given for text-image.
leave it for a while.

then copy paste this css code and insert it in your custom css.

textarea {
background-image: url(http://YOUR LINK TEXT-IMAGE);
background-position: bottom right;
background-repeat: no-repeat;
background-color: #fff; /* this background-color is adjusted with your background text-images */
}

do preview and if your text-image in comment box is right in position, well done.
but if not, you must be edit your text-images and adjust it with width and height of your comment box.
after edit it, do preview again and if it’s correct, save it.

that’s it.
want more modified of your comment box?
ok, we can make more nice for submit button and Preview & Spell Check button.
just copy this css code below and paste it into your custom css ;

input {
border: 1px solid #ffffff;
margin: 0;
padding: 2px;
color: #444444;
}

input:hover {
border: 1px solid #000000;
margin: 0;
padding: 2px;
color: #444444;
cursor: pointer;
}

you can be a creative person to modify this 2 buttons. just change border color. otherwise you can change font-type, font-style, or font-weight
in input:hover, thats for command if cursor points the button. and yes, you can create it too.

here is additional css code for font :
font-family: "Verdana","Lucida Sans",Sans-Serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12px;

you can insert that css code of font into input or input:hover syntax.

there is one more trick for comment box, but it only works in IE6 browser and above.
you can insert this css code ;

input:focus, textarea:focus {
background-color: #eee;
}

this css code is used for matching any element that has keyboard input focus. Keyboard input focus describes any element that’s ready to receive user input. It can apply to a form control.
just try it. and i believe this :focus code make your multiply more cool.

30 comments March 26th, 2008

Marquee Tags

Marquee Tutorial

The <marquee> tag is used to introduce text that scrolls horizontally within a display box. The usual warnings about the distracting and annoying nature of continuously running animations apply.

Here’s a simple example:

Hello World! And here’s the HTML:
<marquee>
<font color=”red” size=”3″>
Hello World!
</font color=”red” size=”3″>
</marquee>

IE3, apparently, does not honour any other tags that appear within a marquee so it is impossible to animate multi-coloured text or images this way. This restriction has been relaxed in IE4.

The tag, which is a container tag, has no fewer than 11 attributes.

  1. align This tag can take one of the values top, middle and bottom. It controls the positioning of the marquee display box relative to the current text in exactly the same manner as the <img> tag’s align attribute.
  2. behavior This tag controls the behaviour of the displayed text. There are three possible values. Text scrolling starts as soon as the page is downloaded, not when the user firsts scrolls the marquee into view.
    value effect example
    scroll text scrolls across display and re-appears from the other end when it has disappeared from one end. This is the default behaviour.
    slide This is similar to scroll except that when the sliding text reaches the far end of the box, it disappears and restarts at the starting end of the box. If the display is not looping then the text remains positioned at the far end of the box. Hello World
    alternate text “bounces” between the ends of the box Hello World
  3. bgcolor This tag controls the background colour of the display box, in the example above the display box background colour was set to aqua whereas the table cell background colour was set to white
  4. direction This attribute controls the direction of scrolling. Permissible values are left and right specifying the end of the box that the scroll starts from. Here’s some examples.
    value effect example
    right starts at right hand end Hello, World
    left starts at left hand end Hello, World

    It appears that the value of this attribute does not affect the behaviour of the marquee if the value of the behavior attribute is alternate

The following four attributes are used in exactly the same way as they are used with the <img> tag.

  1. height This controls the height of the display box.
  2. width This controls the width of the display box.
  3. hspace This controls the horizontal space around the display box.
  4. vspace This controls the vertical space around the display box.
  5. loop The value of this attribute controls the number of display cycles. The values -1 and infinite both mean continue indefinitely.
  6. scrollamount This controls the amount of movement (in pixels) between the successive displays that give the impression of animation.
  7. scrolldelay This controls the delay (in milliseconds) between the successive displays that give the impression of animation.Here are some examples
    scrollamount scrolldelay example
    5 5 Hello, World
    5 500 Hello, World
    50 5 Hello, World
    50 500 Hello, World

The final example should be enough to illustrate the distracting effects of too much animation.

15 comments March 19th, 2008

Modifikasi Favicon Multiply (Bahasa Indonesia)

favicon desc Modifikasi Favicon Multiply (Bahasa Indonesia)

yang belum tahu makanan jenis apa yang namanya favicon, silahkan baca disini
tapi jangan lupa balik lagi kesini yak icon razz Modifikasi Favicon Multiply (Bahasa Indonesia)

berikut tutorial nya :

      1. pilih images/gambar yang mau dijadiin favicon. terserah mau tipe gambar .jpg, .png, i.gif, .ico. tapi lebih baik pilih tipe .jpg. kalau tipe .ico, mungkin kesulitan mau di-hosting dimana.

      2. ubah ukuran gambar yang akan dijadiin favicon menjadi ukuran 16px.16px (width: 16px, height: 16px) dan harus 16px. gak boleh lebih atau kurang.
      terserah mau tools apa(potosop kek, paint kek, acdsee) untuk ngubah ukuran gambar tsb. setelah gambar/images jadi 16px, upload gambar tsb. terserah mau upload dimana (Photobucket, Imageshack, dll). aku lebih pilih aplot aja di multiply. tapi inget!!, multiply tidak bisa nerima gambar dengan tipe .ico, jadi kalo mau aplot di MP yaa lebih baik gambar yg mau dijadiin favicon pilih tipe .jpg, .gif, atau .png.

      3. setelah diaplot, copy paste di notepad (jangan office-word/worpad) link/url dari gambar/image yang telah diaplot.
      misal : _http://tinypic.com/wefgwe.jpg
      inget!! hanya direct link yang di copy-kan, bukan yang ada <a href…>sampe sini, jelas??? kalo lum jelas, coba baca pelan2 dari poin 1. kalo perlu minum dulu deh.. icon biggrin Modifikasi Favicon Multiply (Bahasa Indonesia)

      4. setelah dipaste di notepad. tinggalin bentar tuh link di notepad.
      skr liatin di link/url hasil paste tadi, ada http:// iya kan??
      nah, ganti titik dua [:] di http:// dengan %3A (inget!! case-sensitive, bahasa indonesia-nya apa yak?)
      setelah diganti jadi gini :–>> http%3A//LINK_IMAGE_YANG_UDAH_DIAPLOT_DOT_COM

      5. skr copy paste di notepad kode berikut :

      6. dah dipaste. skr tinggal ganti di kode diatas tadi yang ada tulisan EDITED_IMAGE_URL dengan http%3A//LINK_IMAGE_YANG_UDAH_DIAPLOT_DOT_COM
      inget!! gak ada spasi ataupun tanda lainnya. lebih baik di copy dulu link imagenya yg udah dimodifikasi tadi, lalu sorot/blok tulisan EDITED_IMAGE_URL pada kode diatas, lalu paste.
      hasilnya seperti ini :

      7. dah selesai? lom.. icon razz Modifikasi Favicon Multiply (Bahasa Indonesia)
      skr copy kode di poin 7 tadi. skr masuk ke homepage multiply kamu. pilih customize site, trus pilih edit untuk site title. gak tau site title, itu tuh kotak yang paling atas. kalo di MP aku, yang ada tulisannya difa is [still] here.
      setelah itu, paste kode yg dicopy tadi. paste-in nya setelah tulisan judul .. atau setelah kode gambar (kalo yang pake gambar untuk site title-nya)
      misal nih di MP aku, edit site title-nya kayak ini:

      8. kalo udah, save, done.
      pasti lom muncul favicon-nya..iya kan?
      coba refresh/reload homepage MP kamu..kalo perlu, matiin tuh browser-nya trus idupin lagi. coba masuk ke MP kamu lagi..
      voila…favicon kamu muncul. kalo muncul, well-done deh. kalo lom muncul juga, coba deh: suruh temen kamu tuk liat MP kamu, tanyain ada gak favicon nya?
      kalo lom ada juga, skr coba kamu buka hasil aplot gambar yg mau dijadiin favicon. kalo di browser kamu muncul gambarnya, bearti link/url gambarnya dah bener.
      skr coba lagi reload/refresh MP kamu, muncul gak?
      kalo lom muncul juga, kemungkinan ada kesalahan di kode yang ada di site title tadi.
      coba ulangi lagi dari poin 1 di atas. kalo ngikuti bener2 dari awal, mudah2an pasti muncul favicon-nya.

      9. inget, untuk pengguna browser internet explorer (IE 6, IE7) favicon-nya biasanya gak muncul, munculnya kalo website tsb di-bookmark.
      buat pengguna mozilla, opera, dan browser laen pasti muncul favicon-nya disebelah link address.

      10. selesai..
      jika ada pertanyaan/bantuan/atau mau kasih sumbangan/donasi icon razz Modifikasi Favicon Multiply (Bahasa Indonesia) , silahkan tinggalkan komentar dibawah.

This tutorial was a translation from English to Bahasa Indonesia by Diff.
Click this link FavIcon: Icon beside your Site’s Name for the Original English Version.

13 comments March 19th, 2008

Color and HTML Hex Codes

 Color and HTML Hex CodesHOW TO APPLY THESE CODES AND COLORS

To Your Html – Color Codes Are Hexadecimal Triplets Representing The Colors Red, Green, And Blue.

For example, in the below example of the color red, you can notice the color code is FF0000, which is ’255′ red, ’0′ green, and ’0′ blue.

To change the font color, add the below source code:
<font color=”#ff0000″>Making the text color red</font>

In addition, with new browsers you now have the capability of changing the color by using the name, such as:
<font color=”red”>Making the text color red</font>

Other ways to use these codes is within your BODY statement. This allows you to change the complete page:

TEXT=”000000″ When used will display all text on page as black.
LINK=”#1F00FF” When used will change all links to red.
VLINK=”blue” When used will change all viewed links to blue.
BGCOLOR=”#ffffff” When used will display the page with a white background.

MAJOR HEXADECIMAL COLOR CODES

  • Color

Color Code

Red

#FF0000

Turquoise

#00FFFF

Light Blue

#0000FF

Dark Blue

#0000A0

Light Purple

#FF0080

Dark Purple

#800080

Yellow

#FFFF00

Pastel Green

#00FF00

Pink

#FF00FF

  • Color

Color Code

White

#FFFFFF

Light Grey

#C0C0C0

Dark Grey

#808080

Black

#000000

Orange

#FF8040

Brown

#804000

Burgundy

#800000

Forest Green

#808000

Grass Green

#408080


AFTERINFO – COLOR CODE CHART FOR USE ON MULTIPLY

COLOR NAME CODE COLOR
Black #000000 Black
Gray0 #150517 Gray0
Gray18 #250517 Gray18
Gray21 #2B1B17 Gray21
Gray23 #302217 Gray23
Gray24 #302226 Gray24
Gray25 #342826 Gray25
Gray26 #34282C Gray26
Gray27 #382D2C Gray27
Gray28 #3b3131 Gray28
Gray29 #3E3535 Gray29
Gray30 #413839 Gray30
Gray31 #41383C Gray31
Gray32 #463E3F Gray32
Gray34 #4A4344 Gray34
Gray35 #4C4646 Gray35
Gray36 #4E4848 Gray36
Gray37 #504A4B Gray37
Gray38 #544E4F Gray38
Gray39 #565051 Gray39
Gray40 #595454 Gray40
Gray41 #5C5858 Gray41
Gray42 #5F5A59 Gray42
Gray43 #625D5D Gray43
Gray44 #646060 Gray44
Gray45 #666362 Gray45
Gray46 #696565 Gray46
Gray47 #6D6968 Gray47
Gray48 #6E6A6B Gray48
Gray49 #726E6D Gray49
Gray50 #747170 Gray50
Gray #736F6E Gray
Slate Gray4 #616D7E Slate Gray4
Slate Gray #657383 Slate Gray
Light Steel Blue4 #646D7E Light Steel Blue4
Light Slate Gray #6D7B8D Light Slate Gray
Cadet Blue4 #4C787E Cadet Blue4
Dark Slate Gray4 #4C7D7E Dark Slate Gray4
Thistle4 #806D7E Thistle4
Medium Slate Blue #5E5A80 Medium Slate Blue
Medium Purple4 #4E387E Medium Purple4
Midnight Blue #151B54 Midnight Blue
Dark Slate Blue #2B3856 Dark Slate Blue
Dark Slate Gray #25383C Dark Slate Gray
Dim Gray #463E41 Dim Gray
Cornflower Blue #151B8D Cornflower Blue
Royal Blue4 #15317E Royal Blue4
Slate Blue4 #342D7E Slate Blue4
Royal Blue #2B60DE Royal Blue
Royal Blue1 #306EFF Royal Blue1
Royal Blue2 #2B65EC Royal Blue2
Royal Blue3 #2554C7 Royal Blue3
Deep Sky Blue #3BB9FF Deep Sky Blue
Deep Sky Blue2 #38ACEC Deep Sky Blue2
Slate Blue #3574EC7 Slate Blue
Deep Sky Blue3 #3090C7 Deep Sky Blue3
Deep Sky Blue4 #25587E Deep Sky Blue4
Dodger Blue #1589FF Dodger Blue
Dodger Blue2 #157DEC Dodger Blue2
Dodger Blue3 #1569C7 Dodger Blue3
Dodger Blue4 #153E7E Dodger Blue4
Steel Blue4 #2B547E Steel Blue4
Steel Blue #4863A0 Steel Blue
Slate Blue2 #6960EC Slate Blue2
Violet #8D38C9 Violet
Medium Purple3 #7A5DC7 Medium Purple3
Medium Purple #8467D7 Medium Purple
Medium Purple2 #9172EC Medium Purple2
Medium Purple1 #9E7BFF Medium Purple1
Light Steel Blue #728FCE Light Steel Blue
Steel Blue3 #488AC7 Steel Blue3
Steel Blue2 #56A5EC Steel Blue2
Steel Blue1 #5CB3FF Steel Blue1
Sky Blue3 #659EC7 Sky Blue3
Sky Blue4 #41627E Sky Blue4
Slate Blue #737CA1 Slate Blue
Slate Blue #737CA1 Slate Blue
Slate Gray3 #98AFC7 Slate Gray3
Violet Red #F6358A Violet Red
Violet Red1 #F6358A Violet Red1
Violet Red2 #E4317F Violet Red2
Deep Pink #F52887 Deep Pink
Deep Pink2 #E4287C Deep Pink2
Deep Pink3 #C12267 Deep Pink3
Deep Pink4 #7D053F Deep Pink4
Medium Violet Red #CA226B Medium Violet Red
Violet Red3 #C12869 Violet Red3
Firebrick #800517 Firebrick
Violet Red4 #7D0541 Violet Red4
Maroon4 #7D0552 Maroon4
Maroon #810541 Maroon
Maroon3 #C12283 Maroon3
Maroon2 #E3319D Maroon2
Maroon1 #F535AA Maroon1
Magenta #FF00FF Magenta
Magenta1 #F433FF Magenta1
Magenta2 #E238EC Magenta2
Magenta3 #C031C7 Magenta3
Medium Orchid #B048B5 Medium Orchid
Medium Orchid1 #D462FF Medium Orchid1
Medium Orchid2 #C45AEC Medium Orchid2
Medium Orchid3 #A74AC7 Medium Orchid3
Medium Orchid4 #6A287E Medium Orchid4
Purple #8E35EF Purple
Purple1 #893BFF Purple1
Purple2 #7F38EC Purple2
Purple3 #6C2DC7 Purple3
Purple4 #461B7E Purple4
Dark Orchid4 #571B7e Dark Orchid4
Dark Orchid #7D1B7E Dark Orchid
Dark Violet #842DCE Dark Violet
Dark Orchid3 #8B31C7 Dark Orchid3
Dark Orchid2 #A23BEC Dark Orchid2
Dark Orchid1 #B041FF Dark Orchid1
Plum4 #7E587E Plum4
Pale Violet Red #D16587 Pale Violet Red
Pale Violet Red1 #F778A1 Pale Violet Red1
Pale Violet Red2 #E56E94 Pale Violet Red2
Pale Violet Red3 #C25A7C Pale Violet Red3
Pale Violet Red4 #7E354D Pale Violet Red4
Plum #B93B8F Plum
Plum1 #F9B7FF Plum1
Plum2 #E6A9EC Plum2
Plum3 #C38EC7 Plum3
Thistle #D2B9D3 Thistle
Thistle3 #C6AEC7 Thistle3
Lavendar Blush2 #EBDDE2 Lavendar Blush2
Lavendar Blush3 #C8BBBE Lavendar Blush3
Thistle2 #E9CFEC Thistle2
Thistle1 #FCDFFF Thistle1
Lavendar #E3E4FA Lavendar
Lavendar Blush #FDEEF4 Lavendar Blush
Light Steel Blue1 #C6DEFF Light Steel Blue1
Light Blue #ADDFFF Light Blue
Light Blue1 #BDEDFF Light Blue1
Light Cyan #E0FFFF Light Cyan
Slate Gray1 #C2DFFF Slate Gray1
Slate Gray2 #B4CFEC Slate Gray2
Light Steel Blue2 #B7CEEC Light Steel Blue2
Turquoise1 #52F3FF Turquoise1
Cyan #00FFFF Cyan
Cyan1 #57FEFF Cyan1
Cyan2 #50EBEC Cyan2
Turquoise2 #4EE2EC Turquoise2
Medium Turquoise #48CCCD Medium Turquoise
Turquoise #43C6DB Turquoise
Dark Slate Gray1 #9AFEFF Dark Slate Gray1
Dark Slate Gray2 #8EEBEC Dark slate Gray2
Dark Slate Gray3 #78c7c7 Dark Slate Gray3
Cyan3 #46C7C7 Cyan3
Turquoise3 #43BFC7 Turquoise3
Cadet Blue3 #77BFC7 Cadet Blue3
Pale Turquoise3 #92C7C7 Pale Turquoise3
Light Blue2 #AFDCEC Light Blue2
Dark Turquoise #3B9C9C Dark Turquoise
Cyan4 #307D7E Cyan4
Light Sea Green #3EA99F Light Sea Green
Light Sky Blue #82CAFA Light Sky Blue
Light Sky Blue2 #A0CFEC Light Sky Blue2
Light Sky Blue3 #87AFC7 Light Sky Blue3
Sky Blue #82CAFF Sky Blue
Sky Blue2 #79BAEC Sky Blue2
Light Sky Blue4 #566D7E Light Sky Blue4
Sky Blue #6698FF Sky Blue
Light Slate Blue #736AFF Light Slate Blue
Light Cyan2 #CFECEC Light Cyan2
Light Cyan3 #AFC7C7 Light Cyan3
Light Cyan4 #717D7D Light Cyan4
Light Blue3 #95B9C7 Light Blue3
Light Blue4 #5E767E Light Blue4
Pale Turquoise4 #5E7D7E Pale Turquoise4
Dark Sea Green4 #617C58 Dark Sea Green4
Medium Aquamarine #348781 Medium Aquamarine
Medium Sea Green #306754 Medium Sea Green
Sea Green #4E8975 Sea Green
Dark Green #254117 Dark Green
Sea Green4 #387C44 Sea Green4
Forest Green #4E9258 Forest Green
Medium Forest Green #347235 Medium Forest Green
Spring Green4 #347C2C Spring Green4
Dark Olive Green4 #667C26 Dark Olive Green4
Chartreuse4 #437C17 Chartreuse4
Green4 #347C17 Green4
Medium Spring Green #348017 Medium Spring Green
Spring Green #4AA02C Spring Green
Lime Green #41A317 Lime Green
Spring Green #4AA02C Spring Green
Dark Sea Green #8BB381 Dark Sea Green
Dark Sea Green3 #99C68E Dark Sea Green3
Green3 #4CC417 Green3
Chartreuse3 #6CC417 Chartreuse3
Yellow Green #52D017 Yellow Green
Spring Green3 #4CC552 Spring Green3
Sea Green3 #54C571 Sea Green3
Spring Green2 #57E964 Spring Green2
Spring Green1 #5EFB6E Spring Green1
Sea Green2 #64E986 Sea Green2
Sea Green1 #6AFB92 Sea Green1
Dark Sea Green2 #B5EAAA Dark Sea Green2
Dark Sea Green1 #C3FDB8 Dark Sea Green1
Green #00FF00 Green
Lawn Green #87F717 Lawn Green
Green1 #5FFB17 Green1
Green2 #59E817 Green2
Chartreuse2 #7FE817 Chartreuse2
Chartreuse #8AFB17 Chartreuse
Green Yellow #B1FB17 Green Yellow
Dark Olive Green1 #CCFB5D Dark Olive Green1
Dark Olive Green2 #BCE954 Dark Olive Green2
Dark Olive Green3 #A0C544 Dark Olive Green3
Yellow #FFFF00 Yellow
Yellow1 #FFFC17 Yellow1
Khaki1 #FFF380 Khaki1
Khaki2 #EDE275 Khaki2
Goldenrod #EDDA74 Goldenrod
Gold2 #EAC117 Gold2
Gold1 #FDD017 Gold1
Goldenrod1 #FBB917 Goldenrod1
Goldenrod2 #E9AB17 Goldenrod2
Gold #D4A017 Gold
Gold3 #C7A317 Gold3
Goldenrod3 #C68E17 Goldenrod3
Dark Goldenrod #AF7817 Dark Goldenrod
Khaki #ADA96E Khaki
Khaki3 #C9BE62 Khaki3
Khaki4 #827839 Khaki4
Dark Goldenrod1 #FBB117 Dark Goldenrod1
Dark Goldenrod2 #E8A317 Dark Goldenrod2
Dark Goldenrod3 #C58917 Dark Goldenrod3
Sienna1 #F87431 Sienna1
Sienna2 #E66C2C Sienna2
Dark Orange #F88017 Dark Orange
Dark Orange1 #F87217 Dark Orange1
Dark Orange2 #E56717 Dark Orange2
Dark Orange3 #C35617 Dark Orange3
Sienna3 #C35817 Sienna3
Sienna #8A4117 Sienna
Sienna4 #7E3517 Sienna4
Indian Red4 #7E2217 Indian Red4
Dark Orange3 #7E3117 Dark Orange3
Salmon4 #7E3817 Salmon4
Dark Goldenrod4 #7F5217 Dark Goldenrod4
Gold4 #806517 Gold4
Goldenrod4 #805817 Goldenrod4
Light Salmon4 #7F462C Light Salmon4
Chocolate #C85A17 Chocolate
Coral3 #C34A2C Coral3
Coral2 #E55B3C Coral2
Coral #F76541 Coral
Dark Salmon #E18B6B Dark Salmon
Salmon1 #F88158 Pale Turquoise4
Salmon2 #E67451 Salmon2
Salmon3 #C36241 Salmon3
Light Salmon3 #C47451 Light Salmon3
Light Salmon2 #E78A61 Light Salmon2
Light Salmon #F9966B Light Salmon
Sandy Brown #EE9A4D Sandy Brown
Hot Pink #F660AB Hot Pink
Hot Pink1 #F665AB Hot Pink1
Hot Pink2 #E45E9D Hot Pink2
Hot Pink3 #C25283 Hot Pink3
Hot Pink4 #7D2252 Hot Pink4
Light Coral #E77471 Light Coral
Indian Red1 #F75D59 Indian Red1
Indian Red2 #E55451 Indian Red2
Indian Red3 #C24641 Indian Red3
Red #FF0000 Red
Red1 #F62217 Red1
Red2 #E41B17 Red2
Firebrick1 #F62817 Firebrick1
Firebrick2 #E42217 Firebrick2
Firebrick3 #C11B17 Firebrick3
Pink #FAAFBE Pink
Rosy Brown1 #FBBBB9 Rosy Brown1
Rosy Brown2 #E8ADAA Rosy Brown2
Pink2 #E7A1B0 Pink2
Light Pink #FAAFBA Light Pink
Light Pink1 #F9A7B0 Light Pink1
Light Pink2 #E799A3 Light Pink2
Pink3 #C48793 Pink3
Rosy Brown3 #C5908E Rosy Brown3
Rosy Brown #B38481 Rosy Brown
Light Pink3 #C48189 Light Pink3
Rosy Brown4 #7F5A58 Rosy Brown4
Light Pink4 #7F4E52 Light Pink4
Pink4 #7F525D Pink4
Lavendar Blush4 #817679 Lavendar Blush4
Light Goldenrod4 #817339 Light Goldenrod4
Lemon Chiffon4 #827B60 Lemon Chiffon4
Lemon Chiffon3 #C9C299 Lemon Chiffon3
Light Goldenrod3 #C8B560 Light Goldenrod3
Light Golden2 #ECD672 Light Golden2
Light Goldenrod #ECD872 Light Goldenrod
Light Goldenrod1 #FFE87C Light Goldenrod1
Lemon Chiffon2 #ECE5B6 Lemon Chiffon2
Lemon Chiffon #FFF8C6 Lemon Chiffon
Light Goldenrod Yellow #FAF8CC Light Goldenrod Yellow

Hope these are of some value to all those whom use the codes…

NOTES:

  • this is the HTML attributes: <font color=”#?????”>

  • for resizing of fonts: <font size=”4″> or you can input any # of size, whatever you want…

  • for changing the type of fonts: <font face=”monotype corsiva”>

  • We can also use this attributes @ the same time: <font color=”#?????” size=”4″ face=”monotype corsiva”>

Credits : Bugs (afterinfo) and ericksondc

28 comments March 19th, 2008

Base Themes and their CSS Codes

One key element in making your Customized Theme is to know which Base theme to use. Some designers start a theme by copying the CSS of the Base Theme and start tweaking from there. This post will show you the Base Themes and their corresponding CSS Codes. Just enough to give you a start!

clean 173x173 Base Themes and their CSS Codes
Clean
default 173x173 Base Themes and their CSS Codes
Andros
classic 173x173 Base Themes and their CSS Codes
Classic
oasis 173x173 Base Themes and their CSS Codes
Oasis
newspaper 173x173 Base Themes and their CSS Codes
Newspaper
blueslate 173x173 Base Themes and their CSS Codes
Blue Slate
blocks 173x173 Base Themes and their CSS Codes
Blocks
basecamp 173x173 Base Themes and their CSS Codes
Base Camp
skyline 173x173 Base Themes and their CSS Codes
Skyline
mykonos 173x173 Base Themes and their CSS Codes
Mykonos
melon 173x173 Base Themes and their CSS Codes
Melon
sand 173x173 Base Themes and their CSS Codes
Sandskrit
petals 173x173 Base Themes and their CSS Codes
Petals
blacklily 173x173 Base Themes and their CSS Codes
Black Lily
retro 173x173 Base Themes and their CSS Codes
Retro
outburst 173x173 Base Themes and their CSS Codes
Outburst
avlack 173x173 Base Themes and their CSS Codes
Avlack
redfrog 173x173 Base Themes and their CSS Codes
Red Frog
shadowbox 173x173 Base Themes and their CSS Codes
Shadow Box
whiteout 173x173 Base Themes and their CSS Codes
Whiteout
japanese 173x173 Base Themes and their CSS Codes
Japanese Minimalist
livelovelaugh 173x173 Base Themes and their CSS Codes
Live Love Laugh
mod 173x173 Base Themes and their CSS Codes
MOD
bacchus 173x173 Base Themes and their CSS Codes
Bacchus
dancewithme 173x173 Base Themes and their CSS Codes
Dance with Me
bloodyromance 173x173 Base Themes and their CSS Codes
Bloody Romance

31 comments March 18th, 2008

Your Page and CSS Code

Okay, you want to tweak your Multiply Page. But you know less about CSS Codes. This is a brief layout or like an Anatomy of your Page with its corresponding CSS strings.

We have named the parts of your Multiply Page and it’s corresponding code in CSS. Some parts may not be named due to the available of space. If you have questions, just leave us a comment.

Click on The Image to Zoom it!
pageandcss thumb Your Page and CSS Code

148 comments March 15th, 2008

FavIcon: Icon beside your Site’s Name

favicon0.thumbnail FavIcon: Icon beside your Sites NameDid you ever wonder why other pages have Customized Icon beside their Site’s Name?

This is called the FavIcon. And this tutorial will help you have your own in your Multiply Page!

A favicon (short for ‘favorites icon’), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. Often, the Favicon reflects the look and feel of the web site.

Putting a FavIcon on your Multiply Page is a challenge since Multiply prohibits the use of Javascript. But I will try to make it as easy as possible for you to have your own.

Now let’s begin:

    1. You need to have your own favicon image. You can choose whatever image you like and scale it to a 16×16 dimension although other sizes works too. You may use jpeg/jpg, gif, png files.
    But if you want to be lazy like me and want to have an animated Favicon, go to this website: http://www.htmlkit.com/services/favicon/ and upload your Image. Follow the simple steps below.

    Browse > Generate FavIcon > Download FavIcon:

    favicon FavIcon: Icon beside your Sites Name

    You will be downloading a Zip file. Open the Zip File and look for the GIF File Type, highlight it and click Extract. Or you can right click on it then Extract like below:
    favicon1 FavIcon: Icon beside your Sites Name

    Extract the file in the location that you can remember or you have easy access. Then go to the next step.
    2. Upload the FavIcon in any Image Hosting website of your choice (Photobucket, Imageshack, et al). I would suggest to simply upload it in your Multiply.
    3. Copy the URL of your image and paste it on your Notepad so we can edit it.
    4. On the http:// part of your Image URL, replace the colon- this symbol : with %3A so instead of http://urlocation it becomes http%3A//urlocation.
    5. Below inside the TextBox is the actual code to Post your Favicon. Copy and Paste it in your Notepad.
    6. On your notepad, copy the IMAGE URL that you have edited. Then, look for this string on the actual code: EDITED_IMAGE_URL. Replace that string with your EDITED URL. So, it then becomes:
    7. Copy the CODE and Paste it in your Site’s Title. (Customize My Site > Edit Site Title) Hit on Save. If you can’t see it, Refresh your page.

NOTE: Once the code is saved on the Site Title, you will no longer see the same code again. If you want to edit your Site Title, you will have to paste the codes again. So, it is best to save the Code that you have in your Notepad for future use.

If you have any questions or suggestions on this tutorial, feel free to drop me a comment below.

38 comments March 14th, 2008

Previous Posts


Calendar

February 2012
S M T W T F S
« Jan    
 1234
567891011
12131415161718
19202122232425
26272829  

Posts by Month

Posts by Category