Clean White

Clean White

Clean White

Install link: http://www.plurk.com/installDesign/3123245-12e90b11a0

Published in: on August 28, 2008 at 6:14 pm  Comments (20)  

Anybody Can Customize!

The number one problem Plurkers face when trying to customize their plurk page is our lack of knowledge in CSS. So here I’ll try to guide an easier way to deal with the css customizing and do things your own way.

First you’ll need a web-authoring software with a WYSIWYG, Dreamweaver for example. And a good text-editor if you have one, but Notepad will do.

Save a plurk page from your browser to your harddrive. Use web-authoring software to open it, and you’ll get a plurk page full with lines and borders of the boxes like the picture to the right.

There you can look for parts that you want to customize. Just click on it. For example you want to customize the plurk box, when you click on it you’d have something like this. Parts in that picture that is circled red is where to look at. Just click on each tag that you see there to get to which is exactly the css tag you need.

Open the css files saved along the plurk page with text-editor. Look for the tag with the Find function to see if it’s really the tag that you need to customize by comparing the color properties, the placement etc. You’d probably stumbled on more than one match, in that case just do the comparison of which match alter the color etc.

After you’re sure it is, just write the new css properties for it on a blank Notepad, then put it on Plurk.

So, the summary:
1. open plurk page with web-authoring software
2. click on part that you want to customize
3. get the tag name from the bottom infobar
4. find it in the css files (most probably timeline_all.css)
5. make sure it’s the correct tag by comparing its properties to what you see on the page
6. write the new properties on blank notepad
7. copy and paste it to Plurk’s css form

Further reference about css syntax, read http://www.w3schools.com/CSS/

And while you’re doing this, you earn yourself a bit knowledge about css :D

Published in: on August 28, 2008 at 11:24 am  Leave a Comment  

Sexy Timeline

#timeline_holder {
background: url(http://i34.tinypic.com/juiedz.jpg) no-repeat left #060501;
border: none;
}

#timeline_holder {
background: url(http://i36.tinypic.com/zxaedi.jpg) no-repeat left white;
border: none;
}

#timeline_holder {
background: url(http://i35.tinypic.com/6gaou0.jpg) no-repeat left #b5a797;
border: none;
}

Published in: on August 26, 2008 at 4:07 pm  Comments (3)  

Changing Day Marker

Okama Time!

In the pic on the right, the usual vertical line that marks the day is replaced by an animated gif of One Piece’s Okama Bon Clay. :P

To change the day marker use the following lines:

.day_bg .div_inner {
background:url(yourpictureURL) no-repeat center bottom;
width: 64px;
border: none;
}

You’d want to have the exact same width with the image you use so it won’t be cropped. By default the background is colorless (transparent).

Animated GIFs can be used.

Transparent .PNGs can also be used but its alpha isn’t universally recognized by browsers although work perfectly on Firefox 3.

The timeline’s height is 386px by default, fyi.

Published in: on August 25, 2008 at 9:49 pm  Leave a Comment  

One Piece

Install link: http://www.plurk.com/installDesign/876465-b4d2586fa7

My favourite manga! It’s just the background and the dashboard part, some text colors are from Plurk’s template. Right now it’s using Bon Clay animated gif as the day mark.
Note: since it’s a fixed image, the dashboard will look bad if you have your About too long.
Below are some alternative for timeline background, make sure to replace the whole #timeline_holder tag.

Pirate King Gol D Roger

#timeline_holder {
background: url(http://i33.tinypic.com/155lx1g.jpg) no-repeat center black;
border:none;
}

Memories

Memories

#timeline_holder {
background: url(http://i36.tinypic.com/2nsyhs7.jpg) no-repeat left #010101;
border: none;
}

Published in: on August 25, 2008 at 11:17 am  Comments (26)  
Tags:

“Secret” Formating

There are some “secret” way to format text you entered in Plurk. “Secret” because it doesn’t seem like they are documented anywhere in Plurk’s website or FAQs.

Anyway, here they are.

  • Creating a link to a user page. Write @ followed by the username without space.
    Example: @satebabi will give you satebabi
    Note: even if the user has changed his/her nickname, using their old/initial nickname will automatically convert the text and link to their new nick. ;-)
  • Creating text with link. Write the url then followed by (Your Text) with a space.
    Example: http://www.youtube.com (Watch Movie) will result Watch Movie
    You can also just write youtube.com and it will come out as youtube.com
    Note: you don’t have to write the http:// part
  • Some text-formating.
    Bold text is done by putting two asterisks at the start and the end of the sentence.
    Example: **bold text** will come out as **bold text**
    Italic text is done by putting single asterisks at the start and the end of the sentence.
    Example: *italic text* will come out as *italic text*
    Underlined text us done by putting two underscores at the start and the end of the sentence.
    Example: __underscored text__ will come out as __underscored text__
    And one more formatting is done by putting ` at the start and the end of the sentence. The result? Try it :-P
    Emoticon codes still work within this formating.
    Note: this formatting won’t work if you put any punctuation marks, emoticon, or spaces in the beginning or the end of the sentence.
    Example: __?invalid__ or __invalid?__ or __(s_dance)dance__ or __ dance__
  • Creating thumbnail of images of youtube video. Just put the url and Plurk will automatically generate the thumbnail with link.

Happy Plurkin!

Published in: on August 24, 2008 at 6:18 pm  Comments (1)  

Chelina Manuhutu

Use this CSS line to use:

#timeline_holder {
background: url(http://i38.tinypic.com/2v1rf3s.jpg) no-repeat left #24030a;
}

Published in: on August 24, 2008 at 1:05 pm  Comments (2)  
Tags:

Final Fantasy VII: Advent Children Backgrounds

Both are 1280 in width, just use the url. Enjoy!

Published in: on August 24, 2008 at 12:38 pm  Comments (9)  
Tags: ,

Making Plurks Nicely Rounded

Wants to make your plurk boxes’ edges to look like this? These are the lines that you can put in your plurk’s CSS customization box :D (for Firefox users only).

The following is used for the upper section, the one that’s visible on your timeline.

.plurk_cnt {
-moz-border-radius: 0px 8px 0px 0px;
}

And this is for the bottom part.

.info_box {
-moz-border-radius: 0px 0px 8px 8px;
}

Each number represents top-left, top-right, bottom-right, and bottom-left. Just experiment with the numbers to get the curve you want. Enjoy! :D

Published in: on August 24, 2008 at 12:29 pm  Comments (1)  

Wall-E

Wall-E

Wall-E

Install link: http://www.plurk.com/installDesign/876465-4e89e359d2

Published in: on August 24, 2008 at 11:46 am  Comments (7)  
Tags: