MIISCEA ► FOUR

Feb 04, 2010 17:30

Any Plurk users? I finally learned Plurk's css few months ago and I've always wanted to post layouts whenever I can. I'm still learning (I don't think I want to ever go through their css' again) so there might be things that I haven't touched yet.



plurk: o3

PREVIEW



HOW TO USE THE LAYOUT

1.

Go to your profile page. At the top of the whole page, there should be a "edit" link. Click please.

2.

Click on "Customize profile" and scroll down a little to see a huge textarea. This is where you'll be putting in the stylesheet (below)!

/* -----------------------------------------------------------------
Plurk layout by [plurk.com/orica], visit [triclementia.livejournal.com] for more!
----------------------------------------------------------------- */
/* USE_DARK_ICONS */

body, html {
color: #888;
background: #eee url(http://imgboot.com/images/Miiscea/orica4.jpg);
}

.plurk a.ex_link, .plurk a.ex_link:visited {
color: #c86e89;
}

.plurk a.ex_link:hover {
color: #ccc;
text-decoration: none;
}

/* ----------------------------------------------
TOPBAR NAVIGATION
/* ------------------------------------------- */

#page_title {
color: #777;
padding-top: 3px;
font: 11px courier new;
}

#top_bar a, #top_bar a:visited {
color: #c86e89 !important;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
}

#top_bar a:hover {
color: #ccc !important;
}

#top_bar .on img {
opacity: .30;
border-bottom: 0px solid #000;
}

#top_login a {
font-weight: normal;
text-decoration: normal;
color: #aaa;
font-size: 9px;
text-transform: uppercase;
}

#top_login a:hover {
color: #ccc;
text-transform: normal;
}

#top_bar .content a:hover {
color: #577cc9;
text-transform: normal;
}

#top_bar .content a#edit_link {
background: #efefef;
padding-bottom: 1px;
margin-left: 1px;
color: #006ebf;
font-size: 9px;
text-transform: uppercase;
}

#top_bar .content a:hover#edit_link {
color: #577cc9;
text-transform: normal;
}

.char_updater, #alert_beacon {
color: #999;
}

/* ----------------------------------------------
FOOTER LINKS
/* ------------------------------------------- */

#footer {
color: #888 !important;
}

#footer a {
color: #c86e89;
border-bottom: 0px;
font-weight: normal;
}

#footer a:hover {
color: #bbb;
border-bottom: 0px;
}

/* ----------------------------------------------
ADDING PLURK: TEXTAREA
/* ------------------------------------------- */

.plurkaction {
color: #666 !important;
background: transparent;
border: 0px solid #ccc;
margin: 0px 10px;
}

#toggle_tab {
color: #c86e89;
}

#toggle_tab li.tt_selected {
color: #444 !important;
background: transparent;
border: 0px;
}

textarea#input_big, textarea#input_permalink, #more_options .auto_ta, #more_options select, .clipboard {
border: 1px solid #c86e89 !important;
background: #f9eff5;
color: #aaa !important;
-moz-border-radius: 10px;
}

.submit_img {
border: none;
opacity: .40;
}

.submit_img:hover {
border: none;
opacity: .20;
cursor: hand;
}

#more_options_link {
border: 0px !important;
background: #eee !important;
color: #e189ad !important;
}

#more_options .on {
border: 0px !important;
background: transparent url(/static/timeline/private-lock.png) no-repeat 4px 3px;
}

#more_options a {
padding: 2px 4px;
}

#more_options #more_options_holder, #top_bar #edit_link:hover, #reply #reply_box, #reply h2 {
color: #666;
background: transparent;
}

#more_options td {
background: none;
}

/* ----------------------------------------------
TIMELINE: ALL PLURKS
/* ------------------------------------------- */

#timeline_holder {
border-top: 1px solid #e0b7e0;
border-bottom: 0px solid #e5d6e5;
opacity: .90;
cursor: default;
background: #ded7d3 url(http://imgboot.com/images/Miiscea/webweaver.gif) repeat;
}

.p_img {
border-right: 1px solid #e0b7e0;
border-bottom: 1px solid #e0b7e0;
border-left: 0px;
border-top: 0px;
padding: 4px;
opacity: .80;
background: #fff;
width: 20px;
height: 20px;
}

.p_img img {
width: 20px;
height: 20px;
}

.plurk {
white-space: nowrap;
position: absolute;
color: #888 !important;
z-index: 1000;
cursor: hand !important;
}

.name {
color: #c86e89;
font: 11px arial;
font-weight: bold;
text-decoration: none;
}

