List may not be as complete as it should be.
Have fun making your own theme.
########################################################################################
# KIT START #
########################################################################################
CONTENT
|||
||\-- PLURK CSS TAGS
|| \- MAIN BODY PART
|| \- TOP BAR SECTION
|| \- TIMELINE SECTION
|| \- DASHBOARD SECTION
|| \- FOOTER
|| \- PLURK PAGE
||
|\--- TIPS AND TUTS
| \- GETTING RID CERTAIN ELEMENTS
| \- CUSTOMIZING DEFAULT LAYOUT IMAGES
| \- CUSTOMIZING DEFAULT LAYOUT IMAGES UPDATED
|
\---- REFERENCES
\- PLURK LAYOUT IMAGES
########################################################################################
PLURK CSS TAGS
########################################################################################
========================================================================================
= MAIN BODY PART =======================================================================
========================================================================================
Only the body tag is needed for this part, where you can change background color, use
background image, define the overall font face.
______________________
PREDEFINED IN MAIN.CSS
body,html = change background color, images, font face
========================================================================================
= TOP BAR SECTION ======================================================================
========================================================================================
This the top part of plurk page, where you have the login link, profile link, page
title, etc.
The top bar is roughly 22 pixels in height (including paddings etc)
______________________
PREDEFINED IN MAIN.CSS
#top_login = the overall bar at the top, usually better left as is
_________________________
PREDEFINED IN TOP_BAR.CSS
#top_bar = box containing My Profile, My Friends, Alerts
.content = to customize the icons
*)use background image to customize icons after getting
rid of the icon image with opacity tag.
.on img = changes on icons if mouseover-ed
*)by default it gives border below the icon.
#edit_link = 'edit' link after My Profile
.count = number of alerts
#page_title = self explanatory
#interesting_plurkers = used to have a "NEW" icon as background, now it's left blank
______________
NOT PREDEFINED
img#icon_home = icon for My Profile
img#icon_friends = icon for My Friends
img#icon_notifications = icon for Alerts
a#interesting_plurkers = Interesting Plurkers link
a#account = My Account link
a#login_link = SignIn/Out link
========================================================================================
= TIMELINE SECTION =====================================================================
========================================================================================
The main part of Plurk, containing all the Plurk posts and usually the main graphical
eyecatcher on most themes.
______________________
PREDEFINED IN MAIN.CSS
#timeline_holder = the main area for timeline section
*)you can add background here, or let it transparent to make the
main background visible. by default it is colored according to
the plurk theme you choose.
*)timeline_holder is roughly 386 pixels in height.
.youtube img = thumbnail for youtube video
.pictureservices img = thumbnail for hotlinked image
______________________________
PREDEFINED IN TIMELINE_ALL.CSS
#dynamic_logo = the Plurk creature on top right
*)to get rid of it use opacity tag.
.day_bg .div_inner = the day marker, by default it's a colored vertical bar with an
upward arrow at its bottom
*)you can use PNG images to achieve nice transparent effect.
*)set width to be exactly the same as image's width
.p_img = container for avatar for plurk posts
*)by default it's 20 x 20 pixels.
*)can be used for default avatar replacement trick.
.p_img img = the avatar image
*)by default it's 20 x 20 pixels.
*)set the same as .p_img if you plan to change its dimension.
td.td_img = box for avatar container
*)can be used for comical balloon edge trick.
.plurk_cnt = plurk box as seen on timeline before it's clicked
*)also affect the individual responses on the response list.
*)better use light color since some emoticons look ugly on dark
background.
.mini_close = the X close-plurk button
*)can be used for icon replacement trick
.manager = manage your plurk
.action = edit/save
.delete = delete plurk
.cancel = cancel editing
.unmute = toggle mute/un-mute
.plurk_box .caption = box for Recent plurk responses and Plurk your response title
.plurk_box .list = box containing the responses
*)by default it's roughly 150 pixels in height including
paddings and margins.
*)better use the same color as .plurk_cnt.
.plurk_box .plurk_cnt = individual plurk response
*)set bottom border to make border between responses.
.list .loading = what is displayed when loading plurk responses
*)by default it's the fish animation.
*)can be used for loading animation replacement trick.
.list .empty = what is displayed when there's no responses.
*)by default it's only text saying
"No responses - be the first :)".
*)you can add background pictures here but you'll need to adjust
the height accordingly.
.plurk_box .mini_form = box for the response form
#form_holder
.qual_holder = contain your nickname for the response form
.dd_img = icon for qualifier drop down menu
*)default 12 x 12 pixels.
*)should be able to be customized, never try it.
textarea#input_small = input form for response
.smily_holder img = icon for emoticon selecter drop down menu
*)default 45 x 20 pixels.
*)should be able to be customized, never try it.
.mini_form
.char_updater = text indicating how many character you have left for your
response
.info_box = bottom box containing names for private plurk and the link to
the plurk page
.dots .inner = box containing 3 dots besides the plurk box
.response_count = number of responses for a plurk
.new .response_count = number with new response alert
#div_loading = loading picture when you switched between plurk filters
*)can be customized.
div.loading_div = loading picture when you scroll your timeline
*)can be customized.
div.browse_button = button for NEXT, PREVIOUS, and BACK TO START
*)customization for this part is quite long & maybe complicated.
#updater = container for update alerts in bottom left of timeline
#mini_search = search form
.i_text = textarea for search
.i_button = search button
#bottom_line = the bottom timebar
.bottom_start
.bottom_end
.bottom_start = time texts on #bottom_line
#time_show span = a time indicator when you mouseover-ed or selected a plurk
above the #bottom_line
.evening
.night
.day
.morning = image used as #time_show span background
*)for template see PLURK LAYOUT IMAGES reference at the end of
this file, look for time-container.png, it should explains
best of what you should do if you want to customize it.
#filter_tab
a.filter_selected = selected filter (initially ALL PLURK)
.off_tab = off filters
.tooltip_cnt = tooltips
========================================================================================
= DASHBOARD SECTION ====================================================================
========================================================================================
Contains the Plurk form, options, profiles, stats, friends, and fans.
______________________
PREDEFINED IN MAIN.CSS
#dashboard_holder = container of all mentioned above
______________________________
PREDEFINED IN TIMELINE_ALL.CSS
#plurk_form = container for plurk form, beginning with the time until the
plurk options.
.time = the "it's xx:xx and" text
.qual_holder = your nickname
.char_updater = number of characters left for plurking
.q_is
.q_says
.q_feels
.q_needs
.q_hopes
.q_thinks
.q_wants
.q_wishes
.q_has
.q_loves
.q_hates
.q_asks
.q_will
.q_was
.q_had
.q_likes
.q_shares
.q_gives
.q_wonders = qualifier box colors
textarea#input_big = textarea for plurking
#emoticon_selecter = container for emoticons selections
*)default property wasn't tidy so use 408px width.
*)also belongs to timeline_holder section for responses.
.submit_holder = submit button holder
#more_options
#plurk_to = text indicating who will be able to read your plurk
.on
#more_options_holder = when you click on more options toggle
*)i prefer to have the background transparent.
#more_options_link = box containing plurk options link with lock picture
.dash-segment
.segment-content = divided columns for profile, stats, friends, and fans
#dash-profile = box containing avatar and A/S/L info
*)better left as is
img.profile-pic = your profile pic
#dash-additional-info = box below #dash-profile, containing your short bio and
relationship status
#dash-stats = box for stats
table td = for numerical stats table
.karma_hover = karma text
.karma_red
.karma_orange
.karma_yellow
.karma_blue
.karma_green = karma colors
a.link_arrow = how to get more karma
.award_bar = container for plurk badges
*)only exists after you have at least one badge
#dash-friends = box for friends
.friend_holder = container for friends/fans pics
#dash-friends-pics
.user_link = friends avatars
*)default 20 x 20 pixels
#show_all_friends = show all friends/fans link
#dashboard-invite = button for inviting friends
#dash-fans = box for fans
#dash-fans-pics
.user_link = fans avatars
*)default 20 x 20 pixels
#sharePlurk = box for share you plurk
#invite_url = textarea for share your plurk url
a#mobile-gfx
a#widget-gfx
a#twitter-gfx = mobile, widget, and twitter button (displayed randomly)
___________________________
PREDEFINED IN DASHBOARD.CSS
#plurk-dashboard = container for profile boxes
h2 = captions for Stats, Friends, and Fans
______________
NOT PREDEFINED
h1#full_name = text for your name
#span_years = text for your age
#m_of_f = text for your sex
#location = text for your location
p#about_me = self explanatory
p#relationship_container
= self explanatory
========================================================================================
= FOOTER ===============================================================================
========================================================================================
Bottom of the page containing language selector, copyright and links. Most custom themes
leave this section alone.
______________________
PREDEFINED IN MAIN.CSS
#footer = box containing language selector, copyright, links
#languge_selector = language selector dropdown menu
========================================================================================
= PLURK PAGE ===========================================================================
========================================================================================
This is the individual plurk page accessed by clicking the PLURK PAGE link at the bottom
of plurk box (located in #info_box). This page uses background and timeline's background
from the main page's CSS so you can't make it look different.
______________________
PREDEFINED IN MAIN.CSS
#logo = Plurk logo and creature
_________________________________
PREDEFINED IN PERMANENT_PLURK.CSS
.bigplurk = container for plurk topic post
h1.content = balloon box
.user-nick = nickname
.plurk_content = plurk content text
.time = post time
.user img = avatar of plurk poster
#plurk_responses = container of responses
ul.responses li img.avatar
= avatars
*)default 45 x 45 pixels
ul.responses .message
= response content
ul.responses li:hover span.time
= response time
.r_qualifier = qualifier text color
*)default: color:white!important
#next_plurk = link to next plurk
#prev_plurk = link to previous plurk
#reply = reply container
.char_updater = number of characters you have left
#reply_box = box for reply form
h2 = box for Plurk Your Response caption
.dd_img = arrow-down image for dropdown menu
.qual_holder = cell for your nickname
textarea#input_permalink
= textarea for replying
.highlight_owner a = treatment for plurk owner's nickname
*)default:
text-decoration:underline!important
#not_logged_in a = treatment for sign in link if you're not logged in
*)default:
color:white!important;
background-color:#EF144D;
text-decoration:underline!important;
########################################################################################
TIPS AND TUTS
########################################################################################
========================================================================================
= GETTING RID CERTAIN ELEMENTS =========================================================
========================================================================================
Getting rid of certain elements is necessary to customize images like buttons, default
avatars, arrows, those stuffs; or you just plain don't like them. They are not gone, we
just make them invisible. Just put the zero opacity property on any of these tags.
#dynamic_logo = plurk logo on the main page's timeline
#logo = plurk logo on plurk page
img[src='/u_img/default_small.gif']
= small default avatar, used in timeline and friends/fans box
whenever someone doesn't upload his own
img[src='/u_img/default_medium.gif']
= medium default avatar, used in Plurk page whenever someone
doesn't upload his own
img[src='http://static.plurk.com/static/indicator.gif']
= loading image on plurk box
img[src='http://static.plurk.com/static/loading.gif']
= loading image on timeline
img[src='http://static.plurk.com/static/button/plurk.png']
= big Plurk button
img[src='http://static.plurk.com/static/timeline/mini_close.gif']
= X image to close opened plurk
and so on.
========================================================================================
= CUSTOMIZING THE DEFAULT LAYOUT IMAGES ================================================
========================================================================================
The method of customizing layout images is actually just to make the image invisible (as
mentioned in GETTING RID CERTAIN ELEMENTS) and put the new one as its background. With
that said, you can do your own search on which tag you need to mess with. :)
========================================================================================
= CUSTOMIZING THE DEFAULT LAYOUT IMAGES: UPDATED =======================================
========================================================================================
Plurk changed the way some of its layout images behave, so here are the new tags you
should be customizing (it's in timeline_all.css)
.cmp_arrow_left { background:transparent url(/static/icons/icons_gif.gif) 0 -0px no-repeat; width: 82px; height:51px; }
.cmp_arrow_right { background:transparent url(/static/icons/icons_gif.gif) 0 -51px no-repeat; width: 82px; height:51px; }
.cmp_back_to_today { background:transparent url(/static/icons/icons_gif.gif) 0 -102px no-repeat; width: 82px; height:27px; }
.cmp_drop_down_small { background:transparent url(/static/icons/icons_gif.gif) 0 -129px no-repeat; width: 12px; height:11px; }
.cmp_invite { background:transparent url(/static/icons/icons_gif.gif) 0 -140px no-repeat; width: 45px; height:40px; }
.cmp_loading { background:transparent url(/static/icons/icons_gif.gif) 0 -180px no-repeat; width:173px; height:71px; }
.cmp_mobile-gfx { background:transparent url(/static/icons/icons_gif.gif) 0 -251px no-repeat; width: 21px; height:30px; }
.cmp_poll_line { background:transparent url(/static/icons/icons_gif.gif) 0 -281px no-repeat; width: 15px; height:15px; }
.cmp_twitter-gfx { background:transparent url(/static/icons/icons_gif.gif) 0 -296px no-repeat; width: 23px; height:24px; }
.cmp_widget-gfx { background:transparent url(/static/icons/icons_gif.gif) 0 -320px no-repeat; width: 25px; height:22px; }
.cmp_wj { background:transparent url(/static/icons/icons_gif.gif) 0 -342px no-repeat; width: 37px; height:25px; }
.cmp_arrow-splash { background:transparent url(/static/icons/icons_png.png) 0 -0px no-repeat; width:209px; height:18px; }
.cmp_karma_down { background:transparent url(/static/icons/icons_png.png) 0 -18px no-repeat; width: 8px; height:10px; }
.cmp_karma_up { background:transparent url(/static/icons/icons_png.png) 0 -28px no-repeat; width: 8px; height:10px; }
.cmp_logo { background:transparent url(/static/icons/icons_png.png) 0 -38px no-repeat; width:130px; height:58px; }
.cmp_plurk { background:transparent url(/static/icons/icons_png.png) 0 -96px no-repeat; width: 81px; height:38px; }
.cmp_points-arrow { background:transparent url(/static/icons/icons_png.png) 0 -134px no-repeat; width: 14px; height:13px; }
.cmp_tooltips-down { background:transparent url(/static/icons/icons_png.png) 0 -147px no-repeat; width: 20px; height:17px; }
.cmp_tooltips-loading { background:transparent url(/static/icons/icons_png.png) 0 -164px no-repeat; width: 22px; height:17px; }
.cmp_tooltips-up { background:transparent url(/static/icons/icons_png.png) 0 -181px no-repeat; width: 20px; height:17px; }
I think the names are self explanatory. The good thing about this is it is much easier
to customize them now, and also more efficient since you only have to load two images
instead of many.
########################################################################################
REFERENCES
########################################################################################
========================================================================================
= PLURK LAYOUT IMAGES ==================================================================
========================================================================================
http://static.plurk.com/static/timeline/private-lock.png 18 x 15
/drop_down_small.gif 12 x 11(12)
/drop_down_big.png 18 x 13(18)
/arrow-left.gif
/arrow-right.gif
/back_to_today.gif
/times/time-container.png 1063x 23
/info_list/loading.png 22 x 17
/up.png 20 x 17
/down.png 20 x 17
/separator.png 638 x 2
/dashboard/karma_up.png 8 x 10
/karma_down.png 8 x 10
/points-arrow.png 14 x 13
/splash/arrow-splash.png 209 x 18
/button/plurk.png 81 x 38
/emoticons/select_emoticon_small.png 45 x 20
/select_emoticon_big.png 45 x 20
/greybox/gb_foot_664.png 664 x 15
/gb_head.png 993 x 35
/gb_head_right.png 487 x 35
/w_close1.gif 18 x 18
/gb_middle_664.png 664 x 7
/invite-friends.gif 211 x 96
/twitter-gfx.gif 207 x 35
/favicon.png 16 x 16
http://www.plurk.com/u_img/default_small.gif 20 x 20
/default_medium.gif 45 x 45
########################################################################################
# END OF KIT #
########################################################################################
Biyernes, Agosto 23, 2013
New to plurk? Tips on customization of your own plurk
Mag-subscribe sa:
I-post ang Mga Komento (Atom)
Walang komento:
Mag-post ng isang Komento