vigils | Plurk Layout: “Celestia”

Celestia is an extremely rainbow layout for plurk. Essentially a reskin of Galaxias, it features more gradients and sans serif fonts. Plus, a dark mode!

The code

/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDJB9cme.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSds18S0xR41.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZklyds18S0xR41.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu3cOWxw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwkxdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlBdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmBdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmRdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdu3cOWxw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------ Stop plurk from breaking words ----- */

.list .text_holder {word-break: keep-all!important;}

#timeline_holder {  background: url(https://valiantknife.org/dwidth/vigils/celestia.png) top right  /cover;  }

/* ------ hiding ugly things ----- */

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

.showLoading { opacity: 0; }

#plurk_ads a { overflow: hidden;_overflow: none; display: none; }

.ynative, .resp_banner_ads, .cbox_ads, #dash-stats, #plurks_count a, .link_arrow, .cmp_points-arrow, .cmp_karma_up, .cmp_karma_down, div #tw_help, div #sharePlurk, #block_user, .dash-icon, div.adsense, section.adsense, section.adsense h3, div.cbox_adsx, #dashboard-usersearch, #creature, #resp_banner_ads
{ display : none !important;  height: 0 !important;  width: 0 !important;  overflow: hidden;_overflow: none; position: fixed;  top: -9000px; filter: alpha(opacity=0) !important; opacity: 0 !important; zoom:1; }

.loading img {width:0px;height:0px;}

.loading { opacity: 0;  }

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

#top_bar #bar-color { opacity: 0; }

.award_bar {  opacity: 0;  position: absolute;  left: -9999px; }

/* ------ top bar ----- */ 
#top_bar .top-bar-title {
    display: inline-block;
    height: 34px;
    font: 900 1.1em Source Sans Pro, Arial, sans-serif;
    color: #000;
    line-height: 34px;
    margin-top: 4px;
    cursor: pointer;
    padding: 0 10px;
    letter-spacing: .05em;
    border-radius: 5px;
}

#top_bar .bar-icon { color: #f2f6ed; }
	
.bar-color, #top_bar { background: #fff; }

#top_bar #plurk_logo .logo_img {opacity: .6;filter: saturate(.8);-webkit-filter: saturate(.8);-moz-filter: saturate(.8); }

/* ------ profile ----- */

#plurk-dashboard .dash-segment-profile #dash-profile { height: auto;  text-align: left; }

#plurk-dashboard .dash-segment-profile #dash-profile img.profile-pic {   width: 200px;  height: 200px; max-width: 100%; max-height: 100%;  border-radius: 8px; position: static; }

#plurk-dashboard .dash-segment-profile #dash-profile .profile-info { margin: 0 0 1em 0;  display: none; font-style: italic; position: inherit; }

#plurk-dashboard .dash-segment-profile #dash-profile #full_name { font-size: 18px; margin: .5em 0 1em 0; }

#plurk-dashboard .dash-segment-profile #dash-profile #full_name .display_name { font: 900 1.25em Source Sans Pro, Arial, sans-serif;}

#plurk-dashboard .dash-segment-profile #dash-profile #full_name .nick_name {  display: block; font: .7em Source Sans Pro, Arial, sans-serif; opacity:1;  letter-spacing: .05em; text-transform: uppercase;}

#plurk-dashboard .dash-segment #dash-additional-info #about_me a {font: 1em/2 Source Sans Pro, Arial, sans-serif; background: linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%) left bottom no-repeat transparent; background-size: 100% 3px; padding-bottom: 3px; text-decoration: none;}

#plurk-dashboard .dash-segment #dash-additional-info #about_me a:hover {font: 1em/2 Source Sans Pro, Arial, sans-serif; background:linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%)  left bottom no-repeat transparent; background-size: 100%; padding-bottom: 3px; text-decoration: none;}

#plurk-dashboard .dash-segment-profile #dash-additional-info #about_me { margin-bottom: 1em; line-height: 1.8; }

#plurk-dashboard .dash-segment-profile #dash-additional-info { padding: 0; font: 14px/1.8 Source Sans Pro, Arial, sans-serif; max-width:200px;}

/* ------ dashboard ----- */