.plurk_cnt {
color: #888 !important;
background: #fff !important;
font: 11px/20px tahoma;
border-right: 1px solid #bbbce2;
border-bottom: 1px solid #bbbce2;
padding: 2px 5px;
}

.dots .inner {
background: #fff;
opacity: .80;
margin-bottom: 5px;
border-right: 1px solid #bbbce2;
border-bottom: 1px solid #bbbce2;
padding: 3px 2px;
}

.plurk_box .plurk_cnt {
background: #fff !important;
border-bottom: 1px solid #eaeaea;
color: #888 !important;
padding: 3px 0px;
}

.response_count {
font: bold 14px arial;
background: transparent;
color: #999 !important;
padding: 10px 6px 4px 4px;
}

#updater {
padding: 0px 5px;
background: #fff;
font: 9px/18px arial;
text-transform: uppercase;
border: 1px solid #ccc;
color: #a56a70;
}

#updater .text {
border: 0;
color: #888;
}

#updater a, #updater a:visited {
color: #a56a70;
}

#updater a:hover {
color: #888;
}

.new .response_count {
color: #fff !important;
}

.plurk_box .caption {
margin: 0px;
background: #f5f5f5;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #a56a70;
text-align: right;
font: 9px/18px arial;
text-transform: uppercase;
}

.bottom_start, .bottom_end {
color: #888;
text-transform: uppercase;
font: bold 10px/20px verdana;
}

#bottom_line, .day_bg .div_inner {
background: url(/static/theme/image/dark-arrowline.gif) no-repeat;
border-top: 1px solid #e0b7e0;
border-bottom: 1px solid #e0b7e0;
}

#bottom_line {
background: #fff;
opacity: .50;
}

.day_bg .div_inner {
opacity: .70;
border-right: 1px solid #e0b7e0;
border-left: 1px solid #e0b7e0;
border-bottom: 0px;
width: 4px;
position: relative;
}

/* ----------------------------------------------
TIMELINE: TABS UNDER THE TIMELINE
/* ------------------------------------------- */

#filter_tab {
font: 16px arial;
color: #a56a70;
padding: 10px;
border: 0px !important;
text-transform: lowercase;
letter-spacing: -1px;
}

#filter_tab a.off_tab {
background: none;
color: #c86e89;
border: 0 !important;
}

#filter_tab a.off_tab:hover {
color: #ccc;
text-decoration: none;
}

#filter_tab a.filter_selected {
border: 0 !important;
color: #fff;
font: 16px arial;
background: #c86e89;
}

/* ----------------------------------------------
DASHBOARD
/* ------------------------------------------- */

.segment-content {
overflow: hidden;
margin: 0px;
padding: 0px;
}

#dashboard_holder {
margin-top: 35px;
width: 905px;
}

#plurk-dashboard {
font: 11px/16px arial;
color: #888 !important;
border: 0px solid #ccc;
background: transparent !important;
}

#plurk-dashboard a {
color: #c86e89;
text-decoration: none;
}

#plurk-dashboard a:hover {
color: #bbb;
text-decoration: none;
}

#plurk-dashboard h2 {
font: normal 28px arial black;
letter-spacing: 5px;
text-transform: uppercase;
background: none;
color: #ccc;
padding: 0px 10px;
}

/* ----------------------------------------------
DASHBOARD: PROFILE + ICON
/* ------------------------------------------- */

#dash-profile {
text-align: right;
margin-top: 5px;
padding: 0px 0px;
}

.dash-segment img.profile-pic {
border: 1px solid #e189ad;
background: #f9eff5;
padding: 9px;
width: 195px;
height: 195px;
}

p#about_me {
background: #f9eff5;
padding: 10px;
width: 193px;
text-align: justify;
border: 1px solid #e189ad;
-moz-border-radius: 0px;
}

#full_name {
font: 16px verdana;
letter-spacing: 5px;
margin-right: -5px;
color: #e189ad;
}

p#relationship_container {
background: #f9eff5;
padding: 10px;
width: 193px;
text-align: justify;
border: 1px solid #e189ad;
}

/* ----------------------------------------------
DASHBOARD: STATS
/* ------------------------------------------- */

#dash-stats {
width: 190px;
text-align: center;
padding: 0px 10px 3px;
font: 11px/16px arial;
background: #f9eff5;
border: 1px solid #e189ad;
}

#karma_bg {
padding: 0 2px 0 2px;
color: #444;
}

#karma_arrow {
position: absolute;
right: 0;
top: 0;
margin-top: -18px;
margin-left: 145px;
opacity: .60;
}

#karma {
color: #c86e89;
font: 21px arial;
}

