8052

Currently Reading

The Santa Klaus Murder
Mavis Doriel Hay, Anne Dover, Gordon Griffin
The Santa Klaus Murder
Mavis Doriel Hay
Sherlock Holmes: The Definitive Collection
Arthur Conan Doyle, Stephen Fry
Merlin Trilogy
Mary Stewart
Progress: 340/928 pages
The Adventures of Sherlock Holmes
Arthur Conan Doyle

Recently Added

A Rising Man - Abir Mukherjee
Dark Carnival - Nancy K Duplechain
The Bad-Ass Librarians of Timbuktu: And Their Race to Save the World's Most Precious Manuscripts - Joshua Hammer
"You only live once, but if you do it right, once is enough." ― Mae West


"The man who does not read has no advantage over the man who cannot read." ― Mark Twain


"Women and cats will do as they please, and men and dogs should relax and get used to the idea." ― Robert A. Heinlein


"Always be a first rate version of yourself and not a second rate version of someone else." ― Judy Garland
Find me elsewhere:
My Leafmarks Profile
Project Hamlet

Customizing BookLikes Tutorial - Adding Bells and Whistles - Blockquotes (Reblogged from Silver Thistle)

Sometimes it's nice to scatter blockquotes around your post, just to keep things interesting.... But how? Have no fear, there is a simple solution!

First things first.  When making a post on your Booklikes dashboard you'll maybe have noticed that it doesn't really cope well with coding added to the main body of your text.  Doesn't like it.  But there is a simple work-around, and here's how.

 

[[*snip* continues after the cut]]

Adding bold, italic, underline, and strikethrough are easily accomplished as there are little buttons to click right there on the 'make post' screen.

 

But look along at the end of that bar and you'll see HTML.  That's the ticket. That's where you will be able to add the command to blockquote.  ...But not without some fancy over-rides to your CSS.  Don't worry though, it's painless.

 

When customizing your template you may have noticed a 'custom CSS' box right down at the very bottom of the menu?  That's where we're headed...

 

 

The code you'll be adding is ripe to be played around with but copied exactly as i have it will give this...

All your lovely text wrapped up cozy in it's own little blockquote.  The colours and borders can be played around with, and the spacing,  but copying the code below into your own custom CSS section on your customization menu will give the result exactly as I have it.

 

This is the code as I have it;-

 

blockquote{
background-color: #cccccc;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 30px;
padding-left: 15px;
border: 2px dotted #2d3e47;
}

 

The parts that I have made bold are bits you might want to change.  'dotted' relates to the border around your blockquote and makes it...dotted.  If you'd rather have another border you can choose from dashed or maybe solid just by replacing  the word 'dotted' with the word 'dashed' or 'solid' (but without the apostrophes).  The 2px right before the border name relates to how far apart the 'dots' or 'dashes' will be, so the bigger the number the bigger the border effect.

 

Now, if you've seen my earlier tutorial you'll maybe remember I mentioned Hex codes.  That's the name given to the colour codes that your browser uses to 'read' colours.  I've bolded my hex colours to show where they are in the above code.  #cccccc is that blue-ish grey background and the border is #2d3e47.  If you'd like to choose another colour there is a handy hex picker here which is very pretty and easy to use.

 

Ok.  So, now we've got the code added to the custom CSS section and it's time to make a blockquote. How does it work?

 

Well, this is where that little HTML button on that top bar comes in.  Click on that and enter the command to block.and that's about it really.  The blockquote command is;-

 

  blah, blah, blah, 

 

 

When you're taken back to the blog post creation screen nothing will look different. It will seem as though you're blockquote-y goodness has failed.  It hasn't.  It will show up on your actual post no problem, but if you want to check that all is well before you post, choose 'preview', just to make sure.

 

That's it, basically.

 

Let me know if it helped or hindered you. :D

 

 

 

 

Reblogged from SilverThistle