dancinpenguins: (| lois | :3)
Arden ([personal profile] dancinpenguins) wrote2016-02-04 01:14 am

Plurk Fixes 2016

A compilation of CSS Plurk Fixes
To add any of these fixes:

Go to 'customize profile' on your Plurk
Scroll down to 'Customize your profile even more with CSS'
Paste the fix in the box
Hit save and update!
/* Hint: Placing this slash+asterisk before and asterisk+slash after text in the CSS box allows you to make notes to yourself about what each piece of code does so that you can easily find and tweak later! */

Have a problem you don't see solved here?  If you'd like to make a request, please go to this thread!

Round the corners on individual Plurks
._lc_ .plurk_cnt { border-radius: 9px 9px 9px 9px; -khtml-border-radius: 9px; -webkit-border-radius: 9px; }

*Note:  Add Rounding to drop downs

Make Timeline narrower (Note* : this one is a fixed width)

#timeline_holder {height:500px!important}

Non-Fixed Width Version:

#timeline_holder { height:50vh!important; }

Shrink the size of Plurks upon expanding

.response_box {
Adjust Plurk opacity  (higher for more opaque, lower for more transparent)

.plurk_cnt { opacity: 0.7; }

Remove Plurk Creature on Timeline

#dynamic_logo {

*Note for those using opacity fix

Get rid of Hot Pink on new responses

.new .response_count {
background: #5889a9!important;
border-right:0px solid #006A8F;
border-top: 0px solid #0A84AF;
border-bottom: 0px solid #006A8F;
border-left: 0px solid #0A84AF;

Turn off Post-It Note Glow on new plurks

.plurk_cnt.new1 {background-color: #ffffff;}
.plurk_cnt.new2 {background-color: #ffffff;}
.plurk_cnt.new3 {background-color: #ffffff;}
.plurk_cnt.new4 {background-color: 
.plurk_cnt.new5 {background-color: 
.plurk_cnt.new6 {background-color: 

Round Plurk Images

.p_img {
.p_img img {
border-radius:5px 5px;

Round out Response Count Box

.response_count {border-radius:6px;} -

Change the Font in your "Reply" box for individual Plurks (insert any font you'd like)

textarea#input_small.content {
font-family: "tahoma";


td.td_cnt textarea, textarea#input_small {font-family: tahoma;}


This option

Change the Font in your "New Plurk" box for individual Plurks (insert any font you'd like and change 200% to any lower number to make it smaller)

.input_holder #input_big {
background-color: white;
font-size: 200%;
color: #333 ;
font-family: "tahoma";
overflow-y: auto;
width: 200%;

Remove Gray Lines Between Plurk Replies

._lc_ .plurk_cnt { 
border-right: 0px !important; 
border-bottom: 0px !important;

THANK YOU TO THE PLURK COMMUNITY AT LARGE FOR THESE!  lollobrigida, redlionspride, cupcakepantry, jungler, anruik, exclamationmarks, aviekokyre, warmblankets, noctowlnal, jpegasus in particular for sharing!

Additional links below:

Change the Color of Plurks
Change the Color of Plurks while Maintaining Round Corners
Removing the Creepy Spit-Roast Fish with CSS
Creepy Spit-Roast Fish URL For Ad-Blocking
Make the Profile Pic Big Again 
Line Up the Plurk Count Bubble with Top of Plurk
Change the Colors of the Timeline Arrows & the Plurk Submit Button Color
Dashboard Transparency
Remove Day Divider Bars
Remove Fans/Stats/Badge Boxes
Change the Color of Karma Number
Other Ways to Hide Dash Stuff: Badges/Fans/Stats/Friends/Karma
Plurk Height Fix / Plurk Width Fix
Remove Navigation Arrows on Timeline
Force Usernames to Be One Color
Expand 'All Plurks' Menu Permanently
Make 'All Plurks' Menu Horizontal and On the Right (Like It Used to Be) 
Fancy Plurk Transparency 
Plurk Pop-Up Menu & Updater Code
Change the Color/Opacity of the Dashboard
Change the Color of Links in Plurks
Change the Color of Unread All Plurk/Responded Plurk/etc. Counts in the Hover Menu
Change the Color of the "Liked" Heart/Make Muted Plurks Fade Away Completely/Hide Sync Button
Hide "Mark All As Read"
Make Date/Time Stamps Transparent on Timeline

Offered layouts:
Profile Only Layout
by passengers
Basic Black Layout by wikkidbubbles
By Clegane
By Elystia 
By Effingunicorns
effingunicorns: a dark-haired young man blushing happily and holding up an audio recorder (let's find out!)

another layout

[personal profile] effingunicorns 2016-02-05 03:33 am (UTC)(link)
I'm about as done fixing my own plurk's layout as I'm gonna get (at least for today), so I'm gonna go ahead and offer it up in case anyone's interested in a dark, aquatic theme or just something that has most if not all of the plurk elements put down to be played with.

Preview with default userpic size - code

Preview with big userpic fix - code

I incorporated several of the fixes here, so thanks to [personal profile] dood for the userpic thing, [plurk.com profile] farrons and [personal profile] freesia for hiding the badges, and [personal profile] hypeodermic for helping squash the yellow highlighting!
Edited (I swear I'm done this time) 2016-02-05 04:02 (UTC)
frau_kali: (Default)

[personal profile] frau_kali 2016-02-06 02:28 am (UTC)(link)
Hello there! So that's a nice layout :) I noticed you managed to change the colours of highlighting for new plurk responses and I was wondering which part of the code does that? It's the last thing I need to change on my own layout. Also how did you change the colour of the new plurk text box and the reply box inside plurks?

Here's my code, if that helps at all.

effingunicorns: four hellebore flowers in a dusty dark blue, two shades of pink, and white (Default)

[personal profile] effingunicorns 2016-02-06 03:17 am (UTC)(link)
Thank you! For the highlighted plurk responses, I used

.plurk_cnt.new1, .plurk_cnt.new2, .plurk_cnt.new3, .plurk_cnt.new4, .plurk_cnt.new5, .plurk_cnt.new6, .shade_1, .shade_2, .shade_3, .shade_4, .shade_5, .shade_6 {
background: #001128;

which is basically just a combination of the solution in this post and the solution offered by [personal profile] hypeodermic--neither worked fully for me either, but combined they seem to do the trick more often than not.

The various text entry areas are a combination of a couple of elements. Since I'm using the same color and fonts for both text boxes, first I have this bit, which defines the actual text entry area:

.textarea_holder textarea {
background: #76A1B5;
opacity: .5;
font-family: 'Gill Sans','Futura','Verdana',sans-serif;

Then I have the area immediately around the text fields, which is basically like the margins of the paper when you're editing a Word-style document:

._lc_ .input_holder {
border: #eee 1px solid;
border-color: #000;
border-radius: 8px;
background: #060F2B;

The opacity setting in the first section lets you play with the shade of the text boxes without having to mess with different hex codes, but if you have a specific color in mind you can omit that line or change the value to 1.0 to keep the input_holder color from affecting the textarea color.

If you want the reply boxes to be a different color from the new plurk text box, you can use the following respectively (the latter of which I see is already in your code:

.mini_form .textarea_holder textarea {
background: #xxxxxx;

.input_holder #input_big {
background: #xxxxxx;

Does that answer your questions?
frau_kali: (Default)

[personal profile] frau_kali 2016-02-08 09:23 pm (UTC)(link)
It does indeed, yes! Thanks! I haven't fiddled with changing the text area boxes yet, but I shall. I was most concerned with the highlighting thing making new replies unreadable.

Which, weirdly, wasn't actually fixed with the code you provided up there. So I took the whole code for your layout and just changed the colours to make it look like my current one and, for some odd reason, that fixed the highlighting by changing it to a less bright colour. I have no idea why, sometimes CSS is a mystery to me.
effingunicorns: four hellebore flowers in a dusty dark blue, two shades of pink, and white (Default)

[personal profile] effingunicorns 2016-02-09 12:56 am (UTC)(link)
I'll be honest, I have no idea either. The anti-highlighting code as I have it occasionally fails even now for reasons unknown to me, but I'll be keeping my eyes peeled for an answer.