Karma♥Bites’s Mercurial Reads

Note:  First post w/ some actual quick tips.  This page will be updated from time to time as I learn about new features, functions & shortcuts (see link on my blog’s home page).

Being a low-tech person living in a high-tech world, I generally resort to the KISS principle.  So this page will have nominal info & explanations.  Instead, it will be more along the lines of “if you want to do X, then do Y”—quick tips based on my trials & errors after reading some of the awesome BL tutorials (see link @ end of post) and then waving the white flag & calling my IT buddy.  ^ᴗ^

Some reminders:

•  I’m using blog default theme #1 but basic codes should be the same.

•  To do any customisation, first get to the editing area: “Settings” button→Blog tab→Customise

•  Delete all $ symbols from codes listed below (added so codes will appear in post)

Customising/tweaking via Custom CSS

(1)  To have more text appear in blog header, in “Description” box @ beginning of text, add:

<$p style="line-height: 115%;"$>

(2)  To adjust basic font sizes re: post title & text

Don’t know about others but BL’s default font scaling annoys me. The post title seems to leap out at me and the post text seems overly large (thereby making posts unnecessarily long) whilst the comments are just this side of legible. And unfortunately, FF’s NoSquint plug-in is no help in this instance.  So if you like my font sizes, C&P the following into Custom CSS box:

 

h2.post-title { padding: 0px 55px 10px; text-align: center; font-size: 20px; font-weight: bold; word-wrap: break-word; }

h2.post-title { padding-top: 30px; font-size: 20px; font-weight: bold; word-wrap: break-word; }

h2.post-title a.post-title-url { font-size: 20px; font-weight: bold; text-decoration: underline; word-wrap: break-word; }

div.post-desc { padding: 0px 45px 45px; line-height: 125%; font-size: 14px; text-align: justify; }

 

* I prefer justified text.  If you don’t, then omit the bolded code

(3)  If you like my basic blockquote style (see top of post), then C&P into Custom CSS box:

blockquote {
background-color: #FFFBE7;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 30px;
padding-left: 15px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
color: black;
border: double;
} 

 

* Colour entirely up to you. Altho not evident due to current test, my default is a pale yellow.

(4)  To get rid of that ugly brown leather button, C&P into Custom CSS box:

div.header-followers a { background:none; }
div.header-followings a { background:none; }

(5)  To add semi-transparent bg for sidebar section (see my Shelf page), C&P into Custom CSS box:

div.side-left.set-left { background-color: #F1EDFA; opacity: 0.25; }

(6)  To add semi-transparent bg for both post & comments section, C&P into Custom CSS box:

div.posts.set-right {
    background: #C9B2DA;
    opacity: 0.80;
   padding-right:5px;
}

 

Note: AFAIK, only way to add bg only to comments section is via HTML edit of individual pages.

VIP! For #5 & 6, bolded word may be for opposite side, depending on your theme. And again, actual bg colour & amount of opacity entirely up to you.

This got rather long, yeah?  So will have to wait until next update for some basic customising via HTML edits of individual blog pages. In the meantime, hope that some of you find this helpful.  :)

For more in-depth FYI (including screen shots, etc), check out Jelly/Jane's [Masterpost] Customizing BookLikes which compiled multiple tutorials into a single list.  If you find a particular one helpful, pls be sure to show your appreciation to the original poster. :)

For color codes, etc (both CSS & HTML), I like the following sites:

http://www.w3schools.com/cssref/css_colornames.asp

http://www.colorcombos.com/

http://www.color-hex.com/color-palettes/

From others: http://www.computerhope.com/htmcolor.htm & http://mudcu.be/sphere/