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
resnipstance: neutral, thoughtful (Default)

[personal profile] resnipstance 2016-02-04 06:53 am (UTC)(link)
A note on the timeline height--

#timeline_holder { height:50vh!important; }

Where "vh" is a % of your screen space, rather than a pixel width. So your plurk layout will always be x% of your screen resolution when you view it on other monitors, rather than a fixed width.
woomy: icon of a squid (Inkredibly cute squid here)

[personal profile] woomy 2016-02-04 07:30 am (UTC)(link)
Using this pastebin that was posted to change the colors of the plurks (posted by ch1ps0h0y on plurk), I messed around with it so that if you're using rounded corners, they continue to have them.

/*-- Response box background --*/
.response_box {
background: #ddd !important;
border-top: 1px solid #000;

/*-- Response box individual comments --*/
.plurk_cnt {
background: #f00;

/*-- Response box lower area --*/
.mini_form, .info_box {
background-color: #0f0;
krmvgivv: (like a brother to a sister)

[personal profile] krmvgivv 2016-02-04 07:43 am (UTC)(link)

from [plurk.com profile] altarianite for individual plurks

.loading img {width:0px;height:0px;}
background:transparent url(http://i614.photobucket.com/albums/tt230/m66660000/plurk/loading/loading1.gif) no-repeat scroll center top !important;
opacity:1 !important; zoom:1;

And for the big fish from [plurk.com profile] thundercalling

#div_loading {filter:alpha(opacity=0); opacity:0.0;}
krmvgivv: (Default)

[personal profile] krmvgivv 2016-02-04 07:56 am (UTC)(link)
Also from [plurk.com profile] jungler to make your profile pic big again

#dash-profile {
position : relative;

#plurk-dashboard .dash-segment-profile #dash-profile img.profile-pic {
width: 195px!important;
height: 195px!important;
position : relative;

#plurk-dashboard .dash-segment-profile #dash-profile {
height: initial!important;

#plurk-dashboard .dash-segment-profile #dash-profile #full_name {
margin: auto;

#plurk-dashboard .dash-segment-profile #dash-profile .profile-info {
position : relative;
margin-left: auto;
margin-top: 2px;

#plurk-dashboard .dash-group-left {
width: 215px;
float : none;

#plurk-dashboard .dash-group-form, #plurk-dashboard .dash-group-right {
width: -moz-calc(100% - 215px);
width: -webkit-calc(100% - 215px);
width: -o-calc(100% - 215px);
width: calc(100% - 215px);
resnipstance: neutral, thoughtful (Default)

[personal profile] resnipstance 2016-02-04 08:47 am (UTC)(link)
Another little fix:

.td_response_count { padding-top:1px }

I noticed that the plurk count number bubble was one pixel off/higher than the top level plurk and it was PISSING ME OFF. So if anyone else is having a similar problem, use that to kick it back in line.
maple_syrup_can: (Default)

[personal profile] maple_syrup_can 2016-02-04 09:34 am (UTC)(link)
I appreciated these ones a lot (from Vector and SecretAscianMan), so I'll record it here before it gets buried in the plurk

To change the colours of the arrows on the sides:

.cmp_arrow_right {color: #ffffff;}
.cmp_arrow_left {color: #ffffff;}
.cmp_back_to_today {background-color: #ffffff;}
.cmp_back_to_today:before {color: #ffffff}

And to change the 'plurk' submit button colour:

.submit_img_color {background: #ffffff;}
Edited (two different things...) 2016-02-04 09:36 (UTC)
napple: (dr; kiricutie)


[personal profile] napple 2016-02-04 09:39 am (UTC)(link)
here's a modified version of the code to change the font from courier to tahoma (or whichever font you choose) in the reply box, in case you're having issues with the font switching back to default once the box expands!

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

napple: (dr; ch-ch-ch-chiaki)


[personal profile] napple 2016-02-04 10:01 am (UTC)(link)
fixed transparency at 70%:

div#dashboard_holder {filter:alpha(opacity=70) !important; opacity:0.7 !important; zoom:1;}

FANCY transparency that starts out at 50%, then fades into 100% on hover:

div#dashboard_holder {filter:alpha(opacity=50) !important; opacity:0.5 !important; zoom:1;
-moz-transition:opacity 0.5s ease-out, height 1.5s ease-out;
-webkit-transition:opacity 0.5s ease-out, height 1.5s ease-out;
-o-transition:opacity 0.5s ease-out, height 1.5s ease-out;}

div#dashboard_holder:hover {filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
-moz-transition:opacity 0.5s ease-in, height 1s ease-in;
-webkit-transition:opacity 0.5s ease-in, height 1s ease-in;
-o-transition:opacity 0.5s ease-in, height 1s ease-in;

(for both of these, increase number to increase opacity, e.g. 80% would be "opacity=80" and "opacity:0.8". ease-in and ease-out values can also be modified!)
paperforest: touhou project (Default)


[personal profile] paperforest 2016-02-04 10:42 am (UTC)(link)
Courtesy of [plurk.com profile] gaignun
/*--Remove day divider bars --*/
.day_bg .div_inner {opacity:0;}

Note that the day dividers only appear on plurk themes where you can choose the dashboard theme and timeline theme, on themes where you can only select the background theme, the day divider bars don't show up to begin with and thus don't need this code.
Edited 2016-02-04 10:45 (UTC)
freesia: (Default)

removing fans/stats/badges boxes

[personal profile] freesia 2016-02-04 11:33 am (UTC)(link)
courtesy of [plurk.com profile] farrons !

to remove "fans" box:

.dash-segment-fans {display : none;}

to remove badges box:

.dash-segment-award {display : none;}

to remove stats box:

.dash-segment-stats {display : none;}
anruik: [Mushishi] Ginko (Default)

[personal profile] anruik 2016-02-04 12:08 pm (UTC)(link)
Tossing this in, but if you want to mess with the color of your karma number, it depends on the amount of karma you have! I actually don't remember all the divisions for the colors, but I thiiink it works something like this:

For 0-49(?) Karma:
.karma_red {color:#fff;}

For 50-75(???) Karma:
.karma_yellow {color:#fff;}

For 75(?)-99.99 Karma:
.karma_green {color:#fff;}

And for above 100 Karma:
.karma_top {
color: #FD9D0B;
text-shadow: 0px 0px 8px #FFDE00;

I am wildly guessing what the number ranges are, so take this with a bit of salt. That said, if you want to, say, make your lower than 100 Karma to glow, you could just do, say:

.karma_green {
text-shadow: 0px 0px 8px #006A8F;
paperforest: touhou project (Default)


[personal profile] paperforest 2016-02-04 12:44 pm (UTC)(link)
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)
elystia: (pic#)

[personal profile] elystia 2016-02-04 02:42 pm (UTC)(link)
If you want to rearrange your dashboard into a crude (VERY CRUDE) approximation of the old plurk configuration like so, I dropped the code over here.

Margins and percentages aren't totally on point yet and the colors/etc would need to be changed to suit individual tastes but IT'S BETTER THAN WHAT I WOKE UP TO
ketsudan: (Default)

[personal profile] ketsudan 2016-02-04 02:43 pm (UTC)(link)
Hello! I have some more code to add as well.

NOTE: I use stylish, because otherwise, these guys refuse to be edited.

these hide the whole thing + don't forget the second part(s) below

#dash-award {display: none;}
#dash-fans {display: none;}
#dash-friends {display: none;}
#dash-stats {display: none;}

.dash-segment.dash-segment-friends {display: none;}
.dash-segment.dash-segment-stats {display: none;}
.dash-segment.dash-segment-fans {display: none;}

the second part here was because there was some leftover white space and things


.dash-stats-karma {display: none;}
Edited 2016-02-04 14:48 (UTC)

[personal profile] doctorsocklemrtyde 2016-02-04 03:20 pm (UTC)(link)
The remove plurk creature code is not working for me. Is there something I need to do other than just copy/paste it as is? That's probably the most annoying thing for me right now.
imahologram: (Default)

[personal profile] imahologram 2016-02-04 04:07 pm (UTC)(link)
Quick question--does anyone know if it's possible to reinstate autoscrolling to the bottom of the plurk when someone replies?
supreme_overlord: (Hmph)

[personal profile] supreme_overlord 2016-02-04 04:27 pm (UTC)(link)
Thought I'd just slide these lil' tweaks here. :3 I've been using them last night and they SEEM to be good. Least they are in Firefox stylish.

I don't like the height of the plurks on the timeline, it's a bit text overload so this narrows em' down until to rollover/click on them with the mouse:

#timeline_cnt .text_holder {
max-height: 1.4em !important;

Other thing here is old code I figured out ages back and somehow is still working o.O And doesn't seem to need the other bit that used to go with it... This changes the width of the plurk chat box, cause I hated the super wide plurks. I have it set pretty close to the size of a moused over plurk... but obviously that can be played with:

#timeline_cnt .plurk_box {
width: 388px !important;


[personal profile] kabocha_kitsune 2016-02-04 05:03 pm (UTC)(link)
This is as a companion to "Round the corners on individual Plurks"; this rounds the corners of the response box/open plurk that drops down below the above.

/* rounded corners on open plurk dropdowns */
._lc_ .info_box, ._lc_ .response_box {
border-radius:9px 9px;

#form_holder {
border-radius:9px 9px;
hisguardian: liger (LOOMS.)


[personal profile] hisguardian 2016-02-04 05:10 pm (UTC)(link)
.browse_button {
display : none;

I know there were codes for making them different colors/near invisible but I never use them anyway, and this removes both of them altogether.
frau_kali: (Default)

Force display names to be one colour + Plurk backgrounds?

[personal profile] frau_kali 2016-02-04 05:14 pm (UTC)(link)
Does anyone know how to do this? I tried (in a pastebin linked above):

/*-- Default username colour --*/
.name {
color: #fff;

but it doesn't work. Changing it to .user-nick: kind of works but only for the folks who already have black/white display names. I want to force them all to be the same colour as the text on the plurks (except bold!) so it'll be easier on the eyes.

Also - Is it possible to change the background colour of plurks (not the responses, but the colour behind them) since I'd like it all be one colour? And can the colour changes on new responses be changed, too, like you can change the colour on new plurks?

Thanks a lot to everyone here for all this cool stuff :)
forcesensitive: (Default)


[personal profile] forcesensitive 2016-02-04 05:32 pm (UTC)(link)
Basically this perma-expands the menu so it forces it to always display the My Plurks/Responded/Private/Liked & Replurked options. I had to refresh after applying to make them vertical.

ul#filter_tab li {
float : left;
opacity: 1;
#filter_tab a {
display : initial;
overflow: initial;
margin-right: 5px;
paperforest: touhou project (Default)


[personal profile] paperforest 2016-02-04 05:40 pm (UTC)(link)
Based on the code used for fancy fade-in and fade out transparency for the dashboard already done above, here how to apply it to plurks on your timeline as well! This however won't apply to the responses, different code will need to be finangled for that.

/*-- Plurk transparency --*/
.plurk_cnt {filter:alpha(opacity=80) !important; opacity:0.8 !important; zoom:1;
-moz-transition:opacity 0.5s ease-out, height 1.5s ease-out;
-webkit-transition:opacity 0.5s ease-out, height 1.5s ease-out;
-o-transition:opacity 0.5s ease-out, height 1.5s ease-out;}

.plurk_cnt:hover {filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
-moz-transition:opacity 0.5s ease-in, height 1s ease-in;
-webkit-transition:opacity 0.5s ease-in, height 1s ease-in;
-o-transition:opacity 0.5s ease-in, height 1s ease-in;

Again, opacity values can be adjusted to your liking, as can ease-in and ease-out to adjust how fast or slow the fade-in is.
Edited 2016-02-04 17:42 (UTC)
laenavesse: (Default)

[personal profile] laenavesse 2016-02-04 06:37 pm (UTC)(link)
Worked on the plurk pop up menu and updater last night FEEL FREE TO ALTER IT or clean it since I really just messed with it from previous custom layout ha ha. Values in here are just the ones that are on my layout so change them to fit. (Including pastebins as extra reference source.)

Plurk Pop Up Menu
Basically anything that's #filter_tab involves the pop up menu. There are probably more items and classes, and probably could mess with just #filter_tab { } to adjust overall elements (but haven't tried). Includes rounded borders and opacity if you want it.

/* MENU UNSELECTED ITEMS (I have mine set as transparent. If you want color, change "background" to "background-color: #HEXCODE;") */
#filter_tab a.off_tab {
background: transparent;
border: none!important;

#filter_tab a.filter_selected {
outline: 0 !important;
background: #ffffff;
color: #000000;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:1px white solid;
filter: alpha(opacity=70) !important;
-moz-opacity: 0.7 !important;
opacity: 0.7 !important;

#filter_tab a.off_tab:hover {
background: #96846a!important;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-right:1px white solid;
border-bottom:1px white solid;
filter: alpha(opacity=70) !important;
-moz-opacity: 0.7 !important;
opacity: 0.7 !important;

The "# New Plurks" and "# New Responses blocks next to the menu. Uh, I didn't quite fully grasp this but I figured out a) what part to at least poke and b) change colors, including on hover. It's kind of weird though so someone else is free to work on this more. Basically the #updater is the id you're looking for to poke. Again, probably have more parts to it and I kind of blindly shot at guessing the hover class based off other parts of the code ha ha ha...

#updater {
border: none;
background: #f7f0e7;
filter: alpha(opacity=70) !important;
-moz-opacity: 0.7 !important;
opacity: 0.7 !important;

#updater .text {color: #241411;}
#updater a {color: #96846a;}

#updater a:hover {background: #96846a!important;
color: #ffffff;
filter: alpha(opacity=70) !important;
-moz-opacity: 0.7 !important;
opacity: 0.7 !important;}

LOW PRIORITY STUFF I know but hopefully it helps those who are curious and anyone seriously looking at the CSS! (Also someone can come in here and clean this up/add things I am totally cool)
brightwing: (Default)

[personal profile] brightwing 2016-02-04 07:26 pm (UTC)(link)
This is a different version of changing the font in the reply box. I find the one listed in the OP may break if the reply goes beyond one line of text. These were made by [plurk.com profile] altarianite

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

And here's the one for the new plurk box.

td.td_cnt textarea, textarea#input_big {font-family: arial;}

EDIT: Just for fun, here is a code to change the colors of individual display names. This changes the color for one person only and you will have to use it for each person whose color you want to change, so enjoy having a rainbow of colors on your timeline.

span a[href="/USERNAME"] {color: #HEXCOLOR !important;}
Edited 2016-02-04 19:28 (UTC)
effingunicorns: four hellebore flowers in a dusty dark blue, two shades of pink, and white (Default)

[personal profile] effingunicorns 2016-02-04 07:33 pm (UTC)(link)
Could you change the formatting of the coding in this post? The forced colors are unreadable on the dark site skins.

Page 1 of 3

<< [1] [2] [3] >>