.html5 #plurker_info h2, #plurk-dashboard h2 { color: #000 !important; display: block; padding: .125em 0; background: #fff; text-transform: uppercase; letter-spacing: .05em; font: 900 2em Source Sans Pro, Arial, serif; margin: 1em 0 0 0; }

#plurk-dashboard .dash-group-left { width: 33%; position: relative; padding-right: 10px;  max-width:  250px; }

#plurk-dashboard .dash-group-form, #plurk-dashboard .dash-group-right {  max-width: 720px; width: 100% }

#plurk-dashboard #dash-friends, #plurk-dashboard #dash-fans { text-align: left;}

#plurk-dashboard #dash-friends-pics, #plurk-dashboard #dash-fans-pics {width: 80%;  margin: 0; padding: 1em 0; }

.friend_man.private_plurk, .friend_man.send_gift, .friend_man.add_friend, .friend_man.add_follow, .friend_man.add-as-fan, .friend_man.unfollow, .friend_man.add_follow, .friend_man.add-as-fan { font: 900 14px Source Sans Pro, Arial, sans-serif;
    background-color: #f2f6ed;
    letter-spacing: .05em;
    text-transform: uppercase; }

.friend_man.private_plurk:hover, .friend_man.send_gift:hover, .friend_man.add_friend:hover, .friend_man.add_follow:hover, .friend_man.add-as-fan:hover, .friend_man.unfollow:hover, .friend_man.add_follow:hover, .friend_man.add-as-fan:hover {  background: linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%); } }

#plurk-dashboard .dash-segment-fans #dash-fans #fan_managment, #plurk-dashboard .dash-segment-friends #dash-friends #friend_managment {  margin-top: .5em; text-align: left; }

#dash-stats { margin-bottom: 2em; }

#plurk-dashboard #dash-stats .dash-stats-karma { text-align: left; }

#plurk-dashboard #dash-stats table th { font: 1em Source Sans Pro, Arial, sans-serif; text-align: left; text-transform: uppercase; letter-spacing: .015em; border-bottom: 1em solid #fff; border-top: 1em solid #fff; opacity: 1; padding: 0 .25em; }

#plurk-dashboard #dash-stats table td { color: #000; vertical-align: middle;  padding: .5em; font-style: italic; }

#plurk-dashboard #dash-stats .dash-stats-karma { margin: 1em 0; }

html, body, .list { background-color: #fff !important; font: 14px/1.8 Source Sans Pro, Arial, sans-serif;
}

#dashboard_holder a,  #footer a,  #top_login a,  #errors a,  .error a,  #top_bar .content,  #top_bar a { border: 0 !important; }