.karma_hover {
font: 21px arial;
padding-left: 0px;
color: #aaa;
text-transform: uppercase;
}

#dash-stats .link_arrow {
margin-left: 5px;
margin-top: 15px;
font: 9px arial;
text-transform: uppercase;
width: 148px;
}

#dash-stats table td {
color: #c86e89;
}

/* ----------------------------------------------
DASHBOARD: FRIENDS
/* ------------------------------------------- */

#dash-friends {
width: 190px;
padding: 0px 12px 20px;
text-align: center;
background: #f9eff5;
border: 1px solid #e189ad;
}

.friend_holder td {
padding: 5px 5px 5px 0;
}

.friend_holder .user_link {
height: 40px !important;
width: 40px !important;
}

.friend_holder img {
width: 30px;
height: 30px;
padding: 5px;
border: 1px solid #fff;
}

.friend_holder img:hover {
opacity: .70;
background: #c86e89;
}

.show_all_friends {
margin: 17px 0px;
}

#profile_pic {
margin-bottom: 5px;
}

/* ----------------------------------------------
DASHBOARD: FANS
/* ------------------------------------------- */

#dash-fans {
text-align: center;
width: 180px;
padding: 0px 12px 12px;
background: #f9eff5;
border: 1px solid #e189ad;
}

/* ----------------------------------------------
TOOLTIP
/* ------------------------------------------- */

.AmiTT_main {
text-align: left;
background: url(http://statics.plurk.com/df303bb5c1a7867093137d910e127dab.png) no-repeat;
position: absolute;
color: #d8bec4;
width: 209px;
line-height: 1.2;
z-index: 20000;
}

.tooltip_cnt{
padding: 5px 6px 4px;
background: #f9eff5;
border: 1px solid #d8bec4;
color: #999;
overflow: auto;
font: 11px/16px arial;
height: 1%;
}

.tooltip_cnt img {
border: 5px solid #fff;
margin: 0 5px 0 0;
}

.tooltip_cnt a {
color: #c86e89;
}

.tooltip_cnt span img {
border: none;
margin: none;
}

.AmiTT_main b {
color: #c86e89;
font-weight: bold;
}

/* ----------------------------------------------
INVITE + BADGES
/* ------------------------------------------- */

a#dashboard-invite {
opacity: .60;
padding: 10px 10px 0 56px;
height: 35px;
width: 115px;
color: #444406 !important;
text-decoration: none;
font: 9px/13px arial;
text-transform: uppercase;
background: #cad46a;
position: relative;
border: 1px dashed #fff;
}

#sharePlurk {
background: #953e16;
opacity: .50;
position: relative;
margin-right: 0px;
color: #fff;
padding: 4px;
font-size: 9px;
}

#sharePlurk span {
position: relative;
margin-right: 4px;
}

#sharePlurk p {
margin: 4px 0 0 0;
}

#sharePlurk input.clipboard {
width: 100px;
border-color: #743817 #b46642 #b46642 #743817;
}

#sharePlurk div {
padding: 6px 8px 6px 8px;
border: 1px dashed #632a0a;
}

(Right click in the textarea and pick "Select All" and push Ctrl+C.)

When you're done copying everything in the stylesheet, paste everything in the giant textarea in your Profile settings. Save changes!

FREQUENTLY ASKED QUESTIONS

How do I change the timeline background?
#timeline_holder {
border-top: 1px solid #e0b7e0;
border-bottom: 0px solid #e5d6e5;
opacity: .90;
cursor: default;
background: #ded7d3 url(INSERT IMAGE URL HERE) repeat;
}

If you'd like to insert something else, remove "INSERT IMAGE URL HERE" and paste the url to your desired background. Don't forget to change the "#ded7d3" to the right color if you have a non-repeating background.

How do I edit the size of my profile picture?
.dash-segment img.profile-pic {
border: 1px solid #e189ad;
background: #f9eff5;
padding: 9px;
width: 195px;
height: 195px;
}

Find this part in the stylesheet and edit width and height to (for example) "100px" if you're using an lj icon! Normal size is 195px.

Do I need to credit?

As long as you don't remove the credits part in the stylesheet (it will always be on the top of it), you don't need to link back to us. If any of your friends would be interested in the layout, you are more than welcome to let them know you found it here! Regular rules apply, you're free to edit the stylesheet as long as you don't claim you made it and so on.

INSTRUCTIONS FOR USING & RULES. GIVE CREDIT TO TRICLEMENTIA.
COMMENTS, FEEDBACK AND SUCH ARE GREATLY APPRECIATED. ♥

! layouts, # mei: miiscea, ! layouts: plurk

Previous post Next post
Up