Customizing BookLikes Tutorial - Adding Bells and Whistles - Blockquotes

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