[1] Plurk Add-On's Galore

[lina_trinch]

❖ I learned a few things after making Plurk layouts for awhile now, so I thought I'd share some of those little hacks and add-ons. Hopefully you like a few of them. Just add any in here that you like or want into the bottom of your existing layout's code, if you have one. ❖ Click on your name in the top bar > Customize Layouts > scroll down to "Customize your profile even more with CSS" and paste in whatever you code you want. Click Save and Update. ❖ For a lot of these to work properly, you'll probably need the Plurk Jailbreak Chrome extension. ❖ Not everything has an example image. Gonna have to use the power of imagination for those ones. ❖ This was released a month early on ye olde Patreon! If you want early access or exclusive codes (including Plurk layouts), then come check it out!

Contents:

• Remove Friends, Fans, Awards, & Stats
• Only Remove Specific Modules
• Make Module Headers Actual Header
• Make Profile Icon Big
• Add Separator Line Between Days
• Remove Plurk Creature From Timeline
• Stack Names Over Comments
• Add Borders Between Comments
• Make Muted Plurks Transparent
• Remove Muted Plurks Entirely
• Change Timeline Divider Into A Solid Line
• Make Links Italic & Bold
• Add Rainbow Underline to Links

1. Remove Friends, Fans, Awards, & Stats

Code:
#plurk-dashboard { display: flex; flex-direction: column; align-items: center; } #plurk-dashboard .dash-group-left { width: auto; text-align: center; } #plurk-dashboard .dash-group-right { display: none; }

❖ This removes all of those modules in your dashboard, except for the profile and the one where you actually type in your new plurks. It also makes the remaining two stack on top of each other and center on the page, filling in all that extra space. Back to Top

---

2. Only Remove Specific Modules

Code:
/* remove stats */ #plurk-dashboard .dash-segment-stats { display: none; } /* remove awards */ #plurk-dashboard .dash-segment-awards { display: none; } /* remove friends & make fans take up the space */ #plurk-dashboard .dash-segment-friends { display: none; } #plurk-dashboard .dash-segment-fans { width: 100%; } /* remove fans & make friends take up the space */ #plurk-dashboard .dash-segment-fans { display: none; } #plurk-dashboard .dash-segment-friends { width: 100%; }

❖ If you only want to remove one or two of the boxes, this is your code. Just use the ones labelled for what you're needing. If you remove either Friends or Fans (not both), the remaining one will grow to fill up the extra space. Back to Top

---

3. Make Headers Look Like Headers

Code:
#plurk-dashboard h2 { font-size: 28px; font-weight: bold; letter-spacing: 2px; cursor: default; text-transform: lowercase; font-variant: small-caps; }

❖ Instead of just plain old text, this makes them capitalized (sort of), bigger, bolder, and generally looking like a real header. Back to Top

---

4. Make Profile Icon Big

Code:
#plurk-dashboard .dash-segment-profile #dash-profile { height: 100%; text-align: center; } #plurk-dashboard .dash-segment-profile #dash-profile img.profile-pic { width: 180px; height: 180px; position: relative; } #plurk-dashboard .dash-segment-profile #dash-profile #full_name { margin-left: 0; } #plurk-dashboard .dash-segment-profile #dash-profile .profile-info { margin-left: 0; position: inherit; }

❖ This changes the dimensions of your icon in your dashboard to 180x180, rounding off the corners a little bit. Everything else in that box (like your name) falls beneath the icon and centers itself, making it all nice and neat. Back to Top

---

5. Add Separator Line Between Days

