Edit your Plurk theme - Tutorial
Plurk has a new feature! Customization through CSS! Well of course, not everyone of us are aware of CSS but think of it this way… being able to change the background of your Plurk theme to your favorite image. Making some boxes transparent OR changing the color of your timeline to something you really want!
Thus, I would like to thank Antherion for making this CSS Tutorial for Plurk.
If you already have an account and would want to improve the look and feel of your profile, you first have to get 25 Karma (as of this posting). After getting that amount of Karma, edit your profile settings, then go to Customize Profile.
Scroll down to the bit where it says "Customize your profile even more with CSS."
To those who are unfamiliar with CSS, I suggest you read the basics here: W3Schools CSS Tutorial
For the next couple of content, I’ll show/"copy" Antherion’s discussion on how to modify your plurk profile.
Modifying your Profile Page’s Background and Fonts
You can modify your profile page’s background and fonts by using the body selector, and modifying the background and font (and other font properties) properties.
Here is a sample:
body {
background: #000 url(http://img75.imageshack.us/img75/249/bigbgxy7.jpg) no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fff;
}
With this code, I’ve set my profile’s background to black (#000 [equivalent to #000000]) and implemented a background image from that URL, which I did NOT want to tile. Then, I set the font face to Arial, the size of the text to 11 pixels, and the color of the text to white (#fff).
One important thing to note is that overriding plurk’s set body selector will not override the tiling background that you set before you reached 25 karma.
If you don’t know where you can get images, you can upload some yourself through Imageshack, which I used for my profile.
Modifying that box on the top
The topmost part of your plurk page is a div that uses an id of top_login. So, if you want to modify how that part looks, you use and ID selector and modify the properties:
#top_login {
margin: 0pt;
padding: 2px 10px 0pt 0pt;
background: #333;
}
In this case, I removed the default margins around the top_login box and used padding instead. Then, I gave it a gray background. You can add a background image if you want by following the code in the body selector.
In turn, you can modify the way the links look inside the topmost box:
#top_login a:link,
#top_login a:visited,
#top_login a:active
{
text-decoration: none;
font-weight: bold;
}
#top_login a:hover
{
text-decoration: underline;
}
By default, the links are already bold, but will not display an underline when the mouse is over them. With the code above, the links inside the topmost box would now be bold, and will not have an underline unless your viewer hovers their mouse over the link.
Next, we move down to the next box which is your timeline.
Modifying the plurk timeline box and its contents
This is the box that contains all your plurks and the plurks of your friends. Don’t bother trying to change the background of the little plurk boxes. Plurk implemented an inline style to override any change in the background to white. You can change the other properties though, but let’s start with the timeline box.
The big timeline box that houses all the plurk boxes uses an id of timeline_holder. Again, we will be using an ID selector to modify the properties of that box.
#timeline_holder {
background: url(http://img503.imageshack.us/img503/2158/plurkbggt7.jpg) no-repeat center top;
margin: 0pt;
}
With the code above, I gave the timeline_holder a large background which spans a width of 1280 pixels. I’ll leave it up to you to be creative and implement backgrounds for the plurk container. I modified the margin of the timeline so that there won’t be extra spaces between the box and the other boxes around it.
I indicated that I will be teaching you how to modify the little plurk boxes. We have been using ID selectors mostly since the parts of the page that we were changing are unique. But, as you can see, there are a lot of plurk boxes. Don’t fret since plurk used a single class selector for them boxes — plurk_cnt.
You can change the look and feel as you wish:
.plurk_cnt
{
font-weight: bold;
color: #009; /*dark red color*/
}
There is another part of your plurk timeline that you can change, but it would be for your own eyes only. You have probably seen the box that tells you if there are new plurks, and if there are any responses on the other plurks on your timeline (including how many there are).
That box has an id of updater, and you can modify it as you wish using the different properties. This is what I used:
#updater {
background: #0D004C url(http://img171.imageshack.us/img171/6451/updaterbger6.jpg) repeat-x;
border: 1px solid #000;
color: #fff;
}
#noti_re a, #noti_np a {
color: #fff799;
text-decoration: none;
}
By changing the updater box’s background, I had to change the link’s color accordingly so I can see it. The default link color is black so since I used a dark background, I had to change it to a shade of yellow. The noti_re ID selector is for the part that shows the number of responses, and noti_np is for the part that shows the number of new plurks.
Another part of your plurk timeline would be that divider that indicates the start of a day. In the case of my plurk profile, it’s a vertical box with a gray shade that is quite see-through.
Here’s how I did it:
#timeline_bg .day_start .div_inner {
background: #666;
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha (opacity = 40);
}
There are three lines for opacity to resolve browser compatibility issues.
Modifying the time bar
Below your plurk container is the time bar where the time is displayed. That particular box uses the id, bottom_line. So, we can modify the properties of that bar using the ID selector:
#bottom_line {
background: #000;
color: #fff;
}
Modifying the Dashboard
That box below your plurk container and time bar, which contains your information, stats, friends and fans is called the dashboard. Coding-wise, it uses an id of plurk_dashboard. In order to change its look and feel, we use an ID selector once again:
#plurk-dashboard {
background: #000027; /* dark blue background */
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity = 80);
}
In my sample above, I used a dark blue background for the dashboard. Now, that would render the contents unreadable if the text were black. So, to be safe, we have to use a combination of selectors:
#plurk-dashboard *, #plurk-dashboard a {
color: #a4a4a4;
}
Now, all the text and links will be light gray. But what if I wanted the titles (STATS, FRIENDS, FANS) to be lighter? Then, you’ll have to change the properties of the h2 tag. But, don’t go changing the h2 tag using an h2 tag selector just like that. To be safe, we’ll have to go by the hierarchy.
I took the liberty of going through the hierarchy and finding the right h2 tag:
#plurk-dashboard .dash-segment .segment-content h2 {
color: #efefef;
}
Fixing the Footer
Now, for those who used a non-tiling background for their body tag would notice that the footer is not cooperating and is showing a gap below it. That’s because the footer is using margins. To resolve this, just set the margin to 0 for the below the footer box, and play around with the padding until you’re able to make the blank space disappear:
#footer {
margin: 20px auto 0px auto;
padding-bottom: 20px;
}
This ends the tutorial on making your plurk page look better than the plurk defaults.
If you liked this post, buy me a coffee. (Suggested: 3$ for a Caffè Mocha or 6$ if ever I have a date.)
If you enjoyed this post, make sure you subscribe to my RSS feed!
Comments
4 Responses to “Edit your Plurk theme - Tutorial”
Leave a Reply
Wow! Thank heaps, that is really easy to follow.
Greatly appreciated.
Evangeline.
.plurk_cnt
{
font-weight: bold;
color: #009; /*dark red color*/
}
is not working…. why??
why u use .plurk.. not #plurk… ??
do you know how to change the “reply to” color? not the button, but the name of the person you’re going to reply to. please tell me how if you know. thanks =)