a { color: #000;}

.textarea_holder textarea { font-size: 13px; line-height: 1.8; }

.html5 #dashboard_holder #plurk_responses #reply .responses, .html5 #reply #reply_box, .html5 #dashboard_holder #plurker_info #shareUser { background-color: #fff; border: 0; }

.a_emoticon { color: #000 !important; }

#timeline_cnt .display, #timeline_cnt .toggled { z-index: 9999!important; }

#dashboard_holder a, , #top_login a, #errors a, .error a, #top_bar .content, #top_bar a { color: #000 !important; border: 0 !important; }

.karma_hover { font-style: italic;  font-family: Source Sans Pro, Arial, sans-serif; margin: 0;}

.segment-content { background: rgb(255,255,255); border-radius: 0; color: #000; font: 13px/1.8 Source Sans Pro, Arial, sans-serif; padding: 0; }

.div_bottom { color: #000; margin: 0; font: italic 13px Source Sans Pro, Arial, sans-serif; opacity: 1; }

.name { font-weight: bold; text-decoration: none !important; }

.new .response_count { background: #eda3a8; }

.response_count { background: none; font-weight: normal !important; opacity: .8; color: #fff !important; }

.manager { opacity: .2; }

.manager .mute-on { color: #444; }

#bottom_line {background: #fff; height: 10px;}

.bottom_start { color: #000; background: #fff;}

.cmp_plurk { background: transparent url(http://www.spoony.valiantknife.org/plurk/napoleonce/plurk.png) no-repeat !important; width: 82px; font-size: 1px; height: 38px; margin-right: 10px; }

.cmp_arrow_right, .cmp_arrow_left, .cmp_back_to_today { opacity: 0; -webkit-transition: 1s; -moz-transition: 1s; }

.cmp_arrow_right:hover, .cmp_back_to_today:hover { opacity: 1; }

.popTooltip { background: #f2f6ed; border-color: #f2f6ed; }

#display_options_help, #updater b { font-size: 1em; font-weight: 400; }

tt, code, kbd, samp { font-family: Source Code Pro, monospace; }

.icons_holder .pif-emoticon:after { background: #fff; }

icons_holder li { font-size: 18px !important; width: 18px !important; }

#main_poster .icons_holder .shortcut {  width: 16px; height: 16px; color: #fff!important; }

.timeline-message img { display: none; }

.timeline-message {   text-align: center; font-size: 23px; line-height: 35px; color: #fff;  font: italic 2em Source Sans Pro, Arial, sans-serif;  z-index: 999; }

#filter_tab a,  #updater .item a { color: #000; text-transform: lowercase; border-radius: 3px; }

#updater .item a:hover,  #filter_tab a.filter_selected { background: #f2f6ed; color: #000; }

#footer {  width: 100%; padding: 1em; color: #000; line-height: 1.8; margin-top: 3em;}

#footer a { background: #fff; text-transform: uppercase; font: .9em Source Sans Pro, Arial, sans-serif; letter-spacing: .05em; padding: .25em; color: #000;  }

#location_container{display: none;}

#plurk-dashboard { border: none;}

.more-options { background: #f2f6ed; }

.plurk a.meta, .permaplurk #permanent_body a.meta, body.t #dashboard_holder a.meta { border: 0; cursor: pointer; display: block; margin: 1px 4px 4px 0; overflow: hidden; padding: 2px 4px;  position: relative; color: #000; background: #f2f6ed; border: 1px solid #f2f6ed; font: .9em Source Sans Pro, Arial, sans-serif; }

.browse_button .cmp_arrow_right, .browse_button .cmp_arrow_left { color: #f2f6ed; font-size: 32px; }

.browse_button .cmp_back_to_today { font-size: 12px; line-height: 18px; margin-top: 10px; background: #f2f6ed; color: #666; border-radius: 10px; position: absolute; margin-left: 11px; padding: 0 9px;}

.timeline-bg .block_bg .bottom_start {  bottom: -11px; }

.info_box { background: #f2f6ed; }

.plurk a.ex_link, .permaplurk #permanent_body a.ex_link, body.t #dashboard_holder a.ex_link { color: #000; background: linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%) left bottom no-repeat transparent; background-size: 100% 3px; padding-bottom: 3px; text-decoration: none; }

.plurk a.ex_link:hover, .permaplurk #permanent_body a.ex_link a:hover, body.t #dashboard_holder a.ex_link:hover { color: #000;background: linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%) left bottom no-repeat transparent; background-size: 100%; padding-bottom: 3px; text-decoration: none; }

.favorite_count, .replurk_count, .bookmark_info, .private_info {  background: #f2f6ed; color: #000;  text-transform: uppercase; font: .9em Source Sans Pro, Arial, sans-serif; }

.cmp_back_to_today:before { color: #f2f6ed; }

.p_img img {  border-left: 0; border: 3px solid #fff; height: 26px; width: 26px; border-radius: 3px; }

.p_img { height: 26px !important; width: 26px !important;  margin-right: -4px;}

::-moz-selection { background: #f2f6ed text-shadow: none; }

::selection { background: #f2f6ed;  text-shadow: none; }

Instructions

First, to make this layout work as pictured, you need to install plurk jailbreak. This lets custom CSS apply to more things. It's optional, but recommended.

These are the plurk layout settings I used:

Customizations

It's easy to change the background image.

#timeline_holder { background: url(https://valiantknife.org/dwidth/vigils/celestia.png) top right  /cover;}

I think deleting this line will also let you use your own custom background uploaded through plurk.

The fonts used are Source Sans Pro and Source Code Pro, two great free typefaces. If you'd like to replace them, look for these font stacks: Source Sans Pro, Arial, sans-serif; & Source Code Pro, monospace;. Be sure not to change anything in the section of the code labelled "Fonts" unless you know what you're doing.

Dark Mode

Larger Preview

Don't like ultraviolet sparkle hues? I wanted to make a basic darker skin for those who find black on white not so easy on the eyes.

/* ------ Fonts: do not edit this section unless you know what you're doing ----- */ 
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v9/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDJB9cme.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSds18S0xR41.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------ Stop plurk from breaking words ----- */

.list .text_holder {word-break: keep-all!important;}

#timeline_holder {  background: url(https://valiantknife.org/dwidth/vigils/celestiadark.png) top right  /cover;  }

/* ------ hiding ugly things ----- */

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

.showLoading { opacity: 0; }

#plurk_ads a { overflow: hidden;_overflow: none; display: none; }

.loading img {width:0px;height:0px;}

.loading { opacity: 0;  }

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

#top_bar #bar-color { opacity: 0; }

.award_bar {  opacity: 0;  position: absolute;  left: -9999px; }

/* ------ top bar ----- */ 
#top_bar .top-bar-title {
    display: inline-block;
    height: 34px;
    font: 900 1.1em Source Sans Pro, Arial, sans-serif;
    color: #e1e1e1;
    line-height: 34px;
    margin-top: 4px;
    cursor: pointer;
    padding: 0 10px;
    letter-spacing: .05em;
    border-radius: 5px;
}

#top_bar .bar-icon { color: #a5a5a5; }
	
.bar-color, #top_bar { background: #000; }

#top_bar #plurk_logo .logo_img {opacity: .6;filter: saturate(.8);-webkit-filter: saturate(.8);-moz-filter: saturate(.8); }

/* ------ profile ----- */

#plurk-dashboard .dash-segment-profile #dash-profile { height: auto;  text-align: left; }

#plurk-dashboard .dash-segment-profile #dash-profile img.profile-pic {   width: 200px;  height: 200px; max-width: 100%; max-height: 100%;  border-radius: 8px; position: static; }

#plurk-dashboard .dash-segment-profile #dash-profile .profile-info { margin: 0 0 1em 0;  display: none; font-style: italic; position: inherit; }

#plurk-dashboard .dash-segment-profile #dash-profile #full_name { font-size: 18px; margin: .5em 0 1em 0; }

#plurk-dashboard .dash-segment-profile #dash-profile #full_name .display_name { font: 900 1.25em Source Sans Pro, Arial, sans-serif;}

#plurk-dashboard .dash-segment #dash-additional-info #about_me a {font: 1em/2 Source Sans Pro, Arial, sans-serif; color: #e1e1e1; background: linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%) left bottom no-repeat transparent; background-size: 100% 3px; padding-bottom: 3px; text-decoration: none;}

#plurk-dashboard .dash-segment-profile #dash-additional-info #about_me { margin-bottom: 1em; line-height: 1.8; }

#plurk-dashboard .dash-segment-profile #dash-additional-info { padding: 0; font: 14px/1.8 Source Sans Pro, Arial, sans-serif; max-width:200px;}

/* ------ dashboard ----- */

.html5 #plurker_info h2, #plurk-dashboard h2 { color: #e1e1e1 !important; display: block; padding: .125em 0; background: #121212; text-transform: uppercase; letter-spacing: .05em; font: 900 2em Source Sans Pro, Arial, serif; margin: 1em 0 0 0; }

#plurk-dashboard .dash-group-left { width: 33%; position: relative; padding-right: 10px;  max-width:  250px; }

#plurk-dashboard .dash-group-form, #plurk-dashboard .dash-group-right {  max-width: 720px; width: 100% }

#plurk-dashboard #dash-friends, #plurk-dashboard #dash-fans { text-align: left;}

#plurk-dashboard #dash-friends-pics, #plurk-dashboard #dash-fans-pics {width: 80%;  margin: 0; padding: 1em 0; }

.friend_man.private_plurk, .friend_man.send_gift, .friend_man.add_friend, .friend_man.add_follow, .friend_man.add-as-fan, .friend_man.unfollow, .friend_man.add_follow, .friend_man.add-as-fan { font: 900 14px Source Sans Pro, Arial, sans-serif;
    background-color: #1e1e1e;
    letter-spacing: .05em;
    text-transform: uppercase; }

#plurk-dashboard .dash-segment-fans #dash-fans #fan_managment, #plurk-dashboard .dash-segment-friends #dash-friends #friend_managment {  margin-top: .5em; text-align: left; }

#dash-stats { margin-bottom: 2em; }

#plurk-dashboard #dash-stats .dash-stats-karma { text-align: left; }

#plurk-dashboard #dash-stats table th { font: 1em Source Sans Pro, Arial, sans-serif; text-align: left; text-transform: uppercase; letter-spacing: .015em; border-bottom: 1em solid #121212; border-top: 1em solid #121212; opacity: 1; padding: 0 .25em; }

#plurk-dashboard #dash-stats table td { color: #9e9e9e; vertical-align: middle;  padding: .5em; font-style: italic; }

#plurk-dashboard #dash-stats .dash-stats-karma { margin: 1em 0; }

html, body, .list { background-color: #121212 !important; font: 14px/1.8 Source Sans Pro, Arial, sans-serif;
}

#dashboard_holder a,  #footer a,  #top_login a,  #errors a,  .error a,  #top_bar .content,  #top_bar a { border: 0 !important; }

a { color: #9e9e9e;}

.textarea_holder textarea { font-size: 13px; line-height: 1.8; }

.html5 #dashboard_holder #plurk_responses #reply .responses, .html5 #reply #reply_box, .html5 #dashboard_holder #plurker_info #shareUser { background-color: #121212; border: 0; }

.a_emoticon { color: #9e9e9e !important; }

#timeline_cnt .display, #timeline_cnt .toggled { z-index: 9999!important; }

#dashboard_holder a, , #top_login a, #errors a, .error a, #top_bar .content, #top_bar a { color: #e1e1e1 !important; border: 0 !important; }

.karma_hover { font-style: italic;  font-family: Source Sans Pro, Arial, sans-serif; margin: 0;}

.segment-content { background: #121212; border-radius: 0; color: #9e9e9e!important; font: 13px/1.8 Source Sans Pro, Arial, sans-serif; padding: 0; }

.div_bottom { color: #aaa; margin: 0; font: italic 13px Source Sans Pro, Arial, sans-serif; opacity: 1; }

.name { font-weight: bold; text-decoration: none !important; }

.new .response_count { background: #eda3a8; }

.response_count { background: none; font-weight: normal !important; opacity: .8; color: #fff !important; }

.manager { opacity: .2; }

.manager .mute-on { color: #444; }

#bottom_line {background: #121212; height: 10px;}

.bottom_start { color: #aaa; background: #121212;}

.cmp_plurk { background: transparent url(http://www.spoony.valiantknife.org/plurk/napoleonce/plurk.png) no-repeat !important; width: 82px; font-size: 1px; height: 38px; margin-right: 10px; }

.cmp_arrow_right, .cmp_arrow_left, .cmp_back_to_today { opacity: 0; -webkit-transition: 1s; -moz-transition: 1s; }

.cmp_arrow_right:hover, .cmp_back_to_today:hover { opacity: 1; }

.popTooltip { background: #1e1e1e; border-color: #1e1e1e; }

#display_options_help, #updater b { font-size: 1em; font-weight: 400; }

tt, code, kbd, samp { font-family: Source Code Pro, monospace; }

.icons_holder .pif-emoticon:after { background: #121212; }

icons_holder li { font-size: 18px !important; width: 18px !important; }

#main_poster .icons_holder .shortcut {  width: 16px; height: 16px; color: #fff!important; }

.timeline-message img { display: none; }

.timeline-message {   text-align: center; font-size: 23px; line-height: 35px; color: #fff;  font: italic 2em Source Sans Pro, Arial, sans-serif;  z-index: 999; }

#filter_tab a,  #updater .item a { color: #aaa; text-transform: lowercase; border-radius: 3px;  background: #121212;}

#updater .item a:hover,  #filter_tab a.filter_selected { background: #1e1e1e; color: #aaa; }

#footer {  width: 100%; padding: 1em; color: #aaa; line-height: 1.8; margin-top: 3em;}

#footer a { background: #121212; text-transform: uppercase; font: .9em Source Sans Pro, Arial, sans-serif; letter-spacing: .05em; padding: .25em; color: #aaa;  }

#location_container{display: none;}

#plurk-dashboard { border: none; background: #121212;}

.more-options { background: #1e1e1e; }

.plurk a.meta, .permaplurk #permanent_body a.meta, body.t #dashboard_holder a.meta { border: 0; cursor: pointer; display: block; margin: 1px 4px 4px 0; overflow: hidden; padding: 2px 4px;  position: relative; color: #e1e1e1; background: #1e1e1e; border: 1px solid #1e1e1e; font: .9em Source Sans Pro, Arial, sans-serif; }

.browse_button .cmp_arrow_right, .browse_button .cmp_arrow_left { color: #1e1e1e; font-size: 32px; }

.browse_button .cmp_back_to_today { font-size: 12px; line-height: 18px; margin-top: 10px; background: #1e1e1e; color: #666; border-radius: 10px; position: absolute; margin-left: 11px; padding: 0 9px;}

.timeline-bg .block_bg .bottom_start {  bottom: -11px; }

.info_box { background: #1e1e1e; }

.plurk a.ex_link, .permaplurk #permanent_body a.ex_link, body.t #dashboard_holder a.ex_link { color: #e1e1e1; background: linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%) left bottom no-repeat transparent; background-size: 100% 3px; padding-bottom: 3px; text-decoration: none; }

.plurk a.ex_link:hover, .permaplurk #permanent_body a.ex_link a:hover, body.t #dashboard_holder a.ex_link:hover { color: #e1e1e1; background: linear-gradient(90deg, rgba(56,211,136,.5) 0%, rgba(80,141,238,.5) 27%, rgba(242,141,213,.5) 66%, rgba(249,223,169,.5) 100%) left bottom no-repeat transparent; background-size: 100%; padding-bottom: 3px; text-decoration: none; }

.favorite_count, .replurk_count, .bookmark_info, .private_info {  background: #1e1e1e; color: #000;  text-transform: uppercase; font: .9em Source Sans Pro, Arial, sans-serif; }

.cmp_back_to_today:before { color: #1e1e1e; }

.p_img img {  border-left: 0; border: 3px solid #121212; height: 26px; width: 26px; border-radius: 3px; }

.p_img { height: 26px !important; width: 26px !important;  margin-right: -4px;}

.plurk_cnt { background: #121212; }
::-moz-selection { background: #1e1e1e text-shadow: none; }

::selection { background: #1e1e1e;  text-shadow: none; }

div .text_holder {
    color: #a4a4a4;
}

.plurk_box .mini_form {
    padding: 4px 3px 2px;
    border-top: #1e1e1e 1px solid;
    background-color: #121212;
    font-weight: normal;
}

.response_box {
    background: #121212;
    border-top: #1e1e1e 1px solid;
}

.show-response-manager .plurk_cnt {
background:  #1e1e1e !important; }

plurk a.pictureservices, .permaplurk #permanent_body a.pictureservices, body.t #dashboard_holder a.pictureservices { border-color:  #1e1e1e; }

.pop-view {  position: absolute;
    border: #1e1e1e 1px solid;
    border-radius: 5px;
    background: #121212;
    color: #a4a4a4; }

.pop-menu li a { color: #9e9e9e; }

.pop-menu li a:hover {  background: #1e1e1e; }

.pop-menu li.sep { background: #1e1e1e; }

#noti-list .header {
    background: #1e1e1e;
    font-size: 12px;
    color: #e1e1e1;
    border-bottom: #1e1e1e 1px solid; }

#noti-list li {   color: #666;
    background: #121212;
    border-bottom: #1e1e1e 1px solid; 
}

#noti-list li:hover { background: #1e1e1e; }

#noti-list li a {  color: #9e9e9e; }

.textarea_holder textarea {
    background: #1e1e1e;
    color: #e1e1e1 !important; }

.input_holder {
    border: #1e1e1e 1px solid;
    background: #1e1e1e; }

.response-status .response-only-owner {
    background: #1e1e1e;
    color: #9e9e9e; }

.response-status .response-only-owner:hover {
    background: #1e1e1e ;
    color: #e1e1e1 !; }

.response-manager {
    background: #121212;
    border: #1e1e1e 1px solid; }

.divplurk {  background: #121212; }

.show-response-manager { background: #1e1e1e!important; }

Flat | Top-Level Comments Only

Hey! I'm so sorry to bother you, but I've tried to fix it on my own and I cannot figure it out. So my old layout had the timeline controls:

And I can't for the life of me figure out how to bring it back with this layout. I've adjusted various different things but they seem to make no difference. Could you help me? Absolutely no rush with responding. BTW, this layout is beautiful ♥

Plurk Layout: “Celestia”

The code

Instructions

Customizations

Dark Mode

no subject