Code:
.day_start::before { content: ''; display: block; /* lower/highten this value depending on the height of your timeline */ height: 386px; width: 2px; /* change color here */ background: #fff; } .bottom_start { width: 0; padding: 0; }

❖ Moving away from the dashboard and finally up to the timeline, you can add a line on your Plurk to distinguish between the days. ❖ Pro-tip! If you want dashed or dotted lines, remove the whole "background" bit, change the width to "0" and add in "border: 1px dashed #fff;" or what have you. Back to Top

---

6. Remove Plurk Creature From Timeline

Code:
#dynamic_logo { display: none; }

❖ This is an old-y that I didn't come up with but, yes, get rid of that weird little fella in the corner. Back to Top

---

7. Stack Names Over Comments

Code:
.tr_cnt { display: flex; flex-direction: column; } .td_cnt { padding: 2px 10px 10px; }

❖ Actually looking inside plurks now, we can change the formatting around. Instead of plurk comments in rows (name to the left, comment to the right), we can put them in columns (name on top, comment on bottom). It's very different, but uses up a lot of empty space and makes a lot of things smaller. I just think it looks neat. ❖ And yes, it'll make the width of Plurks smaller, in general. Back to Top

---

8. Add Borders Between Comments

Code:
.list .plurk_cnt { /* change color here */ border-bottom: 1px solid #000 !important; }

❖ Just kind of separate all those comments a little bit, in case you find they're too close together and confusing. Back to Top

---

9. Make Muted Plurks Transparent

Code:
.muted { opacity: 0.1; } .muted:hover { opacity: 0.8; }

❖ Another old-y that I didn't come up with, but a super popular one. When you hover over these muted plurks, they become a little less transparent so that you can interact with them if you wanted. Back to Top

---

10. Remove Muted Plurks Entirely

Code:
.muted { display: none; }

❖ Warning, it's not playing around. There's no finding the pixel with your mouse to find the hidden thingy. This really removes them from your timeline completely. They'll only reappear if you remove this bit of code. Back to Top

---

11. Change Timeline Divider Into a Solid Line

Code:
.bottom-line { height: 18px; margin-bottom: -7px; }

❖ Between your dashboard and your timeline, there's a little row there of times and dates when plurks were posted. This makes them stop looking like little beads on a line and makes it all one big, smooth line. Back to Top

---

12. Make Links Italic & Bold

Code:
a:not(.name):not(.pif-next):not(.pif-back), #plurk-dashboard a { font-style: italic; font-weight: bold; }

❖ This is just something to help differentiate links from the rest of the text on your timeline. Doesn't change the look of names, though. Just regular links. Back to Top

---

13. Add Rainbow Underline to Links w/ Hover Effect

Code:
a:not(.name):not(.pif-next):not(.pif-back), #plurk-dashboard a { background: linear-gradient(90deg, rgba(247, 80, 80, 0.5), rgba(221, 216, 68, 0.5), rgba(94, 231, 76, 0.5), rgba(81, 148, 224, 0.5), rgba(235, 78, 219, 0.5)); background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom; border-radius: 0; padding: 2px 4px; transition: all 2s; } a:not(.name):not(.cbox-img-next):not(.cbox-img-previous):hover, #plurk-dashboard a:hover { border-radius: 0; background-position: 100% 100%; text-decoration: none; }

❖ I heard somewhere that you guys actually like my rainbow obsession, so here's a pinch of that. This just adds a pretty rainbow gradient beneath your links, but when you hover over them, the rainbow will grow to become the link's background. Back to Top

---

❖ If you have any problems with anything, please let me know!

Comments

[eidola]

Hello! I love all of your codes and these add-ons are super handy, but I'm having a little trouble with the rainbow hover effect and I'm wondering if it's something on plurk's end or if it's something I've done wrong.

It works fine on your layout on your plurk, but I can't seem to get it to work myself. My test plurk, for an example of what I mean.

Thank you for all your hard work!

[lina_trinch]

Hello! I'm glad you like my codes and find them useful. ♥ And I can totally help with this! It looks like there's just a conflict in the code.

At the very top of the code, you should see stuff that looks like this, minus the "_lc_" bits. Just remove the two blocks that I've drawn those red lines around, the first and third one. That should fix your problem.

If that doesn't work for you, just let me know!