dancinpenguins | 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 {
height:300px;
}

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

.plurk_cnt { opacity: 0.7; }

Remove Plurk Creature on Timeline

#dynamic_logo {
opacity:0;filter:alpha(opacity=0);zoom:1
}

*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;

color: #fff !important;
padding-left: 4px;
padding-right: 6px;
padding-top: 1px;
padding-bottom: 3px;
}

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: #ffffff;}
.plurk_cnt.new5 {background-color: #ffffff;}
.plurk_cnt.new6 {background-color: #ffffff;}

Round Plurk Images

.p_img {
border:0px!important;
}
.p_img img {
border:0px;
border-radius:50%;
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";
}

or:

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

or:

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 Layoutby passengers
Basic Black Layout by wikkidbubbles
By Clegane
By Elystia
By Effingunicorns

Flat | Top-Level Comments Only

Since I figured some people would want this/be curious on how to do this! Plurk hates the @import code that would make this way simpler, so you instead you have to use a slightly more tedious method, though it's still pretty simple.

First, we will be sourcing our fonts from Google Fonts, so go over there and take a gander. After you've chosen a custom font, go to https://fonts.googleapis.com/css?family=[fontname], replacing [fontname] with...well, the name of the font you want to use. For example, I want to use the Lato font, so I will put https://fonts.googleapis.com/css?family=Lato in my address bar.

You should see something like this:

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
}

C/P that code! If there is any other line after the src line (like unicode-range or something) feel free to delete it or the font might not show up properly. I recommend pasting it at the top of your code, for easy reference and to ensure that it will play nicely with the rest of your code.

After you have c/p'ed the @font-face code you can use your new font to change the font on your plurk or elements of it as you would normally! For example:

body { font-family: 'Lato';} will change it so that the default font used for your plurk is the Lato font.

If you're interested in learning the more nitty-gritty bits about using @font-face this post goes into it, including stuff like web browser compatibility.

Edited 2016-02-04 13:38 (UTC)

I've been trying to do this and I've gone so far as to delete all of my styling and just copy-pasted your example code - it's still doing nothing. I'm using a supported browser (Chrome) so I have no idea what gives. I guess the only thing I haven't tried doing is restarting my browser after doing it.

Can you show me your code so I can take a look if there's some weird code muck up somewhere? When I first did this I also fumbled my way through until I got it right orz

Edited 2016-02-05 06:02 (UTC)

A variety of things, but let's start with when I stripped everything out and just used:

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
}

body { font-family: 'Lato';}

Which still didn't work. :(

As it turns out it's not working properly on my end either so I'm probably going to weep into my hands as I try to figure out if my code implementation is just wrong or if Plurk just doesn't like letting people use custom fonts sob

I'm sorry to everyone who was looking forward to having fancy fonts on their plurk orz

SO after some more testing on my and some other plurkers part, we're pretty sure that despite Plurk allowing us to put in @font-face into the code, it just doesn't load custom fonts for rendering.

So no dice, y u do dis plurk.

IN THEORY, one way to get around this would be to use a Stylish stylesheet to override plurk, but it'd basically on work on your end and other users won't be able to see the fancy font.

Went ahead and removed it from the list above for now, then. ♥

Plurk Fixes 2016

USING CUSTOM FONTS

Re: USING CUSTOM FONTS

OP

Re: OP

Re: OP

ADDENDUM

